Demystifying Designing Web Sites to Meet Accessibility Standards
Part 4: Beyond the Basics
EASI
Dick Banks
Tables
Layout tables
While frowned upon by nearly all professional Webmasters and trained developers, it will be with us forever.
Data tables
Perhaps the most difficult to make accessible of the standard html markup
Layout Tables
Layout Tables (TOC)
Sitemap Creator
XML Echo Sitemaps.
http://sitemap.xmlecho.org/sitemap/index.echo
Sitemap Creator<br />http://sitemap.xmlecho.org/sitemap/index.echo<br />
Data Tables
Caption
Title for table (visable)
Summary
Abstract for table. A heads up for assistive technology (not visable)
Table headers
<th> for columns and rows
Data Table Example<br />Jim Thatcher - jimthatcher.com
Embedded audio of JAWS rendering the table
Data Table (code)<br />Jim Thatcher - jimthatcher.com
<caption><p>Oceana Airlines Dinner Service</p></caption>
<summary>"This table of Oceana Airlines dinner service lists the five dinner courses (column headings) for each class of service, Economy, Business, and First (row headings)" </summary>
Data Table (code)<br />Jim Thatcher - jimthatcher.com
<tr>
<th>Business</th>
<td>Shrimp Cocktail</td>
<td>Mixed Greens</td>
<td>Oceana Label Chardonnay or Merlot</td>
<td>Chicken Satay or Beef Tips</td>
<td>New York Style Cheesecake</td>
</tr>
PLEASE - NO NESTED TABLES
FFWDT - Tables<br />Information/Display Table information
Display Table Depth - will reveal nested tables
Tables<br />AIS Toolbar - Tables/Table Headers
Linearize if data table does not have headers
Accessible Forms
Input types
Buttons - Submit - Reset
Input type = textbox - textarea
Input type = radio button
Input type = checkbox
Input type = select
Accessible Forms
Associate Label Element with fields
In many cases the label element in forms is all you need to help the user of assistive technologies.
The more complex the form the more you need in the code to be understood by assistive technologies
Forms - Prompting in Text Field
<input type="text" size="40" value="Email Address" />
<input type="text" size="40" value="First and Last Name" />
Can you give me a potential problem with this method?
The Label Element
<label>Name: <input type="text" name="n" size="50" /> </label> with older assistive technologies can be problematic.
<label for="n">Name:</label> <input type="text" name="n" id="n" size="20" /> Using the ID attribute with the same value as the label for attribute is the safest way.
Forms:<br />Radio buttons and Checkboxed
The text of the input element should be to the RIGHT of the element. For text entry fields the text should be to the left.
Forms:<br />Select Menus
<form method="get" action="dummy"> <select NAME="ship_to_state" size="1"> <br /><option SELECTED VALUE="">State/Province </option> <br /><option VALUE="International">Click here for International </option> <option VALUE="AL">Alabama </option> <br /><option VALUE="AK">Alaska </option> <br /><option VALUE="AB">Alberta </option> <br /><option VALUE="AS">American Samoa </option>
Toolbars and Forms
Wrapping Things Up!
Images
Color contrast
Navigation
Tables
Forms
Links
Cascading Stylesheets