Accessibility: Using WAVE extension for Firefox

Accessibility: Using WAVE extension for Firefox

Two issues I came across regarding developing web apps that supports accessibility
are knowing the guidelines along with lack of tools that can check the actual
page generated by our application and provide as with meaningful information
on how to fix accessibility errors.

Visual Studio validation disabilities

Visual studio has, since it’s 2005 version, a tool for accessibility check on web pages.
however, it cannot discover errors caused by HTML generated in our code behind,
in our or 3rd party’s custom controls and of course not on elements generated in
JavaScript using DOM manipulations or any other technique on client side.

Accessibility toolbars

There is a variety of accessibility toolbars for Internet Explorer, Firefox, Opera and more.
These toolbars are great tools and include features like stripping page from it’s
CSS / pictures / JavaScript  (viewing in text-only mode) , sending the page to be
validated on various web accessibility and W3C compliance validators and so on.  

WAVE toolbar for Firefox

WAVE toolbar for Firefox contains all those features and one, very significant, more.
In the following screenshot you can see the “Error, Features and alert” . Here, by pressing
a button, you can see all accessibility faults on your page:

As you can see in the on the picture above, there are little icons added near some elements.
The red ones are for errors, the yellow for alerts and the green ones are displaying the
accessibility features on the page.

Going with your mouse over each icon tells us what the error / alert / feature is about as
a tooltip.

What does it give us?

1. The “Errors, Features and Alerts” button does it’s validation on the client side.
    Meaning that it is good  for offline pages, pages on enterprise’s intra-net and
    sites requires log-in.

2. Even if you are not familiar with the accessibility guidelines you can easily learn
    what your mistakes  are by simply press the “Icon key” button. The explanations
    and recommendations on that  page are simple.

Summary

Accessibility is something to keep in mind when designing our web application’s UI.
Visual Studio’s accessibility checks is not profound enough because it’s limitations
in discovering issues caused by our code-behind or ours / third party’s custom controls.
WAVE accessibility toolbar may come in handy with it’s “Error / Features and Alerts”
feature that helps us find our accessibility issues easily. It check’s our page with it’s
final output (including elements created on client side) and does it locally. It also
contains the same features as other toolbars such as disabling CSS / scripts 
and sending the page’s URL for validating in various validating sites.

You may download latest version here (open the downloaded file with Firefox)