Accessibility Checking... With Just A Browser!

There are many ways that you can validate your Web pages for accessibility, but many of them rely on your pages already being uploaded to facilitate checking. There are some offline solutions available, such as A-Prompt, and Bobby was also available as a standalone executable once upon a time. However, they are/were only available to PC users... But wait a minute! You have a browser, right? Let's see what you can do with that!

There are a number of tools and developer plug-ins that you can use to check for accessibility without being connected to the Internet. Most of these are available for Internet Explorer and these will be covered in a separate tutorial. For now, I'm going to look at the basics - what can you do with just an off-the-shelf browser to check your pages? For this I will be using Opera 6 –- it’s readily configurable without the need for third party plug-ins, and is, of course, free.

A few pointers before we start...

• Using your browser alone does not guarantee that you’re conforming to the relevant the W3C's Web Content Accessibility Guidelines (WCAG) - you would still need to do a final check online at some point. However, for the most part, these tips should help you solve most issues before they arise.
• This guide is not a tutorial about how to fix these accessibility issues -- only about how to spot them from within the confines of your browser.
• One note about Opera that will come in handy: you can specify how Web pages look using two separate modes, Author and User. As it suggests, Author mode is configured to display as the author intended, while the user setting is up to you. In this tutorial I’ll tell you where each option sits, and will assume that you are temporarily applying each change to the Author mode. However, you can disable most things in user mode and quickly toggle between modes using this icon next to the address bar:

As a 'control', this image shows how the BBC site looks with everything enabled.

Guideline 1. Provide equivalent alternatives to auditory and visual content

Read the guideline.

In a nutshell, this guideline is about putting text alternatives for images (or captioning for movies/animations) or making audio/video available in place of large blocks of text. In most cases it will be the former, although you should be aware of the audio/video alternative (you might choose to make audio available for people who may be dyslexic, for example.
Concentrating on images then, you're essentially checking for sensible alt attributes that display the purpose of the switched off image. In Opera, it's pretty easy to switch off images. In Opera 6, here is how you get to this setting:

File > Preferences > Multimedia > Images

Or press the toggle images button that is next to the address bar:

After doing this you'll find images are replaced with whatever their alt attributes are. If no attribute is present, then you'll just get [image], like this:

Take a look at the BBC news site with all images suppressed for a clearer example -- the question you have to ask yourself is: could you use the site like this? If the answer is yes, then the same could be true for people using screen readers or text-only browsers that are used for other assistive devices (for example Braille translators). Also, bear in mind that some perfectly sighted users will browse a site in this way, for example if they’re on a dial-up connection pumping out 33kbps.

Note that in Opera, it only says [Image] - like the example above - if you do not specify an alt. However, if you use an empty alt, e.g. <img src="file.gif "alt="">, then it will not attempt to render that image. So, if you’re using spacer pixels and the like, these should not show up as [Image] if you include that empty alt.

Look at SitePoint's front page with images suppressed.