Accessibility has been brought to the forefront of the minds of many designers and developers over recent years. In many countries there can be legal repercussions if you have built a site and not made a reasonable effort to accomodate disabled users. One of the most often discussed parts of this process is making your site work with screen readers.
Screen readers are programs that are designed to read the contents of pages and programs to users, so that those with sight problems can still use computers. With most software, they work well. Microsoft Word, for example, works well with screen readers. However, on the web it is a very different story.
(Please note - I am well aware screen readers are very valuable to many web users and am not trying to ridicule them - just trying to help make the people that create screen readers shoulder some responsibility for making the web accessible.)
Screen readers have many problems when it comes to reading websites, aside from just the code used by web designers and developers. It should be simple enough for the makers of these programs to solve the problems with their software, but rather than there being pressure on them to do so, the pressure is on designers and developers to create sites that work perfectly with these sub-par applications.
The first major problem with screen readers and the web is that the web is a huge collection of very different documents. Every page has different code behind it, and every site has its own idiosyncracies and potential problems for a screen reader. Some sites use images without alt attributes, for example, forcing screen reader users to listen to "spacer.gif" over and over again. Some use bad link text, or have huge navigation systems without any method for the screen reader user to avoid hearing that navigation system read out to them, page after page after page.
These specific problems are down to accessible coding, but once you have a site that meets at least the basic accessibiltiy requirements, the problem is far from over. Meeting minimum accessibility requirements does not, by a long way, ensure that users of screen readers (and other assistive technology) will actually have a pleasant experience using your site.
CSS and modern web technologies have systems in place for resolving this issue. Media types in CSS allow you to specify different style sheets for a site depending upon what type of user agent is visiting the site, braille and speech being the two most closely related to accessibility. Using these media types, you can set specific parts of the page to be treated differently by screen readers. For example, you could hide all decorative images or re-order the page so content is first.
The title attribute of HTML allows you to provide more information about an element. Screen readers are not obliged to read the contents of the title attribute instead of the element contents, but it is widely accepted that for most elements in most circumstances the title attribute is very useful. Perhaps the screen readers should read both, or give the user an option. As it is, they allow the user to select whether they would prefer to hear the title or not, but only for links and images - no other elements.
HTTP headers are also designed to allow user agents to determine what content they are returned from a server, specifically with the HTTP_ACCEPT header. Internet Explorer, unfortunately, simply lies about what it can understand in this header, which seems to have devalued it somewhat. That said, the value of the header is immense. If a user agent, such as a screen reader, were to correctly identify what it can and cannot receive from a server, the server would be able to send its response in the best possible form. For example, if you are offering an audio version of an interview in mp3 form, and the HTTP_ACCEPT header was used properly by user agents, you would be able to send a text transcript of the interview to those users who cannot interpret MP3 files. The same applies to much of the content on the web.
Though it would not be ideal, designers and developers could achieve the same thing - delivering content appropriately to user agents depending on what they can use - if screen readers were to identify themselves correctly with a recognisable HTTP_USER_AGENT header. That would enable developers to identify requests from screen readers and send back the correct content.
The excuse generally used is (with both this and the HTTP_ACCEPT issue) that screen readers do not render web pages and are not user agents - they are, instead, simply programs that read the contents of web pages once rendered by a browser. However, there is no good reason screen readers could not modify the values of these HTTP headers before they are sent. Really, there is no good reason the makers of screen readers could not use an open source rendering engine such as Mozilla or KHTML in their products, and become web browsers in their own right as well.
Consider this example - I have a breadcrumb system on a site, using "»" as the separator between the breadcrumbs. I like that symbol, and I'd like to keep using it. Unfortunately, a screen reader will read that literally as "right double angle bracket". This could mean my breadcrumb trail, though it looks nice enough, sounds through a screen reader like: "home right double angle bracket products right double angle bracket betty boop right double angle bracket bobbler". Not ideal - and only really fixable by changing the separator or using an image instead of text - but that is how things currently work.
However, if screen readers were able to understand the CSS media property, I could hide those symbols from screen readers. If the title attribute were used better, I could set it to nothing or "separator", making the breadcrumb trail far more useful. If neither of these were possible, I could at least serve a slightly modified file to the screen reader user, with the symbol replaced by something more useful, based on their HTTP_USER_AGENT.
The irony with all of this is that if screen readers (or rather web readers) were to make life easier, more and more designers and developers would ensure that their sites work perfectly with screen readers. More and more people may well then make use of these technologies.
I can appreciate that there may be financial constraints on the creators of these programs, and that improving how they handle web sites may not be at the top of their list of priorities, but these are still important flaws in screen readers and should be fixed. I can't help but think that if the web design community were to put pressure on the people that make these programs, it would be easier to create accessible web sites. More people would then create accessible websites (or improve the accessibility of their already-accessible sites), giving the users of screen readers a better experience on the web.
29 Comments
Something to consider: Have I made a reasonable effort to make a site accessible if I provide an aural style sheet that works perfectly? I have made a significant effort, but the majority of disabled users still cannot use the site because the technology at their disposal is not able to understand the style sheet.
#1, Dave Child, United Kingdom, 15 September 2005. Reply to this.
"re-order the page so content is first" (I am presuming you are talking about non-tables layouts) I dont think you should rely on the css to do that, you should present the "main thing" first anyway, use css to display your nav columns for sighted viewers... and if the "main thing" is to get the non sighted viewer straight to the "main thing" use "skip navigation" as the first link on the page for non-sighted viewers.
Otherwise a very nicely written piece - that cannot be echoed enough.. btw what screen readers are you testing this stuff on? Where can I get one too?
#2, Paulg, France, 15 September 2005. Reply to this.
Hi Paul.
I agree, for the most part. You can have the content first in the HTML and reorder with CSS, but there are plenty of people who for perfectly valid reasons choose not to or are unable to. If you don't want to use absolute positioning, having the navigation first may be unavoidable if you want to have a specific look to your site. The same applies with many CMSes, that may not allow reordering of elements within HTML without a good working knowledge of a language like PHP or ASP. If we could use CSS properly, we would have the freedom to have things the best way round for the best user agent.
Thankyou for the compliment, too. I've used JAWS primarily over the last few years for testing and dabbled with others (for example the new voice features of Opera 8).
#3, Dave Child, United Kingdom, 15 September 2005. Reply to this.
instead of using > as a seperator what about using the unicode equivalent? What does jaws do then?
(I dont know the char for > but try this down arrow: ▼ )
#4, Paulg, United Kingdom, 15 September 2005. Reply to this.
I honestly don't know if entering the character as unicode will make any difference, but I would be surprised if it did. Worth looking at though! I suppose the risk is that if screen readers did read the symbol in a different way, it would be to read it as any unknown symbol, so possible as "question mark".
#5, Dave Child, United Kingdom, 15 September 2005. Reply to this.
Why not use CSS's :after pseudo-element to generate the separator characters? I know IE doesn't like this, but if websites start doing it for accessibility reasons, Microsoft might be politically forced to add support for generated content to IE...
#6, Mike, United States, 15 September 2005. Reply to this.
oink oink flap flap...
Its the way it should be done though.. css.
» found this one today - what does jaws make of it? Does it read it out.
#7, Anonymous, France, 16 September 2005. Reply to this.
Nice article, and I could even get few, good advices for rendering my sites accessible.
Go on! write down some more! You're doing it good.
BTW: You could call this article:
"The inaccessibility of accessibility programs"...
#8, Zohar, France, 19 September 2005. Reply to this.
I have always loved the web and programming, I would love to get my hands on a screen reader and rip it to shreds one day, maybe even make my own, seems like fun.
#9, Matt, United Kingdom, 20 September 2005. Reply to this.
I have to agree with this in part. The mark-up is so important for such devices, so it's all the more irritating that they don't use some of this that they "need" to alter their output. For instance, reading a word with a pitch change if that word is marked for emphasis. We shouldn't <em>have</em> to offer an aural CSS for such things. That said, to be fair, I know readers like Jaws have a large selection of user-prefs and settings, so maybe what I've heard is bare-bones, sans inflection or something along those lines. In other words, maybe further capabilities exist that I am not aware of.
#10, Mike Cherim, United States, 10 November 2005. Reply to this.
By the way (sorry for the double post), the Opera browser is a great Jaws and IBM HomeReader emulator. Really worth getting (for free). Select text, right-click, Voice [v], it reads, male or female. It offers great insight to the perils of hiding elements with CSS and your title and alt text.
#11, Mike Cherim, United States, 10 November 2005. Reply to this.
really great article (even if I can't imagine why some one would love Jack Daniels when Wild Turkey is just so tasty).
thanks for the work.
#12, will, United States, 22 November 2005. Reply to this.
Over at www.eiao.net (European Internet Accessibility Observatory), they are working on a method to benchmark accessibility for websites.
#13, Ole, Norway, 28 November 2005. Reply to this.
I just tested my site with Opera.
Some EASY rules for screen readers to follow:
1. If you find large layout tables, READ THE LARGEST PANE first. Within, that read the largest pane first, and so on. This is almost inevitably the most valuable content.
2. REMEMBER THE NAV LINKS and don't read them again. If a portion of a site remains constant page to page, it's not worth reading repeatedly.
3. DON'T READ EVERY OPTION IN A DROPDOWN unless they are making a selection. Sighted people don't.
And that's just it. Approach the problem the way a sighted person would. Read only what a sighted person would read and in the order that a sighted person would read it.
Don't make the 99.9% change for the 0.1% by lobbying! Empower the 0.1% to experience sites in the same way.
Maybe I should patent 1, 2, and 3 above since it appears nobody has thought of them...
#14, Paul, United States, 19 January 2006. Reply to this.
Some thoughts:
I've tested with several applications; Jaws, Opera etc and the one thing I've found is that they read the page the same way a spider does. They start at the top of the source and work down line by line. If you wan't to get a good feel of what it's like to use these applications on your pages just start reading your markup. You'll find it becomes very tedious and dificult to find any informaion. Particularly if it's a table based layout.
Essentially, the rule should be: If you need to use a WYSIWYG editor or CMS to change or find informaion on a page, your probably not ADA compliant.
Good observations about the readers. We as developers have the responsibility to do our part but the Software needs to do it's part. If you think about it this is kinda like the browser wars all over again.
#15, Scott, United States, 31 January 2006. Reply to this.
Hello, I really enjoyed reading this article. I'm a jaws user and have been for years. Feel free to ask me if you have any questions relating to Jaws or website accessibility. my own site can be found at www.digitaldarragh.com/
#16, Darragh, United Kingdom, 3 February 2006. Reply to this.
Your kidding! I came here while looking via a Google search while looking for a list of screen reader user agents strings, so I could send appropriate content to them.
I can't believe they don't send them!!! What a load of crap!!! I'm amazed the sydney olympics website developers were sued, based on that fact. Even if they need to use a browser for rendering there is no reason that they can't retireve the data themselves and then pass it onto a browser if not in a format which would be helpful for a screen reader. I certainly can't see why reading a specially designed XML file would be harder than reading the output of the browser.
Screw that then. If ya don't send me a UA telling me that you have special needs, then I'm not going to treat you special.
#17, Gerry, Australia, 7 February 2006. Reply to this.
Slightly edited version of a post I made elsewhere:
This means people are expecting web developers to cater for what is essentially a non visual browser, even though they are being sent the User Agent string of a visual browser. Which, is absolute bullshit!
I would happily send descriptions in place of images if you told me you needed them. But don't tell me your using a visual browser, when really you aren't and then complain when I don't provide an alt attribute. It isn't needed in a visual browser because the image speaks for itself.
And no, the argument that it's just a screen reader and not a browser doesn't hold water. To the user it is their browser as they get the information from it and not IE. It's not like the screen reader or whatever would need to be rewritten to also do the job of the browser. All that is really needed is for the UserAgent of IE (or whatever browser is being used as the backend) to represent the true browser that the user is getting the information from. If you want me to treat you differnt, then friggin let me know!
#18, Gerry, Australia, 8 February 2006. Reply to this.
Does anyone know whether ANY screen reader avilable today takes advantage of structural markup in data tables, such a scope attributes, ids, and header references?
I find myself spending huge amounts of time coding tables correctly but I have yet to find any indication that it actually matters in the real world.
If no screen reader (or web browser) makes use of this extra encoding, then why should anyone go to the effort of producing it?
Sheesh! It's enough to make a fella think he oughta go into the screen reader business. These folks seem ripe to be blown away in a market economy.
#19, HaigEK, United States, 31 March 2006. Reply to this.
This just goes to show the difference between screen reader creators and those who simply rattle through the web trying to use them. I have been using a screen reader for a few years now and am always surprised by what seems to irritate people, I can live with >> as a spacer! To make me feel happy make sure any text doesn't include the words 'live' and 'read'
Context is everything.
Mind you, graphics labelling helps my sanity.
#20, karl, United Kingdom, 3 April 2006. Reply to this.
Hey,
I have partial vision and use a screen reader about half the time. Thus, I am using both a visual browser, and the screen reader equivalent. I love seeing the pictures in my browser, but I like using JAWS to read text. I appreciate your thoughts, and agree that screen reader creators need to get thier heads on straight. My simple suggestions for making a site more pleasant are:
1. Alt tags for images are my friends.
2. Please don't use links labled "click here" Tell me what you are actually getting when you "click here" Jaws will jump through links, buttons, edit fields checkboxes, radio buttons frames, headings and the like, but I need to know what in the name of all that is good and proper I am clicking on.
3. If you use macromedia, try to use the accesiblity options they employ, and if possible, provide similar content in a non-flash format. I have several friends who won't even download flash because it gives thier speech programs all sorts of hiccups.
4. Please give me an immidiate option when using captia for verification. (I apologize if I didn't spell that correctly.) When I am signing up for an online service, and have to pull out a magnifying glass or not join a web page, I get a bit cranky. My friends who have to wait for me to pull out a magnifying glass for them, get even more cranky. We can use the audio equivalants, or maybe some other form of proof that we are humans, but when vision is the deciding factor.... it can be a bit demeaning.
5. Please don't take my suggestions as the last word. When things get sticky, I pull out my magnifying glass, so I am not going to be as helpful as someone who uses speech only.
I appreciate that web designers are trying to make things work for us, and agree that the screen reader market is pretty limited and problematic. If any of you create something new, let me know.. I am always ready to dump Jaws in favor of something better.
#21, Amy, Unknown, 20 May 2006. Reply to this.
Er.. I forgot to add this...
If you have articles on your page, please keep the use of PDF to a minimum. It's getting more accessible, but still has a long way to go. If you do have to use it, please try to provide a copy that is accessible or try to offer it in another format as well.
Thanks again.
#22, Amy, Unknown, 20 May 2006. Reply to this.
Have to agree with the user agent comments - I would love to pour some cash into a properly developed site for screen readers, but since I can produce absolutely zero statistics on the number of users out there who would benefit I can't produce a business case to release the funds.
#23, Kersti, United Kingdom, 1 May 2007. Reply to this.
Two years later... are there any developments in this regard?
#24, Fahed, United Arab Emirates, 16 June 2007. Reply to this.
I would also like to know if screen readers have any updated abilities to handle HTML/CSS, etc. I'd like to design my pages to make them accessible, but there isn't much recent information out there about the state of things.
Thanks
Josh
#25, Josh, United States, 3 August 2007. Reply to this.
Hey buddy, what kind of screen reader for web content do you use? Can you list some?
#26, Leon, Unknown, 9 November 2007. Reply to this.
The makers of JAWS don't even have a doctype in their HTML. 36 validation errors on the <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.freedomscientific.com%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0">home page</a> and 16 on the <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.freedomscientific.com%2Ffs_products%2FJAWS_HQ.asp&charset=%28detect+automatically%29&doctype=Inline&group=0
">JAWS page</a>.
#27, Richard, Australia, 13 November 2007. Reply to this.
Totally agree with you Dave. This is what we have to put up with as web developers. Look what the blind have to put up with as users. Check out the contact page at http://www.freedomscientific.com/fs_dealers/Contact_Us_Form.asp
the makers of JAWS. Put a space after your email address and submit. NOTHING. You have to view the source code to find the error. Remove the space and then the form goes through. Now regardless of whether you're sighted or blind, what chance has a non-web developer have of managing to do that?
#28, Sucky Screen Reader, Australia, 13 November 2007. Reply to this.
I'm using NVDA with FireFox as i write this.
Reads about 98% of the stuff i come across well; alt/title tags, properly labeled fieldsets and form controls, as well as other properly labeled (and structured) markup go a very long way to letting me surf your site.
#29, Jason Bratcher, U.S.A., 21 June 2012. Reply to this.