The Web Developer Extension for Mozilla-based Browsers

Introduction to the Web Developer Extension

The Web Developer Extension, created by Chris Pederick, is a very popular and useful resource for web designers. This section will specifically focus on the tools this extension provides that can help developers create more accessible web content.

Note

This extension is designed for Mozilla, Mozilla Firefox and Netscape (version 6 or greater) and will run on any platform that these browsers support. When downloaded, it adds a configurable menu and toolbar to the browser with various tools to help Web developers.

Using the Extension

First, follow the instructions provided to download and install this extension.

Next, using your browser, make sure that you know how to find the Web Developer menu items (Tools > Web Developer) or display the toolbar itself (View > Toolbars > Web Developer Toolbar).

Now we'll explore some of the various tools in the toolbar that will be especially useful to those interested in creating accessible web content. Two of the menus, CSS and Forms, will not be discussed because they provide tools that focus more on general web development than they do access issues.

Disable

Disable menu optionsThe 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, 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 takes the stance that content should be accessible even when JavaScript is turned off.

Images

Images menu options 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

Information menu optionsThe 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

Miscellaneous menu optionsThe 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

Outline menu optionsThe 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

Resize menu optionsThe 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 mobile device. 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

Tools menu optionsThe 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

Options

Options menu optionsUnder 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://wave.webaim.org/report?url=