/Access all areas/ Screen readers
15/05/2008 | Filed under Develop > Access all areas
In the first of a new series looking at different technologies, Alastair Campbell tackles the classic accessibility case: screen readers
The experience a user has on a site is formed by the technology they’re using. Aimed at people with little or no vision, the screen reader experience is the most different from the norm. For using a website, screen readers effectively sit on top of a standard browser, and go through elements in source code order.
You can sort of replicate what screen readers read out by turning off images and styles. Reading line by line will show any strange understanding or ordering issues. Outline images as well, to see which text is from an image, because a screen reader declares when it encounters an image. For example, if it’s a link, it will say “link, image, company logo”.
The underlying structure of a page is not only apparent to screen readers, it’s used within page navigation, enabling people to skim headings and other HTML elements. Using appropriate HTML is vital for screen readers, as headings, lists and tables all trigger certain responses.
Don’t forget that the person is using a regular browser. If you hide something with display:none in the CSS, it will often be hidden from screen readers. To provide extra information, move it offscreen with CSS. Also, JavaScript works, though sometimes updates to the page may not be available or obvious. Some common strategies for navigating a website with a screen reader are:
• Explore the first page by “arrowing” (going through everything), then use other methods to navigate.
• Tab through links, or use the software to open a list of all the links.
• Scan through heading.
• Bring up a list of links on the page.
One of the most annoying things you can do for screen reader users is to get the language wrong. An English sentence marked as French will sound like a bad ‘Allo ‘Allo episode, and French marked as English sounds like a Del Boy Trotter impression. In some cases, it will simply be unintelligible, so make sure you use the right value in the lang or xml:lang attributes. Usually, this just means changing the opening HTML tag to:
<html lang=”en”>
Popular screen readers on Windows are Jaws, Window-Eyes and Hal. Some of these have a free download that will work for a set time before requiring a reboot. On OS X, VoiceOver is built in and has been updated in 10.5 with much improved navigation within web pages.
Try a screen reader to get an impression of the experience, but don’t make decisions based on your experience. Without using it day in, day out, you won’t have the same experience and might make things worse. Stick with the W3C standards.
Bookmark with:
Comments
John Puddifoot / 03/06/2008 / 15:40 / http://www.bluehat.co.uk/
Randomly just came across this article having been testing a website using a screenreader this morning.
Although a lot of people preach about using their websites being accessible, I wonder how many actually go as far as testing in such a way.
JAWS is the screen reader that we were testing with which is well regarded.
mike / 17/08/2008 / 16:56 / http://www.flashist.co.uk
As a web developer whos developed very bad RSI , i have gained a much greater understanding of how important accessability really is. Try navigating a badly coded website using a text to speech programme like Dragon, or even the one built into vista and you will get so frustrated. Whilst luckily i dont need a screen reader, we should definately consider those that do when making sites, its not like it adds much time to the development.
mikejonesey / 10/10/2008 / 05:54 / http://www.sakuiweb.com
From my experience different screen readers read in different orders and read different elements. This means you can't really develop for one or the other, this is where standards come in. (W3C - http://w3.org)
Although I wouldn't really say screen readers are the biggest concern regards web accessibility,
I don't know the precise figures but let’s say 2-5% of internet users require a screen reader, I would imagine 15-30% don't need a screen reader but would need large fonts. Thus my main concern would be adjustable font sizes, something around 90% of websites don't bother with (including this one - tesed ie7).
ps this websites anchor links don't have titles, accesskeys or tabindex making use of any screen reader difficult! :)
Alastair Campbell / 10/03/2009 / 18:09 / http://www.nomensa.com/
Hi mikejonesey,
You're right about font size, but please don't add titles, accesskeys or tabindex to links. Have a read through these previous articles for why:
http://www.netmag.co.uk/zine/the-accessibility-test/web-fundi-com
http://www.netmag.co.uk/zine/the-accessibility-test/www-huntforproperty-ie
I haven't covered mis-use of the title attribute, but if you make you link text accessible and SEO friendly, then titles are not needed.
