You are currently viewing a snapshot of www.mozilla.org taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to www.mozilla.org, please file a bug.

Skip to main content

You are here: Access project page > Accessibility Information for Web Authors

Access Mozilla

Maintained by Mozilla Accessibility Community.

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. WebXACT™ from Watchfire® Corporation

    WebXACT™ is a free online service that lets you test single pages of web content for quality, accessibility and privacy issues. Its automated accessibility checker for web pages will output accessibility errors and warnings for a given webpage URL. The web author can choose from the "Advanced / Accessibility Options" form the guidelines (as a basis for errors and warnings) to be used by WebXACT when checking the webpage. The list of guidelines to choose from are: Section 508, WCAG Level A, WCAG Level AA, WCAG Level AAA. Other advanced options (like scanning for broken links) are also possible. The accessibility report will contain errors and warnings for "Automatic Checkpoints" and "Manual Checkpoints"; detailed and useful information (line numbers, instances/occurences, textual references to guidelines) will be included for web authors.

  2. 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. Just like WebXACT, it can also 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.

  3. Accessibility Valet from WebThing

    Description and summary to be written.

  4. WAVE 3.0 (Web Accessibility Versatile Evaluator) from WebAIM and sponsored by Temple University Institute on Disabilities

    WAVE 3.0 is another powerful, mature, 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. The submission form offers an impressive amount of configurability and flexibility in the areas and aspects of webpages to check. For example,

    • Guideline (Standard) to use when checking documents: Section 508 and WCAG 1, 2 and 3
    • The "Document Mode" offers to choose which elements of the original page to display from a set of 11 types of element: e.g. images, tables, stylesheets, applets, etc.
    • Other WAVE features (9 others) include: e.g. linearized reading order, borders on <div> tags, borders on all tables, etc.

    You can install WAVE in your bookmarks toolbar for further convenience: visit a webpage and then just click the WAVE icon in your toolbar to start verifying accessibility of that webpage. You can also add a WAVE bookmarklet to your browser.

  5. 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. 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.

  6. 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% of the male population 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.

Purpose Newsgroup Mailing list Google group
Developer discussion mozilla.dev.accessibility subscribe/unsubscribe Google group
End user support mozilla.support.accessibility subscribe/unsubscribe Google group