This tools allows for quick access to check header structure, colors, alt tags, and many more accessibility related tasks. Once you download the web developer extension tool you’ll see a gray gear icon in the top right corner of your screen. There are a few things you can check for regarding accessibility—mainly, checking for alt tags as well as your header tags.

When following WCAG 2.0, it’s important to have one h1 tag per page and use semantic structure (try not to skip from a h1 tag to a h4 tage without an h2 tag and h3 tag). The web developer extension tool will let you see the entire document outline so you can easily identify any accessibility issues regarding headers.

To get to the document outline, open the web developer extension tool and navigate to Information. From there, click on View Document Outline.

Once you click that, you should see something that looks like this:

One thing to note – while it is not accessible to have more than one h1 tag per page, most pages will have multiple h1 tags, because of the leadforms.

Another way to view headers allows you to see which header is being used on a specific element, like below:

This can be super helpful to pinpoint exactly where you need to make changes. To get this, open up the web developer extension tool, and navigate to Outline. From there, click on Show Element Tag Names and Outline Headings.

Alt attributes are important because these provide text for visitors who can’t see images in their browser, which includes visitors using browsers that can’t display images, visually impaired visitors, and visitors who use screen readers. Because of this, we want to make sure that all images have alt text that is relevant to the image. If an image is purely decorative, we used empty alt text instead.

To check if an image has alt text, you can use the web developer extension tool. To get there, open up the tool and click Images. Then, click Display Alt Attributes.

After you do that, you can see that each image element on your page will have visible alt text if there is alt text on that image.

It’s important to know exactly what colors are being used in order to check for color contrast on the WebAim Color Contrast Checker External link . We always want to make sure that there is a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

There’s a ton of different ways that you can check which color is being used. One way to check, using the web developer extension tool, is by going to Miscellaneous. There, you’ll click Display Color Picker.

At the bottom of the screen, the color picker should appear. When you hover over any area on the page, the hex code will be displayed. This can be helpful when you’re checking color contrast over a background image.