Information on ADA Compliance or Section 508 Compliance
Accessibility standards are checklists of things that must/should be done to Web pages. These include using formatting that allows software interpreters to process the html without confusion, such as proper use of table headers and table data tags. They also include things like requiring alternate text to go along with audio and visual content.
There are two major standards for accessibility compliance. The first is WCAG (Web Content Accessibility Guidelines). It is maintained by the same group that defines the html standards. The official WCAG site looks like:
The second is the U.S. Government guidelines. If you meet these guidelines, your site is said to be Section 508 compliant. A good Web site for the Section 508 guidelines is:
http://www.access-board.gov/sec508/guide/1194.22.htm
The WCAG standard has a bit more jargon associated with it. They break their checklists into different levels, Priority 1-3. Compliance said to be A, AA, or AAA, where A means that all Priority 1 items are done, AA means that all Priority 1 and 2 items are done, and AAA means that all items are done.
All items in the Section 508 guidelines appear in the WCAG checklists, but is an odd mix of some (but not all) Priority 1 items and some Priority 2 and 3 items. That means that a page that is WCAG AAA compliant is also Section 508 compliant, but a page the is Section 508 compliant is not WCAG compliant at any level.
Validating Compliance
Instead of going through the checklists manually, the easiest way to check a page for compliance is to use a validator. There are online, such as Bobby…
http://bobby.watchfire.com/bobby/html/en/index.jsp
… where you enter the URL of your page, choose your desired compliance standard, and get a report about your page. There are other tools available, some which run on windows and some which run on UNIX.
Windows:http://www.chami.com/html-kit
UNIX: http://tidy.sourceforge.net
Go tohttp://downloads-zdnet.com.com
Survox is currently working to develop tools to help you use these validators to make sure your surveys are compliant.
Section 508 Checklist
- A text equivalent for every non-text element shall be provided (e.g., via “alt”,”longdesc”, or in element content).
- Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
- Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
- Documents shall be organized so they are readable without requiring an associated style sheet.
- Redundant text links shall be provided for each active region of a server-side image map.
- 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.
- Row and column headers shall be identified for data tables.
- 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.
How can HTML tables be made readable with assistive technology?
Using the “Scope” Attribute in Tables – Using the “scope” attribute is one of the most effective ways of making HTML compliant with these requirements. It is also the simplest method to implement. The scope attribute also works with some (but not all) assistive technology in tables that use “colspan” or “rowspan” attributes in table header or data cells.
Using the Scope Attribute – The first row of each table should include column headings. Typically, these column headings are inserted in <TH> tags, although <TD> tags can also be used. These tags at the top of each column should include the following attribute:
scope=”col”
By doing this simple step, the text in that cell becomes associated with every cell in that column. Unlike using other approaches (notably “id” and “headers”) there is no need to include special attributes in each cell of the table. Similarly, the first column of every table should include information identifying information about each row in the table. Each of the cells in that first column are created by either <TH> or <TD> tags. Include the following attribute in these cells:
scope=”row”
By simply adding this attribute, the text in that cell becomes associated with every cell in that row.
Example of source code:
The following simple table summarizes the work schedule of three employees and demonstrates these principles.
<table><tr><th> </th><th scope="col" >Spring</th><th scope="col" >Summer</th><th scope="col" >Autumn</th><th scope="col" >Winter</th></tr><tr><td scope="row" >Betty</td><td>9-5</td><td>10-6</td><td>8-4</td><td>7-3</td></tr><tr><td scope="row" >Wilma</td><td>10-6</td><td>10-6</td><td>9-5</td><td>9-5</td></tr><tr><td scope="row" >Fred</td><td>10-6</td><td>10-6</td><td>10-6</td><td>10-6</td></tr></table>
Betty 9-5 10-6 8-4 7-3
Wilma 10-6 10-6 9-5 9-5
Fred 10-6 10-6 10-6 10-6
The efficiency of using the scope attribute becomes more apparent in much larger tables. For instance, if an agency used a table with 20 rows and 20 columns, there would be 400 data cells in the table. To make this table comply with this provision without using the scope attribute would require special coding in all 400 data cells, plus the 40 header and row cells. By contrast, using the scope attribute would only require special attributes in the 40 header and row cells.
Frames shall be titled with text that facilitates frame identification and navigation.
Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
A text-only page, with equivalent information or functionality, shall be provided to make a Web site comply with the provisions of these standards, 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 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.
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).
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.
While the relationship between the titles “First Name” or “Last Name” and their respective input boxes may be obvious from visual inspection, the relationship is not obvious to a screen reader. Instead, a screen reader may simply announce “input box” when encountering each input box. The reason for these difficulties is revealed from inspecting the HTML source for this table. The following code is a simplified version of this table.
<FORM><TABLE><TR><TD><B>FIRST NAME: </B></TD><TD><INPUT TYPE="TEXT" NAME="FIRSTNAME"> </TD></TR><TR><TD><B>LAST NAME: </B></TD><TD><INPUT TYPE="TEXT" NAME="LASTNAME"> </TD></TR></TABLE> <P></FORM>
Use the “ID” Attribute in the Associated Form Element. Every form element supports the “ID” attribute. By setting this attribute to the identifier used in the “FOR” attribute of the associated <LABEL> tag, you “tie” that form element to its associated label. For instance, we have rewritten the HTML code for our simple form-inside-a-table to include explicit labels below. The new HTML code for the explicit labels is indicated in bold:
<FORM><TABLE><TR><TD><B><LABEL FOR="first"> FIRST NAME:</LABEL> </B></TD><TD><INPUT TYPE="TEXT" NAME="FIRSTNAME" ID="first" ></TD></TR><TR><TD><B><LABEL FOR="last"> LAST NAME:</LABEL> </B></TD><TD><INPUT TYPE="TEXT" NAME="LASTNAME" ID="last" ></TD></TR></TABLE></FORM>
A method shall be provided that permits users to skip repetitive navigation links.
When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
Survox and labels
WebSurvent and webCATI automatically output a label and an ID for each question. For variable and text questions, the label is placed on around the question text and the id is equal to the question label. For field type questions, the label is placed around the response text and the ID for each response is the question label and the response code. For numeric questions, the two methods are combined. The question text is surrounded by a label and the id is placed on the input tag for the numeric entry. Additionally, if there are exception codes a label is placed around the text of each exception code and the ID for the input is the question label and the code.
To turn off automatic generation of labels, use:
{ -!html_labeltags }
This can be done for the entire spec or it can be turned off as needed.
<label for="EMAIL2">Email address previously.</label><INPUT TYPE="text" NAME="var_EMAIL2" id="EMAIL2" SIZE="70" maxlength="70" VALUE="">
S2a. Do you think that demonstration surveys are entertaining?<INPUT TYPE="radio" NAME="catr_S2A" id="S2A_1" VALUE="1"><label for="S2A_1">Yes</label><INPUT TYPE="radio" NAME="catr_S2A" id="S2A_2" VALUE="2"><label for="S2A_2">No</label><INPUT TYPE="radio" NAME="catr_S2A" id="S2A_3" VALUE="3"><label for="S2A_3">Don't know</label>
Numeric questions
<label for="S2C">S2c. How many years have you been programming CFMC software?</label><INPUT TYPE="text" NAME="num_S2C" id="S2C" VALUE="" SIZE="2" maxlength="2"><INPUT TYPE="checkbox" NAME="rnum_S2C" id="S2C_DK" VALUE="DK"><label for="S2C_DK">Don't Know</label><INPUT TYPE="checkbox" NAME="rnum_S2C" id="S2C_LT" VALUE="LT"><label for="S2C_LT">Less than one year</label><label for="S2C">