Latest Articles

Business Briefing: Where Next for Venture Capitalists?

Despite the economic downturn venture capitalists are still looking at investment opportunities in digital media. New Media Knowledge spoke to one to get the low down on what VCs want.

more

Social Media in Practice: BBC Radio 5 Live

Web publishers and broadcasters always have to look for new and innovative ways to maintain existing audiences and win new ones. When BBC Radio 5 Live realised it was losing listeners to other sources of football-based content it launched a new service to win them back. New Media Knowledge met the people responsible.

more

Conservationists Embrace Social Media

Television is increasingly embracing new media to reach new audiences and add interesting applications. New Media Knowledge talks to the people behind a new online conservation series that aims to raise wider awareness of the plight of endangered species.

more

• The Language of the Web
• Rough Guide to: In-Game Advertising
• Alexander McCall-Smith Engages Web 2.0
• Business Brief: Video Advertising Looks to Future
• ‘Virtual Home’ for Ex-Pats in London Established
• Rough Guide to: Social Media and the Law
• Record Visits for UK Blog Sites

Related Articles

• Clearing Congestion

  Businesses today rely increasingly on the Internet for promoting themselves and selling their wares. Consumers have too, making e-commerce a fact of our everyday lives. Dr. Lawrence Roberts, a key founder of the original Internet called ‘ARPANET’ believes that 99% of us will be online by 2018, and that everyone will possess a mobile wireless Internet device. more

• Americans Turn to Web for News

  A survey has revealed that the American public is shunning traditional media such as newspapers and TV as their primary source of news. The Internet has become the main channel of information for nearly half (48 per cent) of Americans - an increase of 8 per cent from one year ago.

  more

• Accessibility for Better Business

  Businesses of all sizes are missing out on opportunities to create new leads and make more sales because they aren’t following basic web accessibility practices. That’s according to a new white paper from CMS developer Squiz. Ian Delaney reports. more

• Web 2.0 Lacks Converts

  While Web 2.0, user-generated content sites perform less well than traditional sites when it comes to advertising conversions, the cost of using such sites is proportionally low. more

• Mobile Web 2.0

  Operators and handset manufacturers have been heralding the imminent arrival of the mobile web for some time. But in the words of the sage of Salford, Steven Morrissey, "How soon is now?" more

Using the Web Accessibility Toolbar

The Web Accessibility Toolbar will help you test any website for basic accessibility in just a few minutes - find out where you can get it from and how to use it.

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 an <h1> (heading level one) and other headings should be <h2>s (heading level twos). Any sub-heading of an <h2> should be an <h3>, then <h4> and so on. Heading numbers should always be sequential - an <h4> shouldn't follow an <h2> if there's no <h3>. 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

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.

This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He's extremely good at usability training and writing for the web training.