When it comes to ADA (American Disabilities Act) Accessibility, there are a lot of things that designers, and those with websites, should be doing to ensure that there pages are accessible as possible to all. Of the many aspects, the degree of contrast between the type (font color) and the page background, whether the pages use tables for the layout, and the type of code that is used to render the pages are of primary importance. For this post, I am going to talk about some of the tags (code that renders the page) that should be used, which commonly are not.
Most websites have a form or two, and while designers will use the id tag, few include a tabindex. This allows one to tab to each field in succession. As you will see in the following example, tabindex=”1″ is followed by tabindex=”2″ and so on.
<form action=”” method=”post” name=”DataCollection” id=”DataCollection”>
<fieldset>
<label for=”name”>
Name <input name=”name” type=”text” id=”name” tabindex=”1″ />
</label>
<label for=”company”>
Company <input name=”company” type=”text” id=”company” tabindex=”2″ />
</label>
<label for=”email”>
Email <input name=”email” type=”text” id=”email” tabindex=”3″ />
</label>
<label for=”telno”>
Telephone <input name=”telno” type=”text” id=”telno” tabindex=”4″ />
</label>
<input name=”Submit” type=”submit” tabindex=”5″ value=”Submit” />
</fieldset>
</form>
Another common omission with web pages is the use the abbreviation and acronym tags. This is very helpful to someone using an audio reader. See the following example:
<abbr title=”Michigan”>MI</abbr>
<acronym title=”Website Content Accessibility Guidelines”>W C A G</acronym>
By now, most designers are familiar with “ALT” and “TITLE” tags. These provide a mouse-over description for images (ALT) and text links (TITLE). But the problem is that few use this properly, and most fail to use the longer description option. To be clear, and ALT tag should feature an overview of what the image contains, more than “image of dogs”. Ideally this tag should provide a clear sense of what the image contains, such as “playful dogs on a beach catching Frisbees”. The general consensus is that an ALT tag shouldn’t contain more than 64 characters. But in case you’re wondering Google allows approximately 16 words 7 to 8 characters in length (about twice the number for acceptable ADA guidelines), beyond this they aren’t read. So in those cases where you want a long description a “D” link or “longdesc” tag are to be used.
“D” Link Example: Here we have a map image with a good ALT tag, and a good TITLE tag for the link. The “D” is provided so as to load an additional page “Over65Description.html” to provide additional information about what the map provides.
<p><img src=”../Images/Over65E.jpg” width=”350″ height=”231″ alt=”Percent of U.S. population over 65 from 1900 to 2050″></img><a href=”Over65Description.html” title=”Detailed description of increase in people over 65″>D</a></p>
Long Desc Example: This next exmple provides the same, yet the description is hidden unless one uses an audio reader.
<p><img src=”../Images/Over65E.jpg” width=”350″ height=”231″ alt=”Percent of U.S. population over 65 from 1900 to 2050″ longdesc=”Over65Description.html” title=”Detailed description of increase in people over 65″></img></p>
Accessible Tables can be one of the most challenging aspects of design. First and foremost, tables are not to be used in a layout. In case you are asking why, well, because an audio reader will read a table from top left to right, next row, left to right, next row, left to right … and so on. Tables in a design will break text blocks, and generally make it impossible to navigate a page effectively.
The solution of course is to convert tables in the layout to DIV tags, and here you can again have a columnar format, images adjacent to text blocks, etc. As for tables, there are effective uses for them, specifically the inclusion of tabular data. So assuming you have a need for tables, then you will need to ensure that the proper provisions are in place for accessibility.
First and foremost, it is important to include a “summary” tag so you can provide additional information about its content. The Summary tag is supported by JAWS 4.0 and above.
Here is a table for a Site Map,
<table width=”80%” summary=”This site map has seven columns that reflect the main content categories of the site. The first row corresponds to categories and the following nine rows contain subpages. Tabs have been set to read down columns. Each cell contains a link.”>
<table width=”80%”>
<caption align=”top”>Map of Accessibility Website</caption>
<tr>
<th id=”category1″>How To</th>
<th id=”category2″>Formats</th>
</tr>
Scope:
<caption>IBM Home Page Reader Keyboard Shortcuts</caption>
<tr>
<th scope=”col”>Action</th>
<th scope=”col”>Keystroke</th>
<th scope=”col”>Comments</th>
</tr>
<tr>
<td>Play</td>
<td>Space bar</td>
<td> </td>
</tr>
Complex Tables:
<thead>
<tr>
<th colspan=”6″ id=”dir”>Northbound</th>
</tr>
<tr><th id=”intersection1″>Sixth & Congress</th>
<th id=”intersection1″>Eleventh & Congress</th>
<th id=”intersection1″>Twelfth & Lavaca</th>
<th id=”intersection1″>Fifteenth & Lavaca</th>
<th id=”intersection1″>Martin Luther King & Lavaca</th>
<th id=”intersection1″>Twenty-fourth & Guadalupe</th>
</tr>
<tbody>
<tr>
<td headers=”dir intersection1″>10:33am</td>
<td headers=”dir intersection1″>10:36am</td>
<td headers=”dir intersection1″>10:42am</td>
<td headers=”dir intersection1″>10:45am</td>
<td headers=”dir intersection1″>10:50am</td>
<td headers=”dir intersection1″>10:55am</td>
</tr>
</tbody>
This example is taken from “Maximum Accessibility” by Dr. John Slatin and Sharron Rush, Pearson Educational.
Headers (T H) are contained within the Table element and, along with the ID tag, provide assistive technology with references to column and row labels.
<thead>
<tr>
<th id=”category1″>Tutorial</th>
<th id=”category2″>Formats</th>
<th id=”category3″>Tags</th>
<th id=”category4″>Tools</th>
<th id=”category5″>Resources</th>
<th id=”category6″>Questions</th>
<th id=”category7″>About Site</th>
</tr>
</thead>
<tbody>
<tr>
<td headers=”category1″>Intro</td>
<td headers=”category2″>Stylesheets</td>
<td headers=”category3″>ABBR</td>
<td headers=”category4″>Captioning</td>
<td headers=”category5″>Books</td>
<td headers=”category6″>What</td>
<td headers=”category7″>Purpose</td>
</tr>
</tbody>
The Heading element, shown as “h1, h2, h3, and so forth” identifies the hierarchy of sections of a web page. It assists scanning for sighted users and provides context to visually impaired persons though triggering responses from assistive technology.
Code Example:
<h1>Tags</h1>
<h2>Heading</h2>
<p>The Heading element, shown as “h1, h2, h3, and so forth” identifies the hierarchy of sections of a web page. It assists scanning for sighted users and provides context to visually impaired persons though triggering responses from assistive technology.</p>
<h3>Browsers</h3>
Tabindex:
The Tabindex tag is used to provide browsers and assistive technology with the proper sequence for tabbing through a document. Tabbing takes you from active element to active element (like links and form controls). It is particularly useful when a website does not linearlize naturally (for example when graphics with links are scattered throughout a page).
Code Example:
<td>
<p><a href=”Abbr.html” tabindex=”12″>A B B R</a></p>
<p><a href=”Accesskey.html” tabindex=”13″>Accesskey</a></p>
<p><a href=”Acronym.html” tabindex=”14″ >Acronym</a></p>
<p><a href=”Alt.html” tabindex=”15″>Alt</a></p>
<p><a href=”Caption.html” tabindex=”16″ >Caption</a></p>
<p><a href=”FieldSet.html” tabindex=”17″ >Fieldset</a></p>
</td>
