Design Forums - UK Graphic Design & Web Design Forum

[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

I take it you're subscribed to this post Jay?

lol, O yeah triply subscribed fella. lol.

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 )

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.

Hey Jaz!

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

Blimey the Jaz man welcome back to the fold mate good to see you

JAZAJAY!

looked at your profile yesterday!

"last login, 3 months ago."

haha

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.

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