The Web Developer Extension for Mozilla-based Browsers

Disable

The options under this selection allow different items to be disabled in a web site. From an accessibility standpoint, the most important of these to take into consideration are the disabling of images, styles, page colors, and JavaScript.

Disabling images allows the web developer to view the alternative text for the images, in the context where the images are placed. Disabling styles allows developers to "see" how screen readers read the content aloud. Developers should pay attention to such things as the reading order and whether or not the lack of colors and placement affects the meaning of the content. Disabling the page colors creates a sort of high contrast version of the page, similar to the settings of some people with low vision, though some of these individuals prefer inverted color schemes with a dark background and light text.

Disabling JavaScript allows developers to determine whether the page is at least functional when JavaScript is turned off, as it is with some assistive technologies. In version 2.0 of the Web Content Accessibility Guidelines - external link (not yet an official document), JavaScript is allowed as long as it meets accessibility parameters (see JavaScript). The Section 508 guidelines take a similar stance. Version 1.0 of the Web Content Accessibility Guidelines - external link takes the stance that content should be accessible even when JavaScript is turned off.

Images

While images can be disabled using the Disable menu, the Images selection menu provides the opportunity to examine images in web content in more depth. This menu has options that can be selected to:

• Show what images in the web page have empty (or null) alt text.
• Show which images have no alt text at all.
• Replace images on the page with their alt text.

All images in a web page should have either meaningful alt text or empty alt text. Images that convey important information should have meaningful alt text. Decorative images that do not convey important information to a web user should have null alt text (or as this menu describes it, empty alt text). The option to see which images have no alt text can help to prevent one of the more common accessibility errors of leaving alt text out all together.

Information

The Information menu provides a great deal of help identifying such things as a tabindex, accesskey attributes, detailed page information (all links, all images), and id and class details, etc. This information is important to web developers creating accessible content because they can potentially see how someone who uses a screen reader will experience their content. A tabindex, and accesskey attributes, properly created, provide keyboard navigation options to those using assistive technologies like screen readers. The list of links in the detailed page information can help developers determine if they have created appropriate descriptive names for links and not used the same text for different links, such as "click here." Displaying id and class details is helpful for style sheet troubleshooting.

Miscellaneous

The Miscellaneous menu has an option for linearizing the page. This is useful to see how some assistive technologies may interpret your web page. This menu also provides the option to zoom in or out which is useful to see how screen magnifiers (used by those with low vision) will display the content of the page.

The Miscellaneous menu also contains the option to view important standards documents created by the W3C. These documents include CSS, the WCAG 1.0 (listed as WAI 1) and HTML. It is important that all web developers be familiar with this content and be able to design and develop web content that adheres to W3C standards.

Outline

The options under the Outline menu can be used to display any deprecated elements within the code of the web page. Accessible content must follow current standards for HTML which means that deprecated elements should be replaced with current standards compliant code.

Another menu item under Outline shows links without titles. This helps developers to know that the use of titles for links is consistent and appropriate.

Resize

The Resize menu can be used to change the web browser window to 800 x 600 or any other size you specify. This would be useful in making sure a design is flexible for those who use screen magnifiers to enlarge the content on the screen or for those browsing the web using an old monitor, or a new web-enabled cellphone or PDA. This also helps meet the fourth principle of WCAG 2.0 that states "Content must be robust enough to work with current and future technologies."

Tools

The Tools menu provides the opportunity to validate almost everything about a page: HTML, CSS, links, and accessibility (listed as Section 508 and WAI). This is a necessary step in developing accessible content.

Additional validation tools may be added to the Tools menu using the Web Developer Extension's Options menu (Options > Options, select Tools then Add).

The Tools menu also provides an option for Viewing a speed report for the page. This helps evaluate the robustness of the content (one of the principles of WCAG 2.0) for various connection speeds. The speed of the download time is also one of the guidelines for Australia. Commonwealth Guide to Minimum Web Site Standards: Electronic Publishing - Interface Design - external link

Options

Under the Options menu, additional evaluation tools can be added to the Tools menu. This would be particularly useful if there are tools that you choose to use more frequently than those listed. To add the WAVE to your list of tools add this line as the URL: http://www.wave.webaim.org/Output.jsp?InputUrlText=

To add the WAVE 3.5 beta, use this URL: http://www.wave.webaim.org/wave35/Output.jsp?InputUrlText=