Web Developer Extension for Chrome or Firefox

The Web Developer extension is not primarily an accessibility checker, so it’s not quite as simple to use as WAVE. But the Web Developer extension has features you’ll appreciate if you want to get more deeply into HTML and CSS.

Install Chrome or Firefox and the Web Developer Extension

If you don’t already have Mozilla Firefox or Google Chrome installed on your computer, you can use the links below to download one or both browsers.

There’s a version of the Web Developer Extension for each browser.

If you are using Google’s Chrome browser, you’ll find it helpful to install an extension that will open a frame in a new window:

Check an HTML Page in Pilot with the Web Developer Extension

The features you need are scattered throughout a lot of menu items. So we’ll try to narrow things down.

In Firefox, the extension adds a toolbar. In the Chrome browser, the extension adds a cog-shaped icon to your toolbar. Click the cog to reveal the options that you’d see on a toolbar in Firefox.

Pop the Page Out of its Frame

Although this extension will work with the HTML page in its frame in Content, it can get messy if you have all Pilot’s surrounding navigation included while you’re checking.

  1. View the page in Content, not in the HTML editor.
  2. Right click on the page and choose “Open frame in new window.”
  3. You’ll now see the page in a window by itself, without all of Pilot’s navigation around it.

How to Clear a Page

The Web Developer Extension will overlay your page with information boxes. To clear a page, you can use the browser’s refresh feature. Or you can go to the extension’s “Options” section and choose “Reset Page.”

Check Images for Alternative Text with the Web Developer Extension

Check for Missing Alt Attribute

In HTML pages, all images should have an “alt” attribute. Even decorative images should have the attribute, even though it’s empty. An empty alt attribute makes the decorative image silent to screen readers. If the alt attribute is missing, though, a screen reader will likely say that there is an image present and may speak the image’s file name as if it were the alternative text. That’s often not very helpful.

Under the Web Developer Extension’s “Images” section, click “Outline Images Without Alt Attributes” to quickly find any images on a page that lack the alt attribute.

Check for Appropriate Alternative Text.

Next, you’ll want to be sure any alternative text that does exist adequately describes its image.

Go under “Images” and choose “Display Alt Attributes.” That will superimpose a little red box above each image with the alternative text in it.

If you are using Firefox, another option is to go under the “Images” section, choose “View Image Information.” That will open a new tab that lists all the images in your page and, under each, displays information about the image, including its alt text. Although you will also see this option in Chrome, it may not work in that browser.

Check Headings with the Web Developer Extension

In the extension’s “Outline” section, first click “Show Element Tag Names” if that doesn’t already have a check by it. Then click “Outline Headings.” All the document’s headings will now be outlined and will have a little box showing what level heading it is. If someone has faked a heading by just making text big and bold, you will see that it isn’t outlined and has no heading tag.

The extension also gives you a quick way to look at the heading structure. First refresh or reset the page, if you need to. Under the “Information” section, click “View Document Outline.” A new tab will open listing all the headings and showing their levels. It will also indicate if there is a missing level, such as when an h3 follows an h1 without an h2 between them.

Check Tables with the Web Developer Extension

If you’re using Firefox, the Juicy Studio Accessibility Toolbar will give you better information about tables, especially what headings are associated with each cell. But the Web Developer Extension can show you how each cell is tagged so you can tell what’s a header cell and what’s a data cell.

First, go to the “Outline” section and make sure “Show Element Tag Names when Outlining” is checked. Then click “Outline Table Cells.” (In Firefox, you’ll have to hover over “Outline Tables” to find the “Outline Table Cells” option.)

Next, go to the “Information” section and choose “Display Table Information.” Now you should be able to see if your table is tagged properly.

Submit to Online Validators? Not from within Pilot.

Under the “Tools” menu, you’ll see options to submit a page to online sites to “validate” it. That is, the site will check the HTML for compliance with various kinds of Web standards. But those sites can’t check a page that’s in a password protected course. So they don’t do you any good in Pilot. You would have to host your pages on a publicly-available Web site to use any of those validators.