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.
This extension is designed for Chrome, Firefox, and Opera web browser and will run on any platform that supports these browsers. When installed, 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 () or display the toolbar itself ( ).
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.
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.
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)
- Show which images have no
alttext at all.
- Replace images on the page with their
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.
The Information menu provides a great deal of help identifying such things as a
accesskey attributes, detailed page information (all links, all images), 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
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
class details is helpful for style sheet troubleshooting.
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.
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.
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 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."
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 (, select then ).
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
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: