Accessibility: On a Shoe-String

Checking for common accessibility issues on a shoe-string

Testing a site design to ensure the widest practical audience should be an essential part of the design process on every web site. Of course in an ideal world, every web site developed would be tested both for usability and accessibility using real people. But in many situations, particularly on smaller projects, such testing is often beyond the client's budget and the profitable scope of the job. While purists may argue that accessibility must take priority over all other concerns and that a site can only be called accessible if tested on real people , I believe that any attention to accessibility is better than none at all. Experience, a knowledge of the WAI guidelines and the appropriate use of tools can easily create sites which can be called effectively accessible.

There are now many tools available to assist designers in creating sites which are more accessible. Here are a few which form part of the base-level testing routine which we do and some of the reasons why we do what we do.

Firefox Web Developer toolbar

Chris Pederick, the developer behind the Firefox Web Developer toolbar, should be given a medal. His is a work of pure genius.

Disable

Accessibility is often about alternatives; text alternatives for when images are removed, no-script alternatives for when scripting is unavailable. The disable feature contains some of the most often used tools in our review process and disables a range of elements for us to judge where alternatives might be appropriate.

Disable images and page colours

Disable images (including background images loaded by CSS) can easily expose whether navigation or content is accessible without images.

The WAI guidelines also require that colour is not the sole method of conveying meaning, so Disable Page Colours is a simple way to check that colour blind users will still enjoy their experience on a site.

Disable styles

Perhaps the most important (and revealing) tool for designers is the toolbar's ability to Disable Styles, leaving only document content. Revealing only content, including that which has been moved off-screen or hidden by CSS, allows us to check that a document is structured in a meaningful order for a screen-reader user. It also highlights where best to place skip to content or navigation links. It may also highlight where additional markup elements such as <br />s and <hr />s might be required to produce an attractive layout without CSS.

Images

Images are a staple of most designers I know, and deciding where alternatives to images will benefit a user experience and then providing effective alternatives is a day-to-day occurance. Outline Images Without Alt Attributes can be a life-saver during a busy design or testing routine. This is often followed by Replace Images With Alt Attributes to ensure that if non-empty alt strings have been chosen, that the alternative text is both meaningful and adds to a user's understanding of the content.

Validation

I cannot imagine a day where the Firefox Web Developer toolbar's validation tool is not used at least fifty times. While we use the automated 508 and WAI accessibility checkers less frequently than CSS and HTML validation, they do provide ready access to validators from right within the browser. Whilst not directly an accessibility issue, validation is key to web-standards and should form a regular part of a CSS designer's routine. Too many times have I seen questions about broken layouts on CSS Discuss or Accessify Forum where the problem lies rooted in invalid mark-up or CSS.

Opera

While it's true that Opera is not my favourite browser of choice, it does include some killer features to help designers explore the accessibility of the pages that they create. None more so than the Links toolbar.

Links

Ensuring that links make sense to users when seen out of context is vital for practical accessibility. Too many times do we see,

<a href="#">More</a>

Instead of,

<a href="#">More about our clients</a>

This will be confusing in the extreme to screen-reader or text-viewer users, and is compounded when there are several on a page.

<a href="apples.html">More</a>
<a href="bananas.html">More</a>
<a href="oranges.html">More</a>

More?, more what? Opera's Links toolbar quickly shows whether or not links make sense out of context or require a fuller explanation through an added title attribute.

User modes

Perhaps the most useful of all Opera features for designers is Opera's ability to preview a page outside of the normal graphical view in ways that can often take designers by complete surprise. Simulating many viewing environments including a Text Browser Emulation, this feature is invaluable. It can also be great fun to show a tables-using designer the effects on a page when Disable Tables is used.

Online tools and resources for designers on a shoe-string

Many tools which we use every day as part of our testing routines can be found online. Here is a short list of some of our favourites.

Juicy Studio Colour Contrast Analyser

Gez Lemon introduces a highly useful colour and contrast analyser. This page is provided to allow you to check the contrast of two colours using the W3C's colour contrast algorithm by specifying the colours directly.

Juicy Studio CSS Accessibility Analyser

Juicy Studio Readability Tests

Vischeck URL

Vischeck shows a page as seen by someone who is color blind. Use the Vischeck online application or download the program to run locally.

Colorblind Web Page Filter

A further, useful online tool for accessing the impact of colour choices on a range of colour blindness types.

Contributed by Andy Clarke, Stuff & Nonsense. Article originally published December 2004.