Implementing Basic Accessibility

Jordan Sandford - March 31, 2009

In my last post I discussed accessibility and the web and gave some good reasons why you should deliberately include disabled users as part of you target market.

As I’ve suggested previously, when you design your pages with accessibility in mind by using current web standards, you will go a long way toward enhancing the SEO quality of your pages as well. In addition, you also increase the flexibility of your HTML code to allow more complex and forward-thinking visual and interface design.

One important suggestion is to first design your pages and site as a whole without any styling applied, i.e. black text on a white background. To clarify, do not use any CSS, whether it’s inline or in it’s own file, but do use appropriate and current HTML tags in a semantic, consistent manner.

Don’t forget that you need to choose a DOCTYPE declaration and place it at the very beginning of the HTML document, before the tag. Make sure the HTML you use is supported by the DOCTYPE you plan to use. A good resource about DOCTYPE declarations is the A List Apart article, “Fix Your Site With the Right DOCTYPE!”

The reason I’m suggesting that you don’t use special styling or formatting at the beginning is so that you can make sure that the content on your page can be quickly glanced over and understood using only the formatting the browser supplies to the various tags (e.g. the h1 through h6, the ul, the a, the table and caption tags). With no special formatting applied, all the content will flow down the page, one section or tag after the other. This will ensure that assistive devices will have a much easier time understanding what you meant. Ask another person to identify the different sections of your page, such as the main and secondary navigation, header, side bars, main content and so on.

The next suggestion goes hand-in-hand with the previous suggestion: you need to be able to understand the content of all imagery on the page even after having turned off images. One easy way to turn off images is to download the Web Developer Toolbar add-on for Firefox via MoreVisibility’s Online Marketing Tools & Resources page. The Web Developer Toolbar also allows you to easily turn off all styling in a document.) For all images and/or media that is part of the content of the page, there should be a matching textual description. For regular images, you must at least use the “alt” attribute. Additionally, you can choose to use the “longdesc” and/or “title” attributes to help parlay the meaning of the imagery.

Consider using closed captioning on any videos. You can add closed captioning to the YouTube videos you want to embed in your pages. This does not take the place of a textual description in the HTML of the video, but adds to the interactivity, especially if the viewer is deaf or must play the video with no sound. The sentences in the closed captioning can be set to show during the appropriate time in the video, increasing receptivity and comprehension when compared to the entire script of the video being read before or after the video plays.

My last suggestion is that you validate your HTML using a validation engine, specifically the W3C validator. This will help to make sure that you are not using any obsolete or non-standard coding that might trip up assistive devices such as screen reader.

Please come back and read my next post in which I will give tips on adding accessibility to more complex pages.