Accessible web coding 101

[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 :)
 
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 :D)
 
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.
 
Blimey the Jaz man :) welcome back to the fold mate :D good to see you :D
 
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. :D
 
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
 
Abbreviations

Right an abbreviation is something like CSS which stands for Cascading Style Sheets, XML which stands for Extensible Markup Language or HTML with stands for HyperText Markup Language.

Now to code these in your (X)HTML you write them as ~
<abbr title="Cascading Style Sheets">CSS</abbr> or
<abbr title="Extensible Markup Language">XML</abbr> or
<abbr title="HyperText markup language">HTML</abbr>

Now the problem with screen readers is they will read it out similar to Cascading Style Sheets ces as they try to read it out literally, unless it is the Thunder screen reader which doesn't read out the TITLE attributes so it would just sound like ces to those users.

Now if you have an abbreviation that literally needs to be sounded out letter by letter like CSS, XML or HTML you need to give it a class and then apply the speak CSS rule in your CSS sheet.

So ~
<abbr title="Cascading Style Sheets" class="speak">CSS</abbr> or
<abbr title="Extensible Markup Language" class="speak">XML</abbr> or
<abbr title="HyperText markup language" class="speak">HTML</abbr>

Then in your CSS ~
.speak{speak:spell-out}

Then screen readers will sound out each letter of the abbreviated word.

Also for IE 6 and IE 7 which don't underline the ABBR tag you may also want to write ~
abbr{border-bottom:1px dotted}

For those users.

Jaz

Key:
Blue ~ XHTML
Green ~ CSS
 
Links
Blind users use what are known as screen readers to literally read aloud the text to them.

When they encounter a link most screen readers, bare in mind these are expensive and are not free, will read it out to the user as ~

[link1] Home

Now that is great for a link like ~
<a href="#">Home</a>

But what if you have a TITLE attribute applied to the link, how does that sound?
So for example ~
<a href="#" title="home">Home</a>

Screen readers are one of the only user agents that actually use the TITLE attribute when they encounter it in a link such as the one above, so it will be read out like ~

[link1] home Home

Now if you have 50 links all with matching TITLE attributes that can be get irritating quite fast especially as they have to listen to every word on the page. So what you want to do is minimalise the amount of time they have to listen to pointless words so to get them to stick around longer. So don't add the TITLE attribute to a link unless the link is unclear in which case it is acceptable but try to keep it to a minimal description.

Image links
An image link is something that looks like this ~
<a href="#"><img src="path/to/some/file.png" alt="short descriptive text/exact text" /></a>

Now the most important part of any image link is the ALT attribute which is highlighted above.
What this little fella does is display content to your perfectly sighted viewers if the image fails to load, allows the Search Engines to rank the corresponding page better and tells a person using a screen reader some information about the corresponding page.

Now perfect ALT text is the exact text that is shown in the image, or as close as you can get. So for example if it was a product include the product name, if the image just says Search, the ALT text should just say Search it should not say Search here for example.

Again because you are trying to cut down on useless words as you want them to stick around, as you are now different from 90% of your competitors, who make them struggle here is a good usability concept.

How to remove links from a page but keep the same items linked up.
This has usability bonuses, SEO bonuses, as you are cutting the amount of outbound links down and thus increasing the amount of equity through out the site more efficiently, maintainability due to large amount of code bloat reduction, and a reduction in the strain on your server due to the smaller file sizes, again performance benefit it even if it is slight.

Right you have a piece of code like this ~
<a href="path/to/the/product/page/for/this/item.htm">
<img src="some/product.png" alt="some product name" />
</a>
<a href="path/to/the/product/page/for/this/item.htm">
Some product name
</a>

Now to a blind user this is going to be read as
[link1] Some product name
[link2] Some product name

Again wasting time with pointless links TBH.
So to get around it remove the first link and give the image a blank ALT attribute and place it in the second A tag.
Like this ~
<a href="path/to/the/product/page/for/this/item.htm">
<img src="some/product.png" alt="" /> Some product name
</a>

And wella a massive reduction in code, the same effect and improved usability. If the IMG tag and combined actual link text is large then put the img after the text name, this is due to the Search Engines not indexing the last part, you want the name indexed. If you then need to style it float the image left to get the same effect.

If you have problem styling it as the image will now be along side the text rather than underneath it place this in the CSS ~

#container a img{display:block}

And you have just achieved the same effect.

Client side image maps
Now a client side image map is one image where different sections are designated for different links.

So for example they look something like this ~
<img src="path/to/image" alt="" usemap="image" />
<map name="image" id="imagemap">
<area shape="rect" cords="10,05 90,75" href="somefile.htm" />
<area shape="rect" cords="100,52 120,75" href="somefile.htm" />
</map>

Now the problem is there is no way to tell blind users, or the Search Engines for that, in that example what each link goes to. So they would hear something like ~

[link1]
[link2]

Which is just pointless.
So to get around that you include an ALT attribute on each AREA tag with an apporiate short description of the following page.
For example our new image map would look like ~
<img src="path/to/image" alt="" usemap="image" />
<map name="some/image/map" id="imagemap">
<area shape="rect" cords="10,05 90,75" href="somefile.htm" alt="home" />
<area shape="rect" cords="100,52 120,75" href="somefile.htm" alt="portfolio" />
</map>

They would then hear something like ~
[link1] Home
[link2] Portfolio

As you can see the changes make a huge difference.

Jaz

Key:
Blue ~ XHTML
Red ~ Screen reader output
Green ~ CSS
 
Accessible flash web coding
Hay peeps.
I will be honest Flash just isn't my bag TBH. Tried to learn it a while back and just couldn't be arsed as I had other things on at the time and since then nothing has really fired me up enough to bother.

So anyway I was contacted the other day to make a flash site accessibility proof.
Now if I'm honest I didn't have a clue where to start, except for Bing.

Anyway I came across this so thought I would update the thread for anyone wanting to make a flash site accessible.

Hope it helps. :)
Jaz
 
Jaz - google supposedly can access flash sites now although I've got no experience there either.
 
Yeah even though thats not as straight forward as it sounds, but that info is how to make flash sites accessible to people with disabilities who use screen readers buddy not the Search Engines. :)

But it will also make the site more Search Engine friendly as a side effect, I probably should have stressed that as a plus more. :)
 
Any good examples of free screen readers that we can test our site with to check that it does what we expect it to (like you would check in different browsers etc.)
 
Haha :) cheers.

"dodgy" question
Is there a way of stopping screenreaders 'seeing' text.

I ask as I was looking at using dingbats, but didn't want them to be changed to standard text (essentially would be a mess of letters) on screen readers.
 
You must log in or register to reply here.
Back
Top