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
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) alt text.
- Show which images have no alt text at all.
- Replace images on the page with their alt text.