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:
- Checking alternative text descriptions for images;
- Checking heading structure of your pages;
- 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.
- 7 accessibility myths
- How to improve web accessibility using W3C''s easy checks
- Understanding the purpose of images using alt text
Start building accessibility into your projects at the beginning to save time and money, don’t just leave it hanging on the backlog letting it gather up dust. Drill it in.
If you would like Nomensa to help you with your accessibility challenges or to provide you with an accessibility evaluation of your website/mobile app, please don’t hesitate to get in touch.