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