Accessible web coding 101

Design Forums > Web Design Forums > Web Coding & Development > Accessible web coding 101


Reply
 
LinkBack Thread Tools Display Modes
Jazajay is offline
All round nice guy
1,215 Posts
Leicester, UK
[EDIT]Previous post deleted by administrator.[/EDIT]

It cant do any harm?
Well that's a bit of an understatement, as a lot of accessibility changes can greatly improve SEO and the amount of pages the search engines sees, thus getting you in more results, and thus bringing you more traffic alone.

Also most of the big players don't conform?????
For example here's an example from Google ~ a PageRank 8 site.
<a href="http://video.google.co.uk/?hl=en&tab=wv" onclick=gbar.qs(this)

Now they could have put the whole JavaScript in the href but they haven't as it is bad practise.

Again from Google:
<img alt="Google"


The ALT text says what the images says, well TBH the image does say Google UK so technically so should the alt attribute, but it is still used correctly(ish) as in it provides blind users text so they can hear the same as a sighted user.

The NHS website ~ PageRank 8 ~ has it's own accessibility section, well sized links, large enough text that can resize if necessary, ALT text on all their images and they are pretty big.

Here's and example from Yahoo! a PageRank 4 site.
<img src="http://l.yimg.com/a/i/ww/met/pa_icons/vitality_up_040209.gif" alt="Up"

How about Facebook a PageRank 9 site ~

<img alt="Facebook logo"

How about IBM a PageRank 6 site ~

<img height="50" src="//www.ibm.com/i/v16/t/ibm-logo.gif" width="110" alt="IBM®" />

Dell a PageRank 7 site ~
<img src="http://i.dell.com/images/global/general/spacer.gif" alt=""

Now that's a spacer image and the fact Dell still uses tables and a hell of a lot of them, well....but it still apply's a blank Alt attribute to the spacer which is correct for accessibility usability best practise.

Also the DDA is not just for blind users it for any1 with a disability.
What about sighted ppl who can see but sip though a straw to navigate webpages????? Think Steven Hawking as a prime example, granted he uses technology slightly different but the principle is the same.

The same still apply's and they can see your graphical design.

What about ppl with motoneurone disease's who have problems clicking links, again they can see but will have massive problems contacting you if your contact link is too small and you code it with px rather than ems, as px don't resize if the user wishes, em's do, again what happens if your terms and conditions cant resize and some1 with bad eyesight, that's 1 in 7 of us by the way, cant read it and end up signing up to something they don't want as a result and take you to court, as that is covered under the DDA, as it is a disability, I have no proof they would win, but I personally wouldn't risk it as they might.

Again they can still see your design, but can not use it.

The reason blind ppl are used as examples mainly is because blind ppl tend to sue more often, than other groups, and there have been massive payouts from sites that didn't think they would need to worry about accessibility, some examples of lawsuits are on page 2 of this thread I think.

But the SEO benefit alone, can actually make the difference between your pages showing up on page 4, or page 1, even if you sod the whole you know doing a good job, helping minorities use your site, or even that little thing of MAKING SURE YOUR SITE DOESN'T BREAK THE LAW in your country.

Jaz



Do your bit keep children safe and report illegal content to the IWF.
ADHD or a reaction to food additives? The Hyperactive Children's Support Group
Ever wondered how to create a contact form for your site? Then follow this easy tutorial
Does your site meet the legal requirements of the DDA? Not sure then find out if it does

Last edited by Jazajay; 23-01-10 at 07:29 PM..
  Quote Post 41 Posted 28-08-09
Onartis is online now
Off-Topic Overlord
1,794 Posts
Belgium
I take it you're subscribed to this post Jay?



Twitter... Don't get any high expectations.
Portfolio... Coming some day soon, hopefully.
  Quote Post 42 Posted 28-08-09
Jazajay is offline
All round nice guy
1,215 Posts
Leicester, UK
lol, O yeah triply subscribed fella. lol.



Do your bit keep children safe and report illegal content to the IWF.
ADHD or a reaction to food additives? The Hyperactive Children's Support Group
Ever wondered how to create a contact form for your site? Then follow this easy tutorial
Does your site meet the legal requirements of the DDA? Not sure then find out if it does
  Quote Post 43 Posted 28-08-09
Onartis is online now
Off-Topic Overlord
1,794 Posts
Belgium
Haven't seen you here for a while... Have you met Harry yet? He's also a coding wizard (literally, because his site name says so haha )



Twitter... Don't get any high expectations.
Portfolio... Coming some day soon, hopefully.
  Quote Post 44 Posted 28-08-09
Jazajay is offline
All round nice guy
1,215 Posts
Leicester, UK
Yes I do believe we've sparred once or twice TBH, lol.
Been soooo busy recently just haven't had time to pop round, will try over the next couple of months when my work load dies down a little.

You never know maybe me and Harry can spare a little then, hay. lol.



Do your bit keep children safe and report illegal content to the IWF.
ADHD or a reaction to food additives? The Hyperactive Children's Support Group
Ever wondered how to create a contact form for your site? Then follow this easy tutorial
Does your site meet the legal requirements of the DDA? Not sure then find out if it does
  Quote Post 45 Posted 28-08-09
Aarlev is offline
Designer/Team DF
1,114 Posts
London, UK
Hey Jaz!

Haven't seen you around these parts for a while. Good to have you back mate!



Soren Aarlev
Web & Graphic Designer
www.sorenaarlev.com
------------------------------------------------------------------------------------
  Quote Post 46 Posted 28-08-09
chrismitchell is online now
Giggidy / Team DF
4,479 Posts
Milton Keynes
Blimey the Jaz man welcome back to the fold mate good to see you



The Widdler's Wee Online Farm
Follow us on Twitter
Just remember.. no matter how happy you think you are, you're never as happy as a Pineapple Chunk... They're well happy!
Don't forget to donate blood!
  Quote Post 47 Posted 28-08-09
tim is offline
tim
Onartis-basher
4,306 Posts
JAZAJAY!

looked at your profile yesterday!

"last login, 3 months ago."

haha



Dr. Frappucino
  Quote Post 48 Posted 28-08-09
Jazajay is offline
All round nice guy
1,215 Posts
Leicester, UK
Aww Tim still checking my profile aww buddy, that's well....yeah, lol.
But jease guys over 2000 posts thats err.....impressive, lol, no but seriously cheers, I've missed you guys too.



Do your bit keep children safe and report illegal content to the IWF.
ADHD or a reaction to food additives? The Hyperactive Children's Support Group
Ever wondered how to create a contact form for your site? Then follow this easy tutorial
Does your site meet the legal requirements of the DDA? Not sure then find out if it does
  Quote Post 49 Posted 29-08-09
Jazajay is offline
All round nice guy
1,215 Posts
Leicester, UK
High readability versions.

1 in 7 ppl have some form of colour blindness or other disability that effects their sight, that's 1 in every 7 of your users. If they also suffer dyslexia then again they may find your version just too hard to cope with.

That is why for those users you should link to a zoom style sheet.
Here we will run through how best to set this up for your site visitors.

But lets first talk about what it actually is.
A zoom style sheet basically is a high contrast simplified version which is only done by the addition of 1 more CSS sheet.

So this style sheet basically sets your layout to a single column, or 2, navigation at the top in a horizontal manor, large text with line height set to 150%, the background some dark colour and the text some lighter colour. Not black with white text though as people with dyslexia can find it hard to concentrate on.

Think dark blue for the body with I don't know white for the text with orange for the links but to improve readability even further the links should also be bolded.

So a basic 1 would be like something at the BBC news website, view the low graphics link at the top near the logo ~

But we will make ours look a little bit more coluorful.
body{background:#123 ;color:#FFF}
a{color:#FC3;font-weight:bold}
a:hover{color:#FCF}

You get the idea.

In this style sheet you override all your default rules, it is basically just for people who have problems reading your text or the layout is too much.

Right to show it.
Certain browsers are starting to offer you the ability to switch between alternate style sheets so for them we place this in the head of the page ~
<link rel="alternate stylesheet" type="text/css" href="yourcssdirectory/zoom.css" media="screen" />

People can then chose it and it will take effect.
Now for the other browsers such as IE we need to get a little creative.
In this example I will be using PHP but you can use whatever server language you want.

First we place a clear link at the top of the page, preferably in the top left or right saying <a href="yoursite.com/this-page-name?high=y" rel="nofollow">High readability version</a>

Then in the top of every page write this.
<head>
</title>
<link.... your other css sheets go above here.
<?php if(isset($_GET['high'])){?>
<link type="text/css" href="zoom.css" media="screen" />
<meta type="robots" content="noindex,follow" />
<?php }?>

And around the link to the high readability page we write this ~
<?php if(!isset($_GET['high'])){?>
<a href="yoursite.com/this-page-name?high=y" rel="nofollow">High readability version</a>
<?php }else{?>
<a href="yoursite.com/this-page-name" rel="nofollow">Graphical version</a>
<?php }?>

That will then override the default CSS sheets and provide the user with the high readability version instead. The link will then change to link back to the graphical version. We add the meta as the URL changes and the Search Engines could index both urls with the same content and thus give you a duplicate content penalization and this stops it from happening as it only kicks in when the get variable is present. If it is not present it doesn't kick in so you don't need to worry.

Then for every link write something like ~
<a href="yoursite.com/this-page-name.php<?php if(isset($_GET['high'])){?>?html=y<?php }?>">Some link</a>

That way if they are on the high readability version and then click a link the get variable will be present and all pages and will load the zoom.css sheet. If they want to go back to the graphical version they can click the graphical link and then all the links will point to the graphical version.

For a working example check out http://rogerneedle.com/.
Let me know if I can explain this any better or there is a section you are unsure about.

Jaz

Key:
Red ~ PHP
Green ~ CSS
Blue ~ XHTML



Do your bit keep children safe and report illegal content to the IWF.
ADHD or a reaction to food additives? The Hyperactive Children's Support Group
Ever wondered how to create a contact form for your site? Then follow this easy tutorial
Does your site meet the legal requirements of the DDA? Not sure then find out if it does

Last edited by Jazajay; 23-01-10 at 07:47 PM..
  Quote Post 50 Posted 13-12-09
Tags: 101, accessible, coding, web
Reply

« Previous Thread | Next Thread »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On



vBulletin® Copyright ©2000-2010, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.2.0