Building a website is not very difficult, but building one that is accessible to everyone can be quite a challenge. You see, not everyone shares the same browsing environment. In addition to a wide variety of visual browsers (Internet Explorer, Netscape, Opera, etc.) on several platforms (Windows, Macintosh, Linux etc.), there are text-only browsers, aural text readers, portable Palm Pilots and probably a lot more devices I haven’t mentioned. Will your site work well on all of them?

The Web is all about information (content), and that needs to be separated from visual layout (presentation) so that the content can be accessible to everyone. After all, what good is a fancy website to a visually impaired person, if his speech synthesizer can’t get past the cluttered markup to read what’s on the pages?

I have gathered a few bits of information on this subject, which I have detailed below. Believe me, there is a lot more!

Keep Markup Clean

  1. Separate presentation from content. Use a style sheet to define colors, fonts, and if possible, layout. Be sure your site is written in valid HTML so every browser can process it properly. Check it at the W3C Validation Service to be sure, and check your style sheet at their CSS Validator too.
  2. Make sure your site is still user-friendly, even if style sheets aren’t supported, and if you use JavaScript, be use to include a noscript element to replace any functionality lost if the script fails (especially if it’s used for navigation!). The same holds true for Flash, applets or whatever other technology you may use on your pages.
  3. Keep files reasonably small, and keep pages free of clutter, as a common sense measure, and for the benefit of those with slow Internet connections.

Make Links Usable

  1. The title attribute can be used on links too, if the text inside the link doesn’t already describe the link’s target clearly enough.
  2. If you have a lot of navigation links, provide a link to skip over them. You can mark up the skip link with class="hidden" and in your style sheet, you can specify .hidden {display: none;}—this will hide it from visual browsers.
  3. Separate links by more than whitespace. Use the vertical bar | as a separator, or another character, to prevent the links from running into each other on text-only browsers. If you have a list of links, mark it up as a list with the ul and li elements.
  4. Too many navigation links can ruin a site for all of us. Keep them to what’s really useful, and organize them so that they follow a logical sequence. Provide a site map or a table of contents (as I have done on this site).
  5. Make sure that all link phrases make sense when read out of context (that precludes the use of “click here”).

Describe Images

For each image file on your site, there needs to be an alt attribute which briefly describes what’s in the image. A title attribute may be used if you need something longer. If the image is purely decorative, use the alt (it’s required to validate), but leave it empty.

Use Color Carefully

  1. If you use color to convey information, make sure the information is also presented in another way. For example, if you use color to indicate links, underline them as well, or make them bold, or both.
  2. Use contrasting background and text colors so that your pages are easy to read, even for someone who is color blind. How many times have you seen red text on a blue background? Yuck.

Mark Up Your Text

  1. Be sure your text is large enough for someone with poor eyesight to read, or at least that it can be resized.
  2. Be sure your text is marked up so that aural text readers (speech synthesizers) will know how to read it. Use em and strong to indicate emphasis and stronger emphasis; they will render as italic or bold text in visual browsers. Only use i and b if needed for visual presentation.
  3. Use the cite element when referring to another document or source to support an argument or help explain what is being said. The dfn element is used to mark up the defining instance of a term (such as Heaven and Hell on The Way to Eternal Life, in a Nutshell). Both of these will normally display as italicized text.
  4. Mark up acronyms and abbreviations with the acronym and abbr elements. Include a title attribute if necessary, to describe what the acronym or abbreviation means.
  5. Mark up long quotes with the blockquote element, and shorter in-line quotes with quotation marks. The Web Content Accessibility Guidelines say to use the q element, but browser support for the q element is sadly lacking, so I don’t use it. Mark Pilgrim, in his August 14, 2002 weblog entry, indicated that he no longer uses the q element either.
  6. If you use technical code in your text (such as HTML presented as content), be sure to mark it up with the code element, as I have done on this page. Sample output from programs, scripts, etc. should be marked up with samp. The kbd element (for keyboard) denotes text to be entered by the user (don’t forget to enter the <kbd>.html</kbd> at the end of the URL).
  7. Mark up the language in use with the lang or xml:lang attributes in the html element at the top of the document. Speech synthesizers should then know what language they are speaking. If you use a foreign word or phrase in a page, mark it up with <span lang="fr"> (if it’s French) or whatever language it is.

Make Forms Accessible

  1. If there are logical groupings of form controls, mark them up with the fieldset and legend elements.
  2. Be sure that all form controls are labeled with the label element, and that all of the labels are properly placed.
  3. Form controls must not require the use of a mouse; use onkeypress along with onclick, or whatever applies.
  4. Provide a default selection or placeholder text in form fields, so every device will have something to focus on.
  5. Provide access keys to form fields, to act as keyboard shortcuts.

Report Accessibility Features

Provide an accessibility statement which describes the access features used on your site, and how to use them. Find ours at the Accessibility link on the navigation bar of each page.

Check Your Pages

Check your pages with the Cynthia Says tester to ensure accessibility. Be sure to do the manual checks too!

Other Resources (far more complete)