Accessibility Information for Web Authors

Guidelines and Regulations

1. Section 508 Guidelines for web authors

   These guidelines must be followed by U.S. websites. Other organizations such as schools are starting to follow these guidelines as well.

2. Web Content Accessibility Guidelines (WCAG) 1.0

   Another important set of guidelines from the W3C Web Accessibility Initiative (WAI). The European Union is looking to base their upcoming accessibility regulations on these guidelines. These guidelines are discussed on the WAI interest group discussion list.

How-to's

1. Key-navigable custom DHTML widgets in Mozilla & IE

   This document discusses how to use tabindex, element.focus() and onkeypress to make custom DHTML widgets such as menus or tree views keyboard accessible.

2. Accessible Web Page Authoring

   IBM has put together a simple, practical resource for web authors to learn accessibility the fast and painless way. Highly recommended, an excellent resource.

3. Dive Into Accessibility by Mark Pilgrim

   An excellent, easy-to-understand resource (available in English and in 9 other languages) on accessible website authoring, which goes into greater depth. In 30 days, you will know why your website should be accessible and how to make it more accessible.

Automated Checking & Repair

1. Cynthia says™ from HiSoftware® Company

   "Cynthia says™" is a free online webpage accessibility validation service that is designed to identify errors in webpage related to Section 508 standards and/or the WCAG guidelines. It can perform a "Complete Webpage Quality Check" for accessibility, privacy, searchability, metadata and even alt text attribute quality. The web author chooses the guidelines (as a basis for errors and warnings) to be used by "Cynthia says™": Section 508, WCAG Priorities 1, 2 and 3. The output data report is displayed in a clear and well structured table where each and all checkpoints are identified and described (along with an helpful clickable link to the related reference guideline) into logical groups and according to measurable results: passed, warning, failed for automated verification, warning for manual verification, not selected, not available, not related, etc.

2. Accessibility Valet from WebThing

   Description and summary to be written.

3. WAVE 4.0 beta (Web Accessibility Versatile Evaluator) from WebAIM and sponsored by Temple University Institute on Disabilities

   WAVE 4.0 beta is another powerful, free online webpage accessibility validation service that identifies accessibility errors and reports accessibility warnings about webpage related to Section 508 standards and/or the WCAG guidelines. Its purpose is to aid humans in the web accessibility evaluation process. Rather than providing a complex technical report, WAVE 4.0 shows the original web page with embedded icons and indicators that reveal the accessibility information within your page. You can get accessibity report for errors, warnings. You can view the structure and order view of the document. You can see a text-only view and and outline view of the document.

   You can install a custom WAVE toolbar in Firefox for a quick, easy and convenient evaluation of web pages directly within Firefox. You can also add a WAVE bookmarklet in Firefox or even WAVE direct links for checking a webpage.

4. HTML advanced validator (Firefox extension) by Marc Gueury

   This HTML Validator (based on W3C Tidy and on OpenSP for SGML validation) is a powerful, versatile, extended HTML validator. It's free. It works off-line and that is a major advantage over other accessibility checkers. No document upload needed and no additional application to launch; everything is accessible within the Firefox browser.

   This HTML advanced validator Firefox extension is very resourceful and highly customizable. It's an extension add-on to Firefox 2.x and Firefox 3.x. It not only checks and reports possible markup errors and warnings (based on W3C Tidy and/or based on true SGML validation) but it can also report accessibility errors and warnings according to selectable accessibility guidelines (Section 508, WCAG Priorities 1, 2 or 3). Its accessibility report is viewable in the View Source window (View > Source code Ctrl+U or right-click on the status bar). Two panes are added at the bottom of the view source code window: the left pane contains the errors and warnings (with their correspondent line number) and the right pane identifies the checkpoint along with an example and a clickable link to the reference/guideline. Just wonderful!

   The HTML advanced validator may also be downloaded from Firefox Add-ons: HTML Validator.

5. Color contrast analyzer by Juicy Studio

   "Contrast is the perceived difference between two adjacent colors. (...) Contrast is extremely important in Web design."

   Wheel of Color: Pump up the Contrast, Robert Hess, MSDN

   "For this year's list of worst design mistakes, (...) I asked readers of my newsletter to nominate the usability problems they found the most irritating. (...) about one-third complained about low contrast between text and background."

   Top Ten Web Design Mistakes of 2005: 1. Legibility Problems

   How can a web author establish easily and quickly if the background color and foreground (text) color in use in his webpages have sufficient color contrast difference and sufficient color brightness difference? Color contrast analyzer is an excellent tool for such task. Effective color contrast and effective color brightness difference have a decisive importance for reading, furthermore for people with partial color deficiency (see the excellent examples in Effective Color Contrast by Lighthouse International). A study has established that about 8 percent of all men have some form of color deficiency. Color contrast analyzer algorithm is based on the formula provided in Techniques For Accessibility Evaluation And Repair Tools from W3C.

   The Juicy Studio CSS analyzer will also analyze and report the color contrast and color brightness differences involved in your stylesheets.

The Future: Accessible DHTML

DHTML Accessibility Roadmap: a peek into how DHTML will be made accessible in the future. This document gives a plan which is being developed by IBM, Mozilla and WAI Protocols and Formats Working Group (PFWG) to address the issue of Accessible DHTML.

Dynamic web content is not accessible, because it uses vanilla <div>'s and <span>'s combined with Javascript rather than declarative markup to describe the behavior of custom widgets such as menus and tree views. These widgets are usually not even keyboard focusable. Furthermore, assistive technologies do not understand what these widgets are supposed to be, or what state they are in or what they are capable of.

This document tackles such difficulties and shows several interactive desktop-style widgets such as tree views, menu bars and spreadsheets which are accessible both with the keyboard and assistive technologies such as screen readers, screen magnifiers and alternative input devices.

Join the Mozilla Accessibility Community

Live Chat

Both end users and developers are invited for discussion on the live IRC channel at irc.mozilla.org/#accessibility. Since this is a worldwide effort, there is always a good chance to find someone to chat with there, day or night.

Newsgroup and Mailing List

We have two discussion lists, which can be read via a newsgroup reader, as a mailing list or via Google groups.