What are the rules and how do you check for compliance.
By Libby Peters - June 2004
Vision and Goals
The agency Mission statement is: “To protect children and promote adult self-sufficiency.” The agency Vision statement is: “Partnering to connect Kansans with supports and services to improve lives.”ADA Guidelines
The w3c (World Wide Web Consortium) Web Accessibility Initiative (WAI) has become the keeper/promoter/educator of the ADA Guidelines for web page accessibility. The Department of Justice, Civil Rights Division is the monitoring/enforcing agency. Any companies/entities that receive public funding are required to make public information that is posted on the www accessible to persons with disabilities. Links: Dept of Justice http://www.usdoj.gov/crt/ada/websites2.htm WAI Guidelines http://www.w3.org/TR/WCAG10/Section 508 Requirements
The Rehabilitation Act of 1998, Section 508; Electronic and Information Technology Accessibility Standards The Department of Education and the Department of Justice, Access Board, General Services Administration are the monitoring/enforcing agencies. Any agencies/entities that receive federal education funds are required to comply with Section 508 in addition to ADA Guidelines. Links – Section 508 Part 1194
The basic concept is to make the information and/or information gathering process so that a person with a disability can view/access it. If pages are mainly text based html then very little modification may be needed. As pages become more complex with graphics, forms, interactivity, and tables the task becomes more complex.
As stated above, if pages are basically text then less work needs to be done to make the pages ADA compliant. Not to advocate for pages that lack any formatting or graphics or any interactivity; there is a line between good clean design and very busy pages with scrolling, blinking, flashing, pop-ups, marquees, etc. I have been designing websites for 8 years, and in all of the information I have read and classes I have taken one very important, solid rule of good web design stands out. That is to keep it simple (KISS). Keep your content well organized and easy to read or print. Following is a list of elements in html pages that need special treatment when making pages that are accessible:
More examples of how to code for accessibility can be found at http://www.newwebcreative.comGraphics and Charts
In deciding to what degree you need to enhance the web page coding for graphics you need to keep in mind what the graphic represents. An image bullet that repeats over and over on a page does not need captions, long descriptions, and alt tags. However a chart with the details of SRS expenditures by program for a fiscal year will need all of those features including a linked description (text) file. (See priority xxxx of the State Accessibility Guidelines for description and examples.)Audio and Video
The rule for other media is, if you are going to provide the information you must provide the content in a text format that can be read by screen readers or people with hearing impairments. You can make a simple formatted html file of the contents or just a plain .txt file. (See priority xxxx of the State Accessibility Guidelines for description and examples.)Abbreviations and Acronyms
When you use these you must spell out the abbreviation or acronym the first time it appears on a page followed by the acronym and you must add the abbr and title tags. The reason for this is that screen readers will try to read the abbreviation or acronym as a word which can cause confusion on the part of the user. By using the tags the reader will read the full title each time it encounters the named id. example: <p>This is my abbreviation for <abbr id="srs" title="Kansas Department of Social and Rehabilitation Services">Kansas SRS</abbr></p> You can also space out the letters (eg S R S instead of SRS) so that the screen readers will read the acronym as you would read it if you are sighted. (See priority xxxx of the State Accessibility Guidelines for description and examples.)With future browser full implementation of CSS2, web developers will be able to use the aural styles to solve some of the coding issues around these two elements.
Tables
This is an area where quite a bit of work can be required if you are using tables for displaying data. The important thing to remember is that persons with disabilities may not be able to see the columns and rows so they have to rely on what the screen reader reads to provide them with the information. So there are several special attributes and tags to use to assist the reader in reading table data so that it makes sense. They can be grouped into the following areas:• Table General
• Table Header
• Table Body
• Table FooterIf you are using a table just for formatting you do not need to add much in the way of descriptions, etc. (This practice is not entirely embraced by the various web accessibility initiatives, however for broken and non-css browsers it may be the only way that you can offer an acceptable looking web page for those users.) The only thing that can be useful is a table summary which states that the purpose of the table is for formatting. If a table is being used to display data you need to add a descriptive summary (ie. “table containing SRS expenditure data for Fiscal Year 2004”) and in some cases, a caption. The table header is typically the first row that has the column “headings”/titles in them. For a sighted person it is no problem to see the heading and then go down the rows visually to relate the information to the proper heading. Adding the correct html tags will allow a screen reader to read the table contents in a way that will associate the headings with the table rows. The tags that are used in the header row are: THEAD to identify the start and end of the table head section. Caption – to give the table a caption row (optional), TH to identify the individual cells of the header row, ID (attribute of TH) to give each column title a unique name that can be read by a screen reader. You do not have to use a THEAD section if you only have simple column headings, you can just use the TH tags inside of your header row (TR). If, however, you use a THEAD section you must use a TBODY tag to indicate the start of the table body rows.
The table body are the rows and cells that contain the content. The tags that are used in the table body are: TBODY to identify the start and end of the table body section, TD to identify the individual cells of the header row, HEADERS (attribute of TD) to tie the cell contents to a particular table header ID.
The table footer are the rows and cells at the end of the table that contain things such as copyright, revised date, etc. The tag used to identify the footer section is: TFOOT. You cannot use TFOOT unless you have used the THEAD and TBODY tags, otherwise your footer information can just be placed in the last row of your table.
An untagged table with columns of data will read that it is a table with x rows and y columns and then proceed to read the cell contents in order from left to right, top to bottom. example of un-tagged table
A properly tagged table will read the table summary, number of rows and columns, the table headers, and then will read the cell information associated with the proper headers. example of tagged tableForms
Forms present one of the biggest challenges as far as making them accessible/usable for persons with disabilities. There is a lot of work that needs to be done as far as additional tags, unfortunately, there is not a lot of good documentation on how to make those changes. The w3c guidelines are not very specific and even some of the more popular software packages that add accessibility features don't go to the level that will give optimum usability. When working on the online application project the development/test team by using a JAWS screen reader discovered what tags worked the best and gave the best result. The following summary is a combination of what is in the w3c guidelines and the best practices we have learned.
Forms Mode
This is not a published requirement it is however a best practice. When a screen reader is reading a page and encounters a form it does not give the user any information. By adding tags and text you can notify the user that they are in a form and give them an opportunity to turn on the form entry mode on.
<p><label for= "Paragraph1">Screen reader users: Please put "forms mode" on.</label> <br> <select name="Paragraph1" id="Paragraph1" class="body" tabindex="5">
<option value="0" id="0" selected label="0">Put forms mode on here. </option></select> .Tab Index and Access Keys - WAI Checkpoints 9.4 and 9.5
Device-independent access means that the user may interact with the user agent or document with a preferred input (or output) device -- mouse, keyboard, voice, head wand, or other. If user interaction is required you must provide alternate ways to navigate without using the mouse. Tab Index lets you set the tab order for your input fields so that a viewer can tab thru the fields. Access Keys lets you set for the input fields a keyboard shortcut.
<form name="form1" method="post" action=""> <label for="FirstName">First Name</label> <input type="text" name="FirstName" accesskey="a" tabindex="5" id="FirstName"> <br> <label for="LastName">Last Name</label> <input type="text" name="LastName" accesskey="b" tabindex="10" id="LastName"><br><p> <label for="address">Address</label> <input type="text" name="address" accesskey="c" tabindex="15" id="address"></form>Label and label for. - WAI Guidelines, Checkpoint 10.
For text boxes and select boxes use the label tag and the for attribute to name the object and use the id property to identify that the item belongs to that label. The label must proceed the entry/select box, or encapsulate it. Following is an example of a select box: <label for="myselect">How many frogs do you have?</label>
<select name="myselect" tabindex="10" id="myselect”>
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>Radio Buttons
For multiple choice radio buttons you can create a radio button group. To do this you give the group a NAME and wrap that name property into the LABEL tag. Then you specify the different values for that object name. Each option must have it's own label for the readers to read the choices correctly. Following is an example:
<label> <input type="radio" name="myradiobuttons" value="yes"> Yes</label> <br> <label> <input type="radio" name="myradiobuttons" value="no"> No</label>
There are some basic things that web developers can do to check their pages/sites for accessibility. These are: