Design Forums - Graphic Design & Web Design Forums

Aarlev · Post 46 Posted 28-08-09

Hey Jaz!

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

chrismitchell · Post 47 Posted 28-08-09

Blimey the Jaz man

welcome back to the fold mate

good to see you

tim · Post 48 Posted 28-08-09

JAZAJAY!

looked at your profile yesterday!

"last login, 3 months ago."

haha

Jazajay · Post 49 Posted 29-08-09

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.

Jazajay · 06:47 PM

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

Jazajay · 06:49 PM

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

Jazajay · 06:56 PM

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

Jazajay · 06:58 PM

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

Levi · Post 54 Posted 23-01-10

Jaz - google supposedly can access flash sites now although I've got no experience there either.

Jazajay · Post 55 Posted 23-01-10

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.

Renniks · Post 56 Posted 26-01-10

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.)

Jazajay · Post 57 Posted 30-01-10

Haven't checked most of these out but check out this large list of screen readers.

Renniks · Post 58 Posted 30-01-10

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.

Jazajay · Post 59 Posted 30-01-10

Dingbats?
As in clipart images? Clip Art Warehouse - Free clip art images by the thousand !!

Then just add a blank Alt attribute and the screen reader will just pass it by.

Renniks · Post 60 Posted 30-01-10

Dingbats as in Dingbat - Wikipedia, the free encyclopedia

A dingbat is an ornament, character or spacer used in typesetting, sometimes more formally known as a "printer's ornament" or "printer's character".

I assume that will still work though

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Aarlev Designer/Team DF 1,321 Posts London, UK	Hey Jaz! Haven't seen you around these parts for a while. Good to have you back mate! Soren Aarlev Interactive Designer www.sorenaarlev.com (New site coming soon (when I get my ass in gear and build it)) ------------------------------------------------------------------------------------
	Post 46 Posted 28-08-09

chrismitchell Doom! / Team DF 5,379 Posts Milton Keynes	Blimey the Jaz man welcome back to the fold mate good to see you The Widdler's Wee Online Farm \| Widdler's Wee Creative \| Follow us on Twitter \| Newswipe Now Live! Come join the Rant! 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!
	Post 47 Posted 28-08-09

tim Senior Member 4,378 Posts	JAZAJAY! looked at your profile yesterday! "last login, 3 months ago." haha nobody?
	Post 48 Posted 28-08-09

Levi Isn't that lovely? 2,332 Posts Norfolk	Jaz - google supposedly can access flash sites now although I've got no experience there either. Image Resolutions - It's in need of an update which is currently in progress >>>>
	Post 54 Posted 23-01-10

Renniks Shmoo 2,197 Posts Cardiff	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.) Learn the rules - so you know how to break them properly Simplicity is the ultimate form of sophistication My twitter
	Post 56 Posted 26-01-10

Renniks Shmoo 2,197 Posts Cardiff	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. Learn the rules - so you know how to break them properly Simplicity is the ultimate form of sophistication My twitter
	Post 58 Posted 30-01-10

Renniks Shmoo 2,197 Posts Cardiff	Dingbats as in Dingbat - Wikipedia, the free encyclopedia A dingbat is an ornament, character or spacer used in typesetting, sometimes more formally known as a "printer's ornament" or "printer's character". I assume that will still work though Learn the rules - so you know how to break them properly Simplicity is the ultimate form of sophistication My twitter
	Post 60 Posted 30-01-10

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

Design Forums - Graphic Design & Web Design Forums

Accessible web coding 101