Developer tools to help check web accessibility

Three tips for using the web developer toolbar to help check for accessibility issues on your website. Developer tools to help check web accessibility Transcript: Hi I’m Emily from Nomensa and today I’m going to show you how to use the web developer toolbar to help check for accessibility issues on your website. The web developer toolbar is a plugin for the Firefox web browser. If you haven’t got the Web Developer toolbar already you can download it from https://addons.mozilla.org/en-US/firefox/addon/web-developer. There are loads of things you can do with the web developer toolbar, but for today’s video I’m going to concentrate on three things. They are:

1. Checking alternative text descriptions for images;
2. Checking heading structure of your pages;
3. Validating the HTML of your pages.

First of all, find a page you would like to check in terms of accessibility. For this example we are going to use the BBC homepage. To check the alternative text descriptions for images on the page, from the web developer toolbar, select “images” then “display alt attributes”. This will display the alternative text description for the image next to the image in text. You can then compare the text description with the image and see if they match.

If the text description doesn’t describe the image, you will need to update the alternative text description so it matches what is shown in the image. If we look at some of the images on the BBC homepage, we can see that this picture of Chris Moyles has an alternative text description of “Chris Moyles” which accurately describes what is shown in the image. So this is a perfect alternative text description for this particular image.

Let’s move on to look at heading structure. Headings should be used where appropriate on your pages and should help convey the structure of the page for someone who can not see the page, for example, someone using a screen reader. You can easily check heading structure with the web developer toolbar. To check headings on the BBC website, from the toolbar, select “Information” then “Document Outline”. This will show you all the headings on the page and whether they are nested correctly or not. You can then work out if the heading structure of your page is accurate.

Finally, you can use the web developer toolbar to check whether there are any errors in the HTML code of your pages. To check the HTML code on the BBC website, from the toolbar select “Tools” then “Validate HTML”. This will check your page with the W3C Mark-up Validation Service to test whether there are any errors in your HTML code. So those are the three options from the web developer toolbar that you can use to help check the accessibility of your pages. Let us know how you get on testing your own websites.

—