Website Accessibility

Web pages can offer audio content, in one of two ways, or both on the same page: 1) directly and immediately, in the form of (annoying) background music that automatically starts playing when a browser opens the Web page, or 2) indirectly by request, in the form of links to audio files that can be played by the computer's default audio application, or streamed to the browser and played by whatever browser plugin supports the file's format, e.g., Adobe Flash.

But most Web content is visual, which naturally poses a problem to the visually impaired. Imagine that you wish to use the Internet, but you are completely blind or experience vision problems that make Web pages effectively unreadable to you. There are countless people born blind all over the world, as well as an even larger number of people slipping towards blindness every year as a result of aging of the lens, macular degeneration, cataracts, injury, and other health problems. Similarly, navigation of typical Web pages requires fine motor skills and hand-eye coordination that most young people can take for granted, but can be increasingly difficult for elderly people trying to use online services.

Fortunately, there are a variety of assistive technologies that are designed to make it much easier for these challenged individuals to be able to "read" Web page content, navigate from one page to another, fill in form fields requesting user input, and click on buttons and other page elements. For instance, JAWS (Job Access With Speech) is an application that reads the contents of the user's computer monitor and then reads it out loud to the user through the computer speakers, utilizing a speech synthesizer. This type of "screen reader" is ideal for completely blind web surfers. For people whose sight is impaired enough that prescription reading glasses are not sufficient, there exists a variety of hardware and software solutions to greatly enlarge text that would otherwise be too small to read.

The other component of Web interaction, user input, can be equally difficult for unsighted or otherwise handicapped Internet users. Again, the computer industry — as well as imaginative hackers — have created a number of helpful solutions. For instance, people who do not have the use of their hands — as a result of complete loss, or nerve damage, or repetitive stress injury — can utilize speech recognition software to dictate text and program commands to their computer. They can tab from one page element to the next, page up or down, and even specify small areas on the screen to click the mouse, by incrementally choosing one region on a grid, and then another much smaller region within that, etc. Speech-recognition programs, such as NaturallySpeaking, can be used by anyone for dictating text and drastically reducing keyboard entry (such as for writing computer articles!).

Barriers to Browsing

Given the wonderful variety of these assistive technologies, are all of the web pages and sites out there generally easy to read and navigate for impaired users? Sadly, no. In fact, even a full suite of the most sophisticated assistive programs and hardware are still not enough for making usable an inexcusably large number of websites — even some websites designed and maintained by companies with the resources to do much better.

To fully appreciate this, imagine that you are a blind person surfing the Web for information, and a search engine directs you to one of the many websites out there built entirely using Adobe Flash. The website designers probably chose Flash in order to present a more visually rich and impressive look. The website may be phenomenally beautiful to sighted visitors, but the designers have completely neglected visually challenged people, so to you the website is invisible and may as well not even exist.

Abandoning the frills-and-fluff Flash website, you try the next suggestion on the search engine's list of hits. Your sighted friends have informed you that this particular website seems to offer a wealth of the type of information you seek. Unfortunately, the design team that put together this website did not like the appearance of the textual content as rendered in HTML fonts, so they used images instead of plain text on the Web pages, because it gave them greater control over the attractiveness of the text. Because screen readers can see plain text, but not images, this second website is just as useless to you as the first one.

Having learned tremendous patience in a world that assumes flawless vision, you try the next suggested website, which initially seems much more promising than the first two, when your screen reader detects that the home page alone possesses plenty of text, which it starts reading to you: "… table… table row… table cell…" (or something similar, depending upon your screen reader and its settings). What is happening? The website designers unwisely used the obsolete practice of positioning elements on the page using HTML tables, which the screen reader must plow through just to get to the text. Yes, you have patience, but not an infinite amount!

The above examples can only give us an idea as to how frustrating it must be for people using adaptive technologies to try to browse and interact with poorly designed websites. Next I will consider how to avoid making these mistakes in creating our own personal and business websites.

A+ Accessibility

In order to craft your websites so that they are as accessible as possible to people with vision and motor-skills problems, there are a remarkably large number of techniques that you can employ. Yet I will focus on the key principles that will produce the greatest degree of accessibility without a prohibitive amount of effort. The number one rule to follow should be obvious from our examples above: Do not build a website entirely in Adobe Flash or other non-text multimedia technology. Or, if that is unavoidable for business reasons, at least provide a link to an equivalent all-text version of the website, and place that link at the beginning of the Web page, so screen readers will detect it as soon as possible, thereby giving your blind visitors a quick escape route.

Do not build a website entirely of images; or, if that is unavoidable, offer a text version as noted above. Alternatively, you can include all of the text from the images, in the page itself, but effectively make it invisible to sighted visitors by setting the text's location so that it is pushed off the screen, hiding it. A common technique is to use the CSS rule "text-indent" and set it to something like -9999px. As a result, all the text is still within the page's <body> tag, and thus captured by the screen reader, but does not show up on the visible page and obscure the images.

For the images that you do use on a page, add an "alt" attribute to each <img> tag, with a concise description of the image, so the blind visitor at least gets an idea as to what the image represents. Consider this example: The tag <img src="https://www.ross.ws/_writing/articles/Website%20Accessibility/cc.jpg" /> is useless to anyone using a screen reader, because there is no way to learn the image's contents without being able to see it. But <img src="https://www.ross.ws/_writing/articles/Website%20Accessibility/cc.jpg" alt="coupon code XYZ" /> could be quite valuable to and appreciated by the visitor, who will hear the "alt" value read to him. This is especially important for images used as navigation elements.

Even though website accessibility is maximized when all navigation links are text, the use of images can be demanded by some situations and clients. Again, be sure to provide "alt" attributes. But what if the image is not a single navigation link, but instead contains multiple "hotspots" where the visitor can click to go to a new page or perform some other action? These are usually referred to as "site maps", and consist of <area> tags nested inside of <map> tags. In these cases, use a client-side map instead of a server-side map, unless it is impossible to define the region using a standard geometric shape.

Another lesson learned from our examples above, is to never use nested tables for defining and positioning the regions of your Web pages. That is an unfortunate practice originating from the early era of website design, prior to CSS positioning. It was necessary then, but there is no excuse for it now. Instead, use <div> tags and CSS, which improve readability of the page, even for the Web programmer, and also reduce page size and thus bandwidth costs.

Avoid the use of frames, which are another lamentable holdover from the Web's formative years, when it seemed to most programmers to be the only way to avoid duplication of code, such as that used for navigation. There is no need or excuse for it now, given the availability and power of dynamic Web scripting languages on the server side (such as PHP), and AJAX on the client side.

Earlier it was noted that images should have accompanying descriptions. The same is true of all multimedia elements on the Web page, including audio files, video files, content requiring plugins, charts and graphs. All of these should be supplemented with text transcripts.

Hyperlinks (implemented using <a> tags) can have access key attributes associated with them, to make textual navigation even easier. The attribute name/value combination of accesskey="9" is a standard for contact links. You might use, for example, <a href="https://www.ross.ws/_writing/articles/Website%20Accessibility/contact.html" accesskey="9">Contact me</a>.

Accessibility improvements to websites are not limited to HTML tags and attributes. For all visitors except those fully blind, colors can have a huge impact on the readability of text, to say nothing of the overall attractiveness of the website. This is especially true for people with one form of color blindness or another, which is the case for approximately eight percent of all men and 0.5 percent of all women. By far the most common form is the difficulty or complete inability to distinguish between red and green. These people probably get quite exasperated at websites that use ugly color combinations, such as red text on a green background, or that color-code instructions, such as "Click the green button to continue." Avoid combinations of red and green, and purple and orange. Use colors that contrast well with one another. To test this last principle, take a screenshot of your Web page, and then convert it to grayscale or desaturate it. To test for poor color combinations, find one of the many accessibility websites that have tools to convert images so you can see what would they look like to your color blind visitors.

The accessibility best practices detailed above may be the most critical ones, but they certainly do not comprise a complete list. Even if you only have the resources to implement a subset of them, it is better than making no effort. This is particularly important for e-commerce websites, which live and die by how much traffic they pull in, and how many visitors they can convert to customers. From a commercial standpoint, you should make your websites as accessible as possible to the Internet's most influential blind visitors: search engines.