XML Reference Guide

Once upon a time, web browsers were simple. A little text, a little formatting, a picture here and there, that was pretty much it. Some browsers, in fact, didn't even have that much. Lynx, for example, was (and is) a text-only browser, but viewing web pages in it wasn't usually a problem, because any enhancements offered by the browser, such as paragraphs, bold, or italics, either came through in the text-only version, or were not crucial for understanding the content.

But time goes on, and eventually browsers offered more advanced features, such as audio, video, scripting, and especially the ability to directly position content on the page. All that was great, but what about text-only users, like those using Lynx?

Well, to be blunt, many designers -- maybe even most -- simply didn't care if their beautifully presented content was usable in a text-only environment. "What is Lynx, like, 0.1% of the market?"

There's just one problem with that attitude: some users have only a text-based option for using the web. Some users are on a cell phone or other limited device. Some are blind. The advantage of a text-based environment is that it can be understood and read aloud by "assistive technology" such as screen-reader software.

And it's not just the blind you need to think about. If you provide audio that's crucial to your site, what are you doing for the hearing-impaired? Do you provide an alternate text track?

Too much trouble, you say?

Well, while there's plenty of reason to take care of it from a moral perspective, there's also a legal reason. Web sites have, in some court cases, been ruled publicly accessible facilities, and as such, in the United States you're required to make sure that they're accessible to those with disabilities. Kind of like a wheelchair ramp for your web site. In fact, if your site is built by or used by employees of the United States federal government, you're legally required to provide options for disabled users by Section 508 of the United States Federal Rehabilitation Act.

Fortunately, the process doesn't have to be complicated. The Information Technology Industry Council has developed the Voluntary Product Accessibility Template, or VPAT, which provides an easy way for you (and for users) to determine whether your site complies with various best practices. This template covers the following:

1. A text equivalent for every non-text element shall be provided (e.g., via " alt " , " longdesc " , or in element content): Most designers are aware of the alt attribute for images, and some even use it. But most people use it to simply indentify the object, with a description such as Logo or Illudium Pew 36 Explosive Space Modulator. That's better than nothing, certainly, but provides limited information for those using assistive technology. What they really need is a replacement for the item. Instead, use the longdesc attribute, as in:

   <img src="pew36.gif" alt="Illudium Pew 36 Explosive Space Modulator"
   longdesc="Photo of the Illudium Pew 36 Explosive Space Modulator, 
   a long orange cannon pointed at the planet Earth."/>

   The important thing to note here is that this requirement applies to all not-ntextual items crucial for undrstanding the page, including sound and video, applets, and scripts.
2. Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation: If you have multimedia content that includes multiple text blocks -- such as subtitles to replace audio content -- it must be timed to match the multimedia elements to which it applies.
3. Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup: It's common these days to remove the underlines from text links, but if you do, you need to provide another way for users to know it's a link, such as bolding the text. Color alone won't do it, because the color-blind user won't be able to tell what's going on. Similarly, don't just provide a form and say "items listed in red are required". Use an asterisk or some other cue.
4. Documents shall be organized so they are readable without requiring an associated style sheet: When cascading style sheets came on the scene, they were designed for "graceful degradation", which meant that if the browser couldn't understand the style sheet, the content was still readable. These days, however, as more page authors use style sheets to position their content, or to change the appearance of elements such as links and headers, it's becoming increasingly common to find pages that are unreadable in their raw form. Don't do this.
5. Redundant text links shall be provided for each active region of a server-side image map: Server-side image maps, in which the user clicks an image and the server figures out what region was clicked to provide a response, are not nearly as common as they used to be, but if you use them, be sure to provide an additional set of text-only links. It won't look as nice, but it'll actually be usable.
6. Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape: If you must use an image map, try to use one that's evaluated by the browser, and not the server. The browser enables you to set alternate text for each region, which assistive technology can read. In order to do that, however, you need to be able to describe the clickable region using fairly rudimentary geometric shapes, so you still have the option of using server-side image maps if necessary. Just make sure to comply with the rule above.
7. Row and column headers shall be identified for data tables: Most people add column headers to their tables in order to make them understandable, but most also leave out row headers. A person reading the page via an assistive device, however, has to have a way to understand he or she is on a new row, and what the row represents. See the next rule for an example.
8. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers: Consider this example, from the Web Accessibility Initiative:

      <TABLE border="1" 
             summary="This table charts the number of
                      cups of coffee consumed by each senator,  
                      the type of coffee (decaf or regular),
                      and whether taken with sugar.">
        <CAPTION>Cups of coffee consumed by each senator</CAPTION>
        <TR>   
            <TH id="header1">Name</TH>
            <TH id="header2">Cups</TH>     
            <TH id="header3" abbr="Type">Type of  Coffee</TH>   
            <TH id="header4">Sugar?</TH>
   
        <TR>  
            <TD headers="header1">T. Sexton</TD>  
            <TD headers="header2">10</TD>
            <TD headers="header3">Espresso</TD>
            <TD headers="header4">No</TD>  
        <TR>  
            <TD headers="header1">J. Dinnen</TD> 
            <TD headers="header2">5</TD>
   
            <TD headers="header3">Decaf</TD>
           <TD headers="header4">Yes</TD>
     </TABLE>

   Notice that the headers get created at the top of each column, then referenced for each cell.
9. Frames shall be titled with text that facilitates frame identification and navigation: When creating a frameset, each individual frame must have a title attribute, as in:

   <frameset cols="20%, 80%">
      <frame src="navigation.html" title="Navigation Panel" />
      <frame src="content.html" title="Content Panel" />
   
      <noframes>
         <a href="noframes.html">Click here for the non-frames version of this content.</a>
      </noframes>
   </frameset>
   

10. Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.: Flickering, such as a flashing banner ad, in the range of 2 Hz to 55 Hz, has been known to cause seizures in seizure-prone individuals.
11. A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.: When all else fails, you can always create a text-only version of your site. What's often overlooked, however, is the process of keeping the text version in sync with the "normal" version. This is one time when dynamically generated content, such as that coming from a database, can be handy. This way, when the information changes, both versions are automatically updated.
12. When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by Assistive Technology: If you're creating sections of your page that are only shown based on a script -- for instance, a help pop-up that only appears if you roll the mouse over the question mark -- you must also have the text available without the script, even if it's only visible to assistive technology applications.
13. When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with 1194.21(a) through (l): Your first assumption is probably that this rule is referring back to the rest of this list, but that's not actually the case. The ITIC has put together a number of VPATs. This list, "Web-based Internet information and applications", is actually section 1194.22, and not 1194.21. In fact, 1194.21 is "Software Applications and Operating Systems", which applies to the computer's operating system and various applications. For more information, check out the full list.
14. When electronic forms are designed to be completed on-line, the form shall allow people using Assistive Technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues: Users should be able to easily navigate through the form using only the keyboard. For example, tabbing through the form fields should happen in a logical manner, and should not jump all over the page. Also, labels should be explicitly associated with their elements, as in:

    <form action="http://www.nicholaschase.com/myform.php" action="get" >
       <label for="username">Username: </label>
    
       <input id="username" name="username" type="text">
       ...
    </form>
    
    

15. A method shall be provided that permits users to skip repetitive navigation links: Typical pages are often arranged with the list of navigational elements on the left, which puts them at the top of the page when you look at the source. Unfortunately, that can be a problem with screenreaders, which must read out all of these links even though they may have little to do with the actual content. To solve the problem, include a link that users can use to skip down to the content.
16. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required: Before timing out or moving on, give the user warning, such as a pop-up window that asks whether the user needs more time.