5.7. Web Accessibility Techniques Official guidelines and checkpoints are vital, but they don't give us much in the way of best practice advice or implementation techniques. To help you, the W3C provides reference documents with overviews of HTML, CSS, and core techniques at www.w3.org/WAI/intro/wcag.php. Here are some good starting points that will help you make your web sites more accessible.
Start with meaning. In other words, use HTML elements for the purposes for which they were designed: to provide a semantic description of a document's content. As discussed in the guidelines earlier in this chapter, make use of headings (h1 through h6), lists, quotes, and blockquotes to provide structure to your pages. Use table markup appropriately as shown in Chapter 13. Screen readers and other software infer meaning and provide functionality based on this markup.
Provide alternatives. Ensure that you provide some type of alternative--alt text, longdesc, transcripts for audio files, and captions for videofor users with various disabilities. Formerly cost prohibitive, captioning and transcripting can now be outsourced at a very reasonable cost and provide significant benefit to users that require alternative media types.
Use Zoom layouts. Typically used by low-vision users, a Zoom layout is an alternative view of the same content. Users of screen magnification software have a limited view of what is on the screen, making multiple columns difficult to follow. A single-column format can be very useful. For more information on Zoom layouts, Joe Clark's web site (www.joeclark.org/access/webaccess/zoom/to) is an excellent starting point.
Remember that order counts. Ensuring a logical order within a page and the components within the page makes your life simpler and can be very beneficial to users of screen readers and Zoom layouts. A screen reader or aural browser tends to read things in the order of the source (although there are exceptions). Ensure that a logical order applies not only to the entire page, but also to components of the page, such as groups of links or form fields.
Make your forms explicit. Although various pieces of assistive technology can make guesses as to which form fields go with which labels, you're better off making the relationship explicit than relying on a guess. Best practice for forms also includes using fieldset and legend to group related form controls. If nothing else, use the label element for every form control. For more information, see Chapter 15. Where it is undesirable to have the label visible on the screen, either hide the label from the visible screen using CSS positioning, or use the title attribute instead to provide a prompt text for the form control.
Test JavaScript extensively. When using JavaScript in your pages, you should test with JavaScript support both on and off to ensure greatest interoperability. Do not let this fool you into thinking that if the page works under both of these conditions that you are finished, however. Remember that screen reader users are likely using Internet Explorer with scripting on. The interaction between what happens with the scripts and the screen reader might surprise you; testing with real people using screen readers is a must if you are doing any serious scripting in your pages or applications.
Facilitate users moving around the page. This includes all users, but it is particularly useful for visually impaired and mobility impaired people who rely on keyboard navigation. Providing "in-page" links to various parts of the page has become a best practice. This includes a "skip to main content" link or "skip to navigation" link, depending on whether you present content or navigation first in the source order of your page. A skip-to-main content link can be visible on the page to everyone: <a href="#content">Skip to main content</a>
visible only to screen readers through CSS positioning: <a style="position: absolute; left: -999em; " href="#content">Skip to main content</a>
or visible only to screen readers through using an image-based alt text: <a href="#content"><img src="/books/4/439/1/html/2/1x1.gif" alt="Skip to main content" /></a>
Each of these techniques has its advantages and disadvantages. The most accessible and useful is when the link is available to all users and not just focused on screen readers.
Allow text to scale. Despite the fact that pixels are a relative unit, specifying text in your CSS using pixel units means that users of Internet Explorer for Windows (Versions 6 and earlier) will not be able to scale their text without what amounts to an intervention. Specifying text sizes in em or % units allows text to scale in IE for Windows as well as other modern browsers and is considered to be current best practice.
Make use of the focus state for links. When a keyboard user navigates a page's links via a browser's built-in mechanism, we can provide visual feedback to show the user which link is currently selected or has the focus. This makes the web page easier to use. This is typically seen in menu bars that add in a CSS hover effect for mouse users: a:link { color: #000; background-color: #fff; } a:hover { color: #fff; background-color: #000; }
To provide the same feedback for keyboard users, add the code: a:focus { color: #fff; background-color: #000; }
 | Although the :focus technique works for links in modern standards-compliant browsers, Internet Explorer for Windows doesn't recognize the :focus pseudoclass selector. Instead, you must use the :active pseudoclass to provide the same visual feedback: |
|
a:active { color: #fff; background -color: #000; }
Handle colors intelligently. Declare your colors in pairs and to do so only in CSS. If you are specifying a background color in the CSS and a foreground color in the HTML, there is room for conflict if style sheets are off, not supported, or overridden by the end user. In addition, when you declare your background and foreground colors in CSS, be sure that there is a reasonable contrast between them. (See the color contrast analyzers available at JuicyStudio for more: http://juicystudio.com/services/colourcontrast.php.)
Use CSS background images carefully. Creative techniques for using background images in CSS help provide for accessibility as they allow us to use text for buttons, tabs, and other places formerly the province of graphics. This provides for scaling of text and doesn't require alt text. There is one catch: if the image contains content, do not use it as a background image, as there is no means to specify alternative text for background images as there is for images placed inline with the img element. The exceptions are various image replacement techniques, whose usefulness is often debated. When using a CSS background image, be sure to specify a background-color as well, to ensure that there is enough contrast between the foreground text and the background while images are off, or do not load. |
