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