Home | Assignments | Personal Info
This is not a very technical paper. The World Wide Web Consortium is still drafting the technical assistance portions of the new guidelines, so real nuts and bolts coding examples are not yet available. If a website is designed for accessibility from the start, the coding will be much easier than trying to recode for accessibility later, particularly when trying to make sure all the necessary labeling is done. Many of the guidelines, such as consistency of page layout, sufficient contrast between background and foreground elements, having a variety of navigation methods, etc., are just plain good design principles for all users, not just those with special needs.
An Introduction to the Components of Accessible Web Sites
by Lise Waring
Building an accessible website forces a website developer to consider methods to make a site accessible to persons with a variety of limitations; visual problems, deafness, color-blindness, slow mobility with the hands, etc. In addition, a developer must also consider the variety of browser and screen reader software available, and build a site that is software-neutral.
Website accessibility has become a particular concern for governmental websites, as more and more government services are being provided through websites. The Texas Department of Information Resources (DIR) has passed administrative rules requiring that all Texas state agency websites must be accessible1. In addition, state agencies that receive Federal funds under the Technology Related Assistance for Individuals with Disabilities Act of 1988 are required by that Act to comply with Section 508 of the federal Workforce Investment Act, which sets standards for accessibility. The Workforce Investment Act required the Architectural and Transportation Barriers Compliance Board (better known as the Access Board) to develop standards for accessibility. DIR has proposed new rules which effectively require all agencies to comply with the Section 508 standards2.
The Section 508 standards were effective June 21, 2001. Subsection 1194.22 defines the Web-based intranet and internet information and applications. These are:
- 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.
- 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 this part, 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 Subsection 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.
- 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.
The World Wide Web Consortium(www.w3.org)[Consortium] developed guidelines and technical suggestions for web-site accessibility. Version 1.0 consisted of 14 guidelines with subguidelines dealing with various aspects of accessibility. These guidelines are divided into priority levels. Priority 1 items must be addressed for a web site to be considered accessible, levels 2 and 3 should be addressed to expand the accessibility of the website. The Consortium is in the middle of developing version 2.0 of the Guidelines. This draft defines four principles of accessibility 3:
- Content must be perceivable to each user.
- User interface components in the content must be operable by each user.
- Content and controls must be understandable to each user.
- Content must be robust enough to work with current and future technologies.
These principles are supported by twelve general guidelines. For each guideline, the overview of Version 2.0 provides a glossary, an explanation of the intent of the guideline, the definitions of success at meeting the guideline, and the benefits to users for meeting the guideline, descriptions of successful examples, and links to additional resources. Suggestions for coders to consider when meeting these principles include:4
- When designing forms that use a color to mark the required fields, also use an asterisk to mark the required fields. Include text at the beginning of the form to indicate that this is how the fields are marked. That way, if a screen reader does not identify the text as colored, it will read the asterisk. In addition, if the user is colorblind, the user can see which boxes are the required fields.
- Use alt descriptions on images used as submit buttons or img elements that are used as links.
- Make sure tables of data are formatted as tables, not just columns of text. If the screen reader sees the table as a table, it can handle the data. If the text is simply placed in the column, the screen reader will read all the text straight across each row.
- Use patterns as well as colors on pie charts. The patterns may be visible even if the color differences are not.
- Be consistent in the placement and formatting of the various page elements within a site. This makes the pages more predictable and easier to navigate through.
- Do not reference items by shape or location, unless the item also has another identifier. The button on the right hand side may not be visible as such. Press the submit button to continue with an alt=submit button for the image of the button is a better choice.
- Allow background audio to be turned off by the user.
- All functions such as buttons can be accessed through a keyboard if possible.
- All time limits for functions can be adjusted by users (except for things like auctions or tests which depend on real time.) If, for security reasons, the server will time out as a form is being completed, the data should be saved until the user can sign back in, and the user will not have to re-enter all the information.
- Moving content (such as animation) can be paused and restarted by the user.
- Provide two different ways for users to navigate the site (i.e., table of contents, search engine, site map, list of links, etc.) so that users can choose between navigation methods based on their need or preferences. A corollary to this is that each page in a website should be titled, and each frame on the page should also be titled to speed up navigation.
- Provide links back to the main page and subsection pages so that users can return easily, and also tell where they are in the hierarchy of pages.
- Provide language to describe the content at a link before the link so that a user can decide if they want to follow the link.
- If users are using tabs to move from one field of a form to another, make sure the progression is logical. The user may not be able to see the entire screen.
- If the user makes an input error, identify the error in text (whether the input is missing or outside the accepted range or format.) Do not use color only to mark the fields.
- For applications that cause legal transactions (purchases, filing tax returns, etc.), provide the ability to review the transaction in full before confirmation. Also provide explanatory text as necessary to assist users as they fill out the form.
- Identify the primary natural language for the page, and the direction of the script if it is not left-to-right. If there are passages or uncommon phrases in a foreign language in the content, identify the natural language of the passage.
- Provide links to definitions of idioms, jargon, and terms used in an unusual way if they are not clear from the context.
- Keep the reading level of the text to no more than 8th-grade level if possible. If it is not possible, provide supplemental content to clarify the text.
- Validate the code for all pages.
- If the user interfaces are not accessible, provide an alternate version, such as a text-only version of the site.
- Warn users if content violates flash thresholds (general or red), and provide a way to navigate around it.
It is a good idea to check the Consortium website (www.w3.org) regularly for updates in this area. As of March 2006, formal coding examples using html and css to support Version 2.0 have not been posted.
1Texas Administrative Code Chapter 206
2PL 105-220, 1998 HR 1385 PL 105-220, enacted on August 7, 1998, 112 Stat 936 codified as: Section 504 of the Rehabilitation Act, 29 U.S.C. Subsection 794d
3
http://www.3.org/TR/WCAG20/intro.html
4http://www.w3.org/TR/2005/WD-UNDERSTANDING-WCAG20-20051123/Overview.html