|
Home::Software
Using the Web Accessibility Toolbar
Author : Trenton Moss
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 http://www.nils.org.au/ais/web/resources/toolbar, 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 < li > 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.
Conclusion
The Web Accessibility Toolbar offers an enormous amount of functionality. Download it for free from http://www.nils.org.au/ais/web/resources/toolbar and start using it. Without any technical expertise, you can perform a mini-accessibility audit on any site in just a couple of minutes.
Article Source: http://www.articledashboard.com
This article was written by Trenton Moss. Trenton's crazy about web accessibility and usability - so crazy that he went and started his own web accessibility and usability consultancy ( Webcredible - www.webcredible.co.uk ) to help make the Internet a better place for everyone. He also knows an awful lot about the Disability Discrimination Act.
Spam emails More free articles Related articles
|
More related feeds |
10 Tools for Evaluating Web Design Accessibility
Web Accessibility Toolbar - screen shot. The Web Accessibility Toolbar (WAT) is an extension for Internet Explorer or Opera that offers designers a ton of useful tools and features to help in the analysis of a web pageβs accessibility. ...Web Accessibility Toolbar
The Web Accessibility Toolbar is provided by the Accessible Information Solutions (AIS) team of Vision Australia. It has been developed to aid manual examination of web pages for a variety of aspects of accessibility. ... StumbleUpon tears down the plug-in wall, lets in the masses
The new version of StumbleUpon is all about accessibility β by anyone, anywhere. While itβs not getting rid of the plug-in toolbar entirely, you no longer need it thanks to some clever JavaScript code. This will allow anyone, ... Update on WAVE
Several thousand pages were remediated using WAVE - meaning they started with accessibility errors, but those errors were all later fixed. In addition, the WAVE 4 toolbar for Mozilla Firefox has been downloaded many thousands of times ... 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. ... StumbleUpon tears down the plug-in wall, lets in the masses
Using the web site discovery service StumbleUpon right now is kind of like driving a hot convertible with the top up. Itβsa cool car, and having the top on gives you better performance, but itβs just not quite as sexy. ... Internet Explorer 8
AccessibilityIn response to the increase in user interface (UI) complexity on the Web, the Web Accessibility Initiative group has defined a roadmap for Accessible Rich Internet Applications (ARIA), which introduces ways for Web site ... Design & Debug WordPress Themes Using Free Tools
Some people prefer Firebug to the Web Developer Toolbar. While some of their functionality overlaps, theyβre both have such individual strengths that I use them both all the time, usually simultaneously. Iβd encourage you to play around ... Scripting Enabled, London 19-20 September
A steep learning curve is a real barrier to a lot of users using the web. Forms, especially on travel sites are really hard to use and time consuming. Custom stylesheets should also be on the accessibility for the web wish list. ... Blog #3 A Del.icio.us Recipe for Success
This social bookmarking site was launched in 2006, boasting that is has a strong international audience of online users β top three countries using this site are the United States, Italy and Japan. A toolbar icon is available for quick ...
|
|
|
