I originally wrote this article back in October 2006 for my blog. Some of the information is a little old, but it still generally applies to web development.
Earlier this week, the National Federation of the Blind (NFB) filed a lawsuit against Target stating that their website is not accessible to the blind; that Target ‘discriminates against the visually impaired.’ In 2002, a lawsuit was also filed against Southwest Airlines stating that their online reservation system didn’t allow visually impaired customers to easy purchase tickets. Since then, Southwest Airlines has updated their system to make it easier for the blind to navigate their website.
On Wednesday, in my Human-Computer Interaction class, I got to see first hand how the visually impaired interact with websites such as Southwest.com and Target.com. Using a program called JAWS, a popular screen reading program developed by Freedom Scientific, a blind classmate demonstrated how he interacts with these websites. He first demonstrated how easily he navigates through Southwest Airlines’ reservation system, explaining what the JAWS program does and says along the way. Then he demonstrated Target’s online store, and explained why it is hard for him to navigate. You could really tell a difference between the two. But more on that later…
This brings up a good point… that all web developers need to start focusing more on making their websites accessible for the visually impaired. The good thing about this is that it is very easy to make a website accessible. All it takes is some proper planning during the design of the website, adding some attributes within the HTML tags during the development process, and a little more usability testing that focuses on accessibility.
The important thing to remember during development is that most of the time, to create an accessible website, all you need to do is add the ‘alt’ attribute to your ‘img’ tags, which should include a short description about what the image is. The ‘alt’ attribute is also important for people who have images turned off, which decreases page load time; instead of the image, they will see the text that is set in the ‘alt’ attribute.
Now back to the demonstration… If you take a look at the source code for Southwest.com, you can notice some things that allow screen readers to function as they should. First off, there is a very small 1 pixel by 1 pixel link at the top left of the web page. You can actually click on this link (the mouse pointer will change when you hover over it). This link that is an anchor to an area below the top navigation bar called ‘content’. This is called a ’skip navigation’ link, and is very useful if you want to, well, skip the top navigation. Next, all the links in the top navigation bar are images, and all the images have an ‘alt’ attribute. One thing that I noticed is that the ‘alt’ attribute for the ‘Special Offers’ link does not say ‘Special Offers’, but rather ‘Click ‘n Save’.
For the Target website, things change dramatically. Looking at the source code, they’ve done a good job at putting the ‘alt’ attribute in for the image links, but they are all empty! So what does this do to the screen reader? Not a whole lot. If the ‘alt’ attribute is blank/empty, it instead reads where the webpage is linked to. So, for example, instead of saying ‘My Account’, it says:
1 | /gp/myaccount/homepage.html/ref=nav2_ma/601-2006065-3512918 |
And it does this one-after-another for each link. When you listen to it, all you hear is a bunch of letters and numbers in a non-stop stream of useless information.
In an effort to keep websites accessible to the visually impaired, the W3C has Web Content Accessibility Guidelines, which describe what designers and developers should incorporate into their websites. Also, the government has a set of standards called the Section 508. There are also tools for checking to see if your web pages are accessible. These include WebXACT and the WAVE 3.5 Accessibility Tool.
0 Responses to “Web Accessibility for the Visually Impaired”