Latest Articles

More Web 2.0 Needed In Schools

An influential think-tank calling for more Web 2.0 use in school and technology experts agree, arguing that children should get used to collaborative tools before they enter the workplace.

UK Council for Child Internet Safety Launches

The UK Government launched its programme to help protect children from exposure to potentially harmful content on the Internet, including some forms of advertising. New Media Knowledge spoke to AOL, one of the companies involved, to see what real impact the new group would have.

US Presidential Election Gets Social

Last week, Twitter launched its US Presidential Election microblogging site and, with social media likely to play a big part in the outcome, politicians this side of the pond should be looking closely at its impact, experts say.

• i-design 08 - Brendan Dawes, My Interactive
• i-design 08 - Simon Waterfall
• YouTube gets into Top Gear
• Goldfarming for Fun and Profit
• Sky Appoints its First Head of Mobile Advertising: an Industry Viewpoint
• Industry Welcomes Intel/Yahoo! Internet TV Tie-In
• Media Landscape vs. Media Ghetto

Related Articles

• 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

• The Future of Web Design

  At FOWD this Wednesday, keynote speaker Brendan Dawes speaker outlined interesting ways forward for creative designers. Ian Delaney was there to report. more

Related Events

Web Accessibility Training

When: December 7th, 2006
Location: Aldgate, London
Price: Reduced to £375.00 if you are eligible for a discount.

more



---

Web Usability Training

When: December 6th, 2006
Location: Aldgate, London
Price: Reduced to £375.00 if you are eligible for a discount.

more



---

Writing for the Web Training

When: December 5th, 2006
Location: Aldgate, London
Price: Reduced to £375.00 if you are eligible for a discount.

more



---

Web Accessibility Training

When: November 9th, 2006
Location: Aldgate, London
Price: Reduced to £375.00 if you are eligible for a discount.

more



---

Web Usability Training

When: November 8th, 2006
Location: Aldgate, London
Price: Reduced to £375.00 if you are eligible for a discount.

more



---

Advertisement

Using the Web Accessibility Toolbar

Bookmark this article with: Delicious Digg StumbleUpon

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.