Tools to Help Develop Accessible Web Pages

Contents

• Overview of Accessibility Tools
• Screen Reader Keystroke Guides for Accessibility Testing
• Online Accessibility Checkers
• Stand-Alone Accessibility Checkers
• Online HTML and CSS Validators
• Effective Free Tools

Overview of Accessibility Tools

Varieties of Accessibility Checkers

Traditional accessibility reporting tools, such as Watchfire's WebXACT and HiSoftware's checker (which used to be referred to universally as "Cynthia Says") parse your web page and flag anything in violation of an accessibility standard (Section 508 of the U.S. Rehabilitation Act or the W3C's WCAG 1.0). These checkers are good for getting a basic sense of where a web page fails to meet the "letter of the law" (or "guideline").

In contrast, services such as WebAIM's WAVE and iCITA's FAE can indicate much more. These second-generation accessibility checkers attempt to analyze the structure and flow of pages and look for things like whether form controls are labeled properly, whether pages linearize well, whether document titles reference words in page headings, and whether JavaScript automation allows for keyboard navigability—aspects of web design that specifically address web page usability as it effects users with disabilities.

Spidering Accessibility Checkers

Automated spidering tools can help with initial analysis. Running a battery of tests against a web page can be a painstaking, time-consuming task. To help ease the burden, there are there are a few relatively inexpensive automated checkers that will spider all of the web pages in your web site. We mention the most well-known one, Bobby, and a potential contender, CSE HTML Validator Pro, below. There is well implemented, free, stand-alone spidering checker, TAW. It is also discussed below. Finally, there is the second-generation, free, online service called FAE, from the Illinois Center for Instructional Technology Accessibility (iCITA). All of these tools will spider your web site, returning reports on each page. (Note that there are "enterprise-level" quality and accessibility checkers available. They are usually installed on a server and set up to spider one or more domains. Because these tools are well outside the budget ranges of typical developers, we have not considered them here.)

Automated Checks Beyond Mere Accessibilty Compliance

Passing an accessibility checker means only that you are in compliance with a regulation or your code meets criteria which a "dumb" machine parsing a page can catch. Even second-generation checkers are limited in what they are able to report. Though a good first step, it is important to keep in mind that passing an accessibility checker does not mean your pages are accessible.

Beyond mere compliance lie myriad other assessments, only a small portion of which can be automated. One thing tools can do fairly well is validate code syntax against a standard and perform basic page quality checks. Though screen readers and web browsers can be fairly forgiving in how they voice or display poorly coded pages, assistive technologies and web browsers are more likely to perform optimally when accessing pages containing valid CSS and HTML. Validating your code should be part of your accessibility regimen. Additionally, having high-quality web pages—with working hyperlinks, images with height and width attributes present, good ALT text, and correct spelling—improves usability for both able and disabled users.

The mostly widely used and trustworthy method for validating HTML and CSS is to submit your pages to the W3C validators. WebXACT and HiSoftware online tools and the Bobby stand-alone tool produce page quality assessments that are of some value. CSE HTML Validator produces accessibility and quality reports and validates HTML and CSS in one go.

An additional, quick solution for single page checking is UITest.com. This service will take a URL and hand back a bunch of links from which you can run the page through a whole host of free, online usability and accessibility tests, including W3C validators, WAVE, WebXACT, Cynthia Says, and Wickline's Colorblind Web Page Filter. Very handy and time efficient.

Again, though automated checks can help, there is no magic bullet—there is no single tool that will point out all potential problems. Ultimately, usability testing and manual review with assistive technologies are essential in determining accessibility.

Screen Reader Keystroke Guides for Accessibility Testing

We strongly recommend usability testing and manual review of pages with assistive technologies. Screen readers allow blind and low-vision users to navigate web pages. A screen reader reads aloud the textual content of a web pages. For sighted users, running a screen reader over a web page can be an enlightening experience. However, it takes practice and knowledge to be able to move through a web page with a screen reader. Navigation keystrokes are often non-intuitive and it is not always obvious which configuration options will bring out accessibility problems.

To help with accessibility testing, we have developed keystroke guides to make it easier for developers to figure out how to use screen readers. The guides are not intended for screen reader users. They are aimed at sighted developers who have limited or no experience with screen readers.

Our guides are implemented as a mind map, viewable online via a Flash interface. The guides cover usage of JAWS and IBM Home Page Reader, the two screen readers most commonly used at OSU. (See our screen reader overview for more information on JAWS and IBM Home Page Reader.) We will be adding HTML versions of the keystroke guides soon.

• Screen reader keystroke guides for accessibilty testing (Flash mind map version)

If you have never seen what it is like to use a screen reader, Neal Ewers of the Trace Research Center at the Division of Information Technology at the University of Wisconsin-Madison demonstrates using a screen reader with the web (requires QuickTime plugin). Ewers also gives advice for how web pages can be made more screen reader friendly.

Online Accessibility Checkers

WebXACT online accessibility report from Watchfire

Detailed, single-page reports validated against WCAG and Section 508, also analyzes for possible quality and privacy issues.

HiSoftware online checker (AKA Cynthia Says)

Does a nice SEO and privacy check, as well as allowing the user to select between levels of WCAG or Section 508. Simple table-based layout for report prints nicely.

WAVE 3.0 and 3.5 from WebAIM

One of the WAC's favorites because it keeps the look of the page and marks it up with error and compliance icons. This allows users to visualize problems on the page. WAVE also is nice for visually checking linearization/read order of a page. Version 3.5 of this tool is under development but is available from the main WAVE page. WAVE 3.5 has some major improvements, among them it displays the structural, layout, and semantic elements on the page and displays a page summary at the top of the page.

Functional Accessibility Evaluator (FAE)

This online service from the Illinois Center for Instructional Technology Accessibility (iCITA) has a couple of advantages over other online, free services. FAE is the only online, free service to spider a web site. You can have the tool analyze pages up to three link-levels deep. The other clear advantage to FAE lies in the sorts of reports it produces. It analyzes the effectiveness of the structure of your pages—does the H1 heading text match page title text? are headings properly nested? do tables appear to linearize properly? does navigation appear to be in unordered or ordered lists? and do the links in navigation use title attributes? It also flags potential problems with device independence that might arise from use of JavaScript and notes proper separation of content and presentation in stylesheets. Note that this service is under active development and there may be some quirks and incomplete features.

TAW Web Accessibility Test

TAW bears some resemblance to WAVE, though it does not provide the structural visualization and compliance information of WAVE. TAW marks up the page with error tags. You can click any error tag and it will take you to an explanation at the bottom of the page. The explanations include source code line numbers (not included in a WAVE report). The report also has a summary at the top of the page. Every caught violation includes an excerpt from WCAG (TAW doesn't consider Section 508—it was developed in Spain). Though not as innovative as FAE or WAVE, the visual markup improves on the laundry-list-of-errors style of WebXACT and Cynthia Says.

Stand-Alone Accessibility Checkers

TAW Web Accessibility Test

A Java program that will spider an entire web site and produce a summary report with links to visually marked-up, page-level reports. The WAC has encountered some difficulties in spidering very large sites with TAW. The program seems to hang if the spidering run is more than around 2000 pages. The limitation may have to do with memory usage in the JVM. But this annoyance is outweighed by the cost of the program—it's free—and the fact that it produces highly readable HTML page-level reports that (potentially) can be saved for later review.

CSE HTML Validator

Checks HTML and CSS syntax, spelling errors, and links, in addition to producing an accessibility report. Batch processing in the professional version of the program allows for a web site to be spidered. The professional version of CSE HTML Validator costs $129, with steep discounts for multiple copies.

Bobby from Watchfire

Stand-alone accessibility parser and reporting tool. Bobby is Watchfire's improved, expanded in functionality, commercial reinvention of the tool originally developed by the Center for Applied Special Technology (CAST). Bobby costs $299. Earlier versions of Bobby—before it was developed by Watchfire—produced reports as web pages. Removing this feature, Watchfire has ensured that anyone who wants to view a Bobby report must have the product installed locally.

STEP 508 from Section 508.gov

Ingests a Bobby (or other accessibility tool) report and spits out a simple to read site summary in HTML format, ranking the original report by the number of errors per page. Note that STEP508 only flags Federal 508 violations. Free.

A-Prompt

Works on local web pages in batch fashion, not a spidering client. A-Prompt presents the user with a list of files within a directory of her choosing and then enables the developer to correct potential accessibility problems via wizards. The application is a bit dated (circa 2001) and clunky, but it may prove somewhat useful, especially to beginning developers. Free.

Online HTML and CSS Validators

The World Wide Web Consortium's Markup Validation Service

Valid HTML helps ensure user agents of all sorts, including screen readers, are better able to move through your web page the way you intended.

The World Wide Web Consortium's CSS Validation Service

Valid CSS helps ensure pages display the way you intended.

Juicy Studio CSS Analyzer

In addition to checking the validity of your stylesheet, Gez Lemon's service checks to see if you are using relative rather than absolute units of measurement for fonts and other elements within your CSS. It also will attempt to determine if specified foreground and background colors have enough contrast.

Effective Free Tools

Accessibility Color Wheel

Giacomo Mazzocato's interactive color wheel allows you to choose foreground and background colors and renders out those choices as they would be seen by people with the three most common forms of "red-green" color blindness. The color wheel also tells you when you have acceptable foreground-background contrast. Deuteranomaly is the most common form of color blindness, affecting 5% of men.

Wickline's Color Blind Web Page filter

Online service filters for all varieties of color blindness. Renders out the page as a person with color blindness would see it.

Juicy Studio color contrast analyser and the Paciello Group's Contrast Analyzer 2.0

Improper color contrast can limit access for users with low vision. Color contrast analyzers use algorithms suggested by the W3C to determine if background and foreground colors contrast sufficiently. Gez Lemon's Juicy Studio online color contrast analyzer is okay in a pinch, but it cannot analyze images. The Paciello Group's Contrast Analyzer is an update of Jun and Steve Faulkner's original Windows application. The new version runs on Mac, as well, and includes an alternate W3C algorithm that tests luminosity (contrast ratio) and has a pop-out window allowing you a lens through which you can view images or any window as they would be seen by someone with the various forms of color blindness or cataracts. Note that the Mac version currently (as of September 2007) lacks the pop-out window filter.

Juicy Studio Readability Tests

Readability is key in helping users with reading and cognitive impairments to access the content of your web pages. Gez Lemon's Juicy Studio runs a free service which will perform Flesch-Kincaid Grade Level, Flesch Reading Ease, and Gunning-Fog readability analyses of your web page.

Mozilla Firefox web browser

A web browser as a development tool? Absolutely! The raft of extensions and overall compliance with web standards make Firefox the indispensable tool in a serious web developer's kit. If you have ever written complex JavaScript, you will wonder how you lived without Firefox's default DOM Browser extension. Extensions that apply directly to accessibility and usability analysis are:

• Web Developer — developed by Chris Pederick, an indispensable toolbar for web developers
• The iCITA Accessibility Extension for Mozilla — examining the structure of page code, analyzing the appropriateness of image ALT attributes and page titles and headings, and other web page characteristics related to functional accessibility
• Complex Table Inspector — developed by Gez Lemon, displays the expansions of semantic attributes in data tables
• Glossary of Terms Extension — developed by Gez Lemon, displays the expansions of all ACRONYMs and ABBRs
• Fangs Screen Reader Emulator — text representation of what a screen reader would read aloud (the title of the extension is a play on JAWS)
• HTML Validator — based on HTML Tidy, checks for accessibility and HTML syntax errors (Note that the Firefox extensions page lists only the Windows version. To get versions for Linux or Mac OSX you must go to developer Marc Gueury's download page.)
• HTML Validator (based on CSE HTML Validator) — you must have the CSE HTML Validator (lite version) installed for this extension to work (Windows only)
• ColorZilla — in-browser color picker, copies selected colors to the clipboard in a number of formats, including hexadecimal and RGB
• Firebug — in-browser JavaScript debugger with DOM and styles inspectors, the ability to set break-points, and re-run JavaScript code
• LiveHTTPHeaders — view browser and server response HTTP headers, great tool for debugging
• Measure It — simple way to measure the size in pixels of any element within the browser window
• View Formatted Source — allows a user to display the code of any element on a page, presents the view as seen by the DOM, great for developing and debugging JavaScript
• Render Formatted Source Chart — color-coded visualization of the body of your web page

Vision Australia and Web Accessibility Tools Consortium, Web Accessibility Toolbar

For Internet Explorer. Provides some of the functionality of the Web Developer extension available for Firefox and, additionally, has a very nice HTML structure parser. Through ActiveX interfaces, the tool also provides simulated visualizations of how a web page might look to people with certain forms of low and partial vision.

TredoSoft MultipleIEs

If you are running IE7, there is still a need to test in earlier versions of the browser. TredoSoft's MultipleIEs allows you to install and use versions 3 through 6 of Internet Explorer without conflicting with the latest version.

iCapture

Correct display is part of both accessibility and usability. This service creates a downloadable screen shot of your page as rendered by the latest version of the Safari web browser. Windows users often forget other platforms exist. Dan Vine's handy service allows you to test as if there were a Mac at hand. Vine also runs ieCapture, which will render out a page in the latest version of Internet Explorer for Windows. Helpful if you don't have Beta versions of IE installed.

UITest.com

Jens Meiert's service will take a URL and hand back a number of links from which you can run the page through a whole host of free, online usability and accessibility tests, including W3C validators, WAVE, WebXACT, Cynthia Says, and Wickline's Colorblind Web Page Filter.