7. Standards and Accessibility

Marcia Minear contributed significantly to this lesson.

Adhering to web standards in your design work leads not only to faster loading pages, but also helps those in the disabled community who rely on assistive technologies when surfing sites and conducting research on the Internet. Many organizations, particularly those doing business with federal or state governments, are required by law to make their electronic information resources accessible to as many people as possible. By following a few simple design principles, your sites can comply with these laws as well.

Who Benefits?

Because people with disabilities represent a significant portion of the population, it is important that your websites comply with Section 508 rules for accessibility. In a nutshell, the reasons for adhering to accessibility guidelines are many:

It will increase your visibility on the Web
It will deepen your understanding of design
It will enhance the usability of your site
It is good business
It is the right thing to do
It is the law

Those with significant visual impairments often use screen reader programs that convert the electronic text of web pages into audible sounds that, if pages are designed correctly, provide both content and structural information about the page. Perhaps the most widely used screen reader application is Freedom Scientific's JAWS, which not only provides access to web pages, but is also capable of reading the Windows interface and many other applications.

Below are audio samples of JAWS reading two separate web pages. In the first, JAWS is reading the old ISU homepage design at a fairly slow speed so sighted persons can get a sense of what information the program processes. Open the link above, then click the Play button on the QuickTime audio file below to follow along with the reading.

The second example is a talk-aloud protocol from a usability study in which a volunteer from the National Federation of the Blind of Iowa used JAWS to evaluate accessibility of a prototype web project here on campus (sorry, but the prototype is no longer available for viewing).

If you're like me, you're probably astounded by the speed at which a practiced JAWS user can read web pages. You're also probably intimidated by the technical challenge of accommodating the needs of non-visual readers like these. But relax. If you adhere to open development standards, it doesn't take too much effort to maximize the accessibility of your websites. You can start by following the tips below.

The ALT Attribute

The alt attribute used as a descriptor in image tags and other HTML elements is key to providing additional information that hidden from sighted readers, but picked up by screen readers like JAWS. As a general rule, the alt attribute value should be a brief description of the image, with usage following these guidelines:

The value of the alt attribute should convey the same information that visual readers see. A vague description such as "company logo" doesn't communicate the name of the company or other important information.
Images used for navigation should include their purpose in the alt value, such as "next page button." You should also include information within the title attribute of the <a href> tag surrounding the image:
```
<a href="week7.html" title="Go to Week 7 Lesson">

<img src="rightbutton.gif" alt="to next page" width="20" height="20" border="0">

</a>
```
If a site uses image maps for navigation, you should include alt attributes within each of the <area> tags within the image map (we'll be tackling image maps later in the semester).
If images are non-essential or used for spacing, you should include an empty alt attribute, <alt=“”>.
If a particular image requires a lengthy description or explanation, you might consider using the longdesc attribute, which links to a separate HTML file of unlimited text length.
```
<img src="aadams.jpg" longdesc="aadams.html" alt="Ansel Adam's Moonrise, Hernandez, New Mexico">
```
In addition to images, other non-textual items placed on an HTML page should use the alt attribute or other methods to describe content to screen readers such as JAWS.

Typography

If you've been following all of the suggestions regarding typography in CSS, then you don't really need to worry too much about accessibility. CSS generally calls for designers to use structural HTML elements like <h1> and <h2> to reflect the structure of documents, as well as using em as the unit of measurement. Using structural elements helps screen readers "see" the parts of the document quickly, while using em as the typographic unit helps preserve overall page design when readers increase the base type size within their browser.

Data Tables

Instead, CSS is recommended for page positioning, with tables reserved solely for actual tabular information, such as our class calendar. For these types of tables, you should try to follow the guidelines below to ensure greater compatibility with screen readers:

Avoid nested tables
Use <th>, <thead>, <tbody>, <caption>, and other specialized table tags to direct screen reader attention.
Use the scope attribute to designate whether <th> cells apply to columns or rows.
Make sure the content of your table makes sense when linearized.
For tables with complicated structures, use the id attribute on all header cells and use the headers attribute on data cells to indicate heading information that applies to each cell (see table link below for more information).

Layout Tables

As a general rule, most accessibility guidelines recommend that you avoid using HTML tables for layout. However, these same guidelines realize that HTML tables will be used for many years to come, and so they offer these tips for ensuring compliance with screen readers:

Use the summary attribute to alert screen readers that the table is used for layout:

<table summary="This table is for layout only. The left-hand column contains the navigation bar and the right hand column contains the main text for the page">
Use only basic and unadorned coding, i.e. <table>, <tr>, and <td>. Do not use <th>, <thead>, <tbody>, <caption>. These attributes only make sense when providing structure to data tables. Avoid the use of the title attribute in layout tables - both in the table tag and the td tags - as this will cause unnecessary tool tips to popup.

The WAVE online tool is good for checking in which order table cells are read by screen readers.

Accessible Design Checklist

The items listed below are only a small subsection of items you should include in your accessibility checklist. For greater detail, consult this Section 508 checklist from WebAIM.

Validate XHTML code to ensure it is written correctly
Include alt attributes for every non-textual items on the page, except those for pure ornamentation.
Images used for navigation should use alt attribute to describe function of image.
User <h1>, <h2>, <h3> tags to show structure of your document.
Think about the order in which you have arranged information on the page.
Make layout tables read in linear order; for data tables, include headers to group column data together.
When using forms, be sure to use label attribute to link action to user key.
If you can, include disabled users in usability testing.

Accessibility Resources

Iowa State's accessibility web site - an excellent collection of lessons on how to use web standards to increase your pages' accessibility.
WebAIM - a great site outlining various aspects of accessible design.
Accessible Tables - a great explanation of how to make data and layout tables accessible.
W3C's Web Accessibility Initiative - a general portal for all design and standards issues involving accessible site design.
Federal Government Section 508 page - a site hosted by the General Services Administration to promote accessible design as stipulated by Section 508 of the amended Rehabilitation Act.
Accessibility of Fahrner Image Replacement - an empirical investigation of how well CSS replacement of HTML elements with image text are read by screen readers.