Firebug – This is a general Web development tool that runs as a Firefox extension. It is extremely valuable for analyzing static and dynamic content in Web pages directly from within the browser.
Check for code validation. There are also several browser plugins which will let you validate directly within the browser. Note, if you use ARIA attributes your code might not validate. If you are using them correctly and these are your only validation errors, it is better to use the ARIA attributes and not have completely validated code.
Basic Accessibility Issues
WAVE Toolbar – This extremely helpful Firefox extension allows you to perform a number accessibility tests on individual pages. You can
- visually show all of the errors and warnings on a page
- view a text-only version of the page using the Text-only view to make sure the reading order makes sense. The advantage of this tool over simply turning off CSS is that it will correctly linearize tables to show the correct reading order.
Note, sometimes the WAVE toolbar will report an error that you cannot find visually on the page. In these cases it is often helpful to evaluate your page using the Web-based version of WAVE.
SortSite – This tool will scan a single page or an entire site to test conformance with WCAG 2. Whereas the strength of most of the tools on this page is their depth of analysis, SortSite’s strength is its breadth. This tool will test for many of the issues other tools do, but it will also find some issues that other tools don’t cover. The other strengths of this tool are the ability to scan an entire site, including password protected pages, and also to run in an unmonitored mode on a routine schedule (locally installed version only). Note, in the VCL this environment is called “Accessibility tool with JAWS”. We also have a number of licenses available for NC State users. For more information about receiving a license please contact firstname.lastname@example.org. The software is also available for purchase.
Document Structure and Headings
HeadingsMap – This Firefox extension will visually show you the heading structure of your document. You can also click on the heading map to highlight where it is in the page.
Juicy Studio Accessibility Toolbar – This Firefox extension will allow you to check an individual page for color contrast issues. When running the test use the Luminosity Contrast Test. The test will combine all of the possible CSS rules to determine what all color combinations could possibly be created on your page and then will show which have enough contrast difference. This test will produce some false positives, so confirm an error actually exists before trying to fix the problem. In addition to color contrast, this toolbar will also let you see where ARIA regions and roles have been defined on a page.
WCAG Contrast Checker – This Firefox extension is great for spot checking color contrast issues on a page. You can use it in conjunction with ColorZilla to use an eyedropper to select individual foreground and background colors for analysis from a page.
Color Palette Accessibility Checker – This tool will allow you to create a color palette and see which color combinations will pass WCAG 2 color contrast requirements. This tool is helpful for designers so they know what colors are valid before they start designing. NC State users can view the NC State Color Palette Accessibility Checker.
To test for keyboard accessibility simply unplug (or don’t touch) your mouse and try to navigate the entire page, including menus and all links. If you can perform all of the functions of the site via the keyboard, then your site is keyboard accessible. Note for Mac users, before testing you must first set System Preferences : Keyboard : Full Keyboard Access : All controls.
There are still some aspects of Web pages that need manually checked. They include
- References to color, like “required fields are in blue.”
- Color contrast issues that don’t involve text, like differentiating a highlighted section of a sub-menu from a non-highlighted section. For example, a menu that normally has a red background should not show the highlighted section of the menu as a slightly different shade of red – a contrasting color should be used for the highlighted section.
- Excessive use of alt text. This includes adding alt text to purely decorative images, like “horizontal line” for a page section divider.
- Ensuring tables are encoded correctly if they are data tables. Validation tools usually can’t determine if you are using a table for layout purposes or for the presentation of data. This issue is most prominent in data tables that do not have header information properly encoded in them, because the tools assume you might be using them as layout tables. Once you have included table headers, tools will be able to show you if you encoded it correctly.
- Accessibility of regions of the page which change dynamically after the page has loaded. Validation tools cannot determine if you have portions of your page that update via AJAX or other methods. There are tools that can help you determine if you have defined those areas of your page correctly with ARIA, but they cannot determine if ARIA is needed in the first place.
NVDA – This is a free and open source screen reader. It is nice because it is a stickler for standards, whereas some other screen readers try harder to overcome poorly coded Web pages and make them more accessible than they really are.
JAWS – This is a more robust screen reader and is the most popularly used one in the industry today. It will run in a 40 minute demo mode. Note, the 40 minute timer starts from the last time you rebooted you computer.
VoiceOver -This screen reader comes free with OS X and iOS. With the growing popularity of Apple devices this screen reader should definitely be part of your tool set if you are doing serious screen reader testing.