Using The Web Accessibility Toolbar

Using The Web Accessibility Toolbar

Using the​ Web Accessibility Toolbar
Testing a​ website for​ accessibility can be a​ time-consuming and​ laborious process .​
The free Web Accessibility Toolbar can do most of​ the​ hard work for​ you though and​ is​ an​ indispensable tool for​ anyone interested in​ accessibility.
The toolbar is​ not an​ automated testing tool so does require manual work from you .​
It's therefore able to​ avoid the​ many problems with automated accessibility testing tools .​
It doesn't require any technical knowledge so even the​ biggest technophobe can check their website for​ accessibility!
Installing the​ Web Accessibility Toolbar
You can download the​ toolbar for​ free from, and​ after you install it, it​ will sit in​ the​ toolbar area of​ Internet Explorer .​
The total file size is​ just 550kb so the​ download won't take too long.
The toolbar only works on Internet Explorer on Windows, so if​ Internet Explorer isn't your first-choice browser you'll have to​ switch browsers when using it .​
(Alternatively, you can download the​ Web Developer Toolbar for​ Firefox which offers similar, but not identical, functionality.)
Using the​ Web Accessibility Toolbar
Now you've downloaded and​ installed the​ Web Accessibility Toolbar you can start using it! There are 12 buttons in​ total on the​ toolbar, each with a​ down arrow to​ the​ right of​ the​ text .​
If you click on the​ down arrow for​ any of​ these buttons then a​ dropdown menu appears with all the​ available options (alternatively you can use the​ keyboard shortcut keys assigned to​ each button).
Checking for​ document structure
One of​ the​ most useful buttons is​ the​ seventh, Structure .​
It's essential that the​ structure within the​ HTML code accurately reflects the​ visual structure of​ the​ page .​
This is​ so that visually impaired web users using screen readers can gain an​ understanding of​ the​ page structure.
Some of​ the​ most useful items in​ the​ Structure dropdown menu include:
Headings - Shows which items on the​ page are labelled as​ headings within the​ HTML code .​
The main page heading should be a​ heading level one and​ other headings should be heading level two .​
Any sub-heading of​ a​ heading level two should be a​ heading level three, then heading level four and​ so on .​
Heading numbers should always be sequential - a​ heading level four shouldn't follow a​ heading level two if​ there's no heading level three .​
Headings are especially useful for​ screen reader users as​ they can call up a​ list of​ headings and​ jump straight to​ the​ section in​ which they're most interested .​
List items - Shows which items on the​ page are labelled as​ lists within the​ HTML code, by displaying
  • next to​ any list item .​
    Lists can be horizontal or​ vertical, and​ all navigation should be marked up as​ a​ list item .​
    Lists are very useful for​ screen reader users as​ the​ screen reader will announce the​ number of​ items in​ the​ list before reading the​ list items .​
    Fieldset / Label - Shows which items on the​ page are called labels within the​ HTML code .​
    After selecting Fieldset / Label, the​ text next to​ each form should say the​ word label next to​ it​ - if​ not, that text hasn't been called a​ label in​ the​ code .​
    Table border - Places a​ border around each table .​
    Nested tables within tables can cause huge difficulties for​ screen reader users .​
    After selecting this item, the​ first table will have a​ black border the​ second blue, then green, yellow, orange, red and​ purple .​
    If you see any of​ these last four colours it's time to​ take a​ good look at​ the​ code behind the​ page .​
    Table cell order - Shows the​ order in​ which the​ page is​ read out to​ screen reader users (if a​ table is​ used for​ layout) .​
    Hopefully, the​ order should be reasonably logical .​
    Checking the​ site works under all circumstances
    It's important that your website doesn't depend on any one type of​ technology, or​ users whose browsers don't support that technology may be unable to​ access your site .​
    You can check to​ see if​ your site depends on any one technology:
    Images > Toggle Image/Alt - One of​ the​ most useful functions on the​ toolbar, replaces images with their ALT, or​ alternative, text .​
    Alt text is​ read out to​ screen reader users or​ displayed to​ web users with images turned off, instead of​ the​ image itself (e.g .​
    users on dial-up modems may turn off images to​ speed up the​ download time of​ pages) .​
    It's essential that the​ ALT text provides an​ adequate description of​ the​ image .​
    IE Options > Toggle JavaScript - Turns off JavaScript .​
    After selecting this option, work through the​ pages on your website - is​ the​ whole site still accessible to​ you?
    IE Options > Toggle ActiveX - Turns off ActiveX controls .​
    Again, after selecting this, work through your website to​ see if​ the​ whole site is​ still accessible to​ you .​
    IE Options > Toggle CSS - Turns off CSS .​
    Are pages still legible? if​ CSS is​ used for​ layout then you will see the​ page content in​ the​ order that it's read out to​ screen reader users .​
    (If you toggle image/alt after this, you'll have a​ complete visual representation of​ what screen reader users will hear.)
    Other useful accessibility checks
    There's a​ huge amount of​ functionality available on the​ Web Accessibility Toolbar, but some of​ the​ other most important accessibility checks you can carry out with the​ toolbar include:
    Validate > W3C HTML validator > Validate HTML - Checks whether the​ page is​ based on valid HTML or​ not .​
    If the​ page is​ not valid, you'll be told why .​
    CSS > Deprecated HTML > Deprecated elements & attributes - Checks for​ code that shouldn't be used and​ is​ being phased out .​
    a​ new window will open containing the​ HTML code - anything in​ red is​ deprecated and​ should be removed .​
    Doc info > Page speed report - Examines all the​ files used to​ display the​ web page and​ prepares a​ report on the​ average download speed for​ that page for​ different Internet connections .​
    Doc info > List links - Displays a​ list of​ all on-page links .​
    Screen reader users can call up a​ list of​ links and​ jump straight to​ the​ page in​ which they're most interested, so it's essential that link text makes sense out of​ context .​
    Link text such as​ ‘click here’ should be avoided at​ all costs!
    Colour > Greyscale - Shows the​ page in​ greyscale .​
    Great for​ checking colour contrast .​
    Other functionality
    Other functionality
    The Web Accessibility Toolbar offers some other interesting functionality:
    Resize - See how your website looks for​ users on 640 x 480px, 800 x 600px and​ 1024 x 768px screen resolutions .​
    Tools > Simulations - Put yourself in​ the​ shoes of​ a​ special needs users with these fascinating simulations .​
    The Web Accessibility Toolbar offers an​ enormous amount of​ functionality .​
    Download it​ for​ free from and​ start using it .​
    Without any technical expertise, you can perform a​ mini-accessibility audit on any site in​ just a​ couple of​ minutes.

  • Related Articles:

    Related Topics:

    Web News - Web Guide - Web Tips - Web Advice - Web Videos - Web Support - Web Questions - Web Answers - Web eBooks - Web Help

    Powered by Blogger.