By: Ian Lloyd

January 29th, 2003

Reader Rating: 9

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) [1] - 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 [2].

Guideline 1. Provide equivalent alternatives to auditory and visual content

Read the guideline [3].

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 [4] 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 [5].

Guideline 2. Don't rely on color alone.

Read the guideline [6].

Not everyone has the same level of colour perception, so if you use colour to suggest meaning, your users may face difficulties. For example, perhaps you had this great idea that normally links would be green, but really important links would be red. What happens if someone with red/green colour blindness tries to use your site? They see both types of links as having equal importance, that's what.
So, don't use colour alone to give anything significance, as it may be lost. On top of that, if people actively choose to suppress your chosen colours you will be equally stumped (or rather, the user will). Here's how you can suppress colours in Opera 6:

File > Multimedia > Page Style > Author mode > Page fonts and colors

Example (links):

Becomes:

It’s hard to tell which is the more important link once the colours have been suppresssed (well, apart from the fact that it says 'this is an important link'!).

Guideline 3. Use markup and style sheets and do so properly

Read the guideline [7].

A document should be written such that the structure and presentation of that document are separate. This means that you do not put the dreaded <font> tag around a heading or, even worse, make normal body text appear to be a heading by using <font size="7"><b>This is a heading</b></font>. You should use mark-up as it was intended to be used, hence a level one heading is <h1>This is a heading</h1>, a quote is placed in a <blockquote>, and so on.
This is a whole topic in itself, but we'll assume that you get the basics of the concept. What this means is that without an associated style sheet, a document still reads correctly and is structurally sound.

In Opera you can disable style sheets easily through the following:

File > Preferences > Page Style > Author mode > Page style sheet

By unchecking the the 'Page style sheet' you can ascertain just how much of the styling of the page has been applied at page level and how much has been performed with style sheets. What you are looking for, ideally, is a page that reverts to almost zero style when this is disabled - a case of 'less is more'.

Take a look at how the BBC site looks with style sheets disabled [8].

Take a look at a completely style sheet-driven site [9] for comparison (this example is Zeldman.com).

Guideline 4. Clarify natural language usage

Read the guideline [10].

Okay, this is not one you can check in Opera. This is a checkpoint that can only be tested with a screen reader that is capable of pronunciation in different languages, so we'll skip on to the next checkpoint where Opera can help us once more.

Guideline 5. Create tables that transform gracefully

Read the guideline [11].

For many blind users, tables can cause real problems -- both tables that are used for layout purposes, and data tables. This guideline is primarily concerned with tables used for layout (data tables are a complicated area in themselves, to be covered in another article). In a nutshell, the layout you have on screen may be read back in a very strange manner by a screen reader (or when its accessed using a text browser such as Lynx) if you are not careful. To get an indication of how this works, you need to 'linearize' your table. You can do this online by visiting the W3C's Tablin tool [12]. However, if you have Opera to hand you need just do the following:
File > Preferences > Page Style > Author mode > Tables

When you run a page with tables disabled, this is a good indication of how many users with assistive devices -- such as screen readers -- will experience your site, as in the sequence of the items they will come across. A good site will avoid using tables for layout purposes, instead using CSS.

Take a look at the BBC's site with tables linearized [13].

Guideline 6. Ensure that pages featuring new technologies transform gracefully

Read the guideline [14].

In other words, a lot of people might not have quite as flashy a browser as you, for a number of reasons. The biggest thing to look out for is client-side scripting -- what happens if the user has JavaScript disabled (or uses a browser that doesn’t support it)? It happens, perhaps as a heavy-handed way to stop annoying pop-up windows. Who knows -- all you need to understand is how your site reacts under these circumstances.

The guidelines suggest that where you have content in <script> tags, you should provide a <noscript> alternative. In Internet Explorer, the ability to disable JavaScript is hideously hidden in a depth of obscure settings (none of which refer to the term 'JavaScript'). In Opera, it's dead easy: just hit F12 and hey presto, the following menu appears ...

You will also see that you can quickly switch off other features that might be termed 'bells and whistles' in the 'Quick Preferences' options, including Java, plug-ins and the ability to read/write cookies. Very quickly you can switch a number of options off, and see how your site/page behaves.

View the BBC site with JavaScript disabled [15] (can you spot the difference?).

In addition, you should be aware of other technologies that may not be available to all users, such as Java or any audio or video content. These, too, can be easily disabled in Opera using the quick preferences shown above or via the following route:

File > Preferences > Multimedia > Media Types

Guideline 7. Ensure user control of time-sensitive content changes

Read the guideline [16].

If you use HTTP-EQUIV="refresh" in a meta tag to cause a page to reload, you're going against this guideline. However, this cannot be easily ascertained using Opera. However, this guideline also refers to anything that moves on screen without the user's says-so. This might be DHTML, which can be checked by disabling JavaScript (see section 6) or it could refer to anmated images. These can also be quickly disabled using the Quick Preferences menu (F12):

Guideline 8. Ensure direct accessibility of embedded user interfaces

Read the guideline [17].

Not one that you can use Opera to check for, as far as I know. This guideline stresses the need for ensuring that anything embedded on a Web page is just as accessible as anything else on the page, whatever technology was used to create the embedded feature.

Guideline 9. Design for device-independence

Read the guideline [18].

Similar to guideline number 3, is this one. By using simple and standard (non-proprietary) mark-up and not applying styles to a Web page, but instead using CSS to style elements, you are in fact designing for device independence. If your code is the lowest common denominator, then your page will likely be viewable on a greater range of browsers. As such there are a number of things to check using Opera:

• How does it behave with images switched off? (see section 1)
• How does it look with styles switched off? (see section 3)
• How might tables render if tables are not supported by the device? (see section 5)
• How does the page behave with scripting disabled? (see section 6)

Also bear in mind that for true device independence, your screen layout should be flexible enough to accommodate a 1280x1024 pixel screen size just as easily as it can a handheld device (such as a Pocket PC’s 240x320 pixel size). No special tricks in Opera here -- just disable everything as detailed above then try resizing a window. There's a BIG challenge for you!

Guideline 10. Use interim solutions

Read the guideline [19].

This is a hotch-potch of guidelines that aim to address fallback solutions. In other words, if a browser doesn't support a certain piece of accessibility mark-up, how can you work around it? Among the checkpoints is the recommendation to "allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user". Hey, here's something we can check using Quick Preferences (F12):

With pop-ups disabled in Opera, try navigating around your site. If you encounter any problems, you may have a rogue window.open lurking around that is not working (for more information about making pop-ups accessible in such circumstances read The Perfect Pop-Up [20]).

Final four guidelines

The final four guidelines are listed here so that you can go away and find out what they are. Unfortunately, they are slightly more obscure than the previous guidelines, and cannot be easily checked using Opera in the same way that you might check for images and alt attributes, for example.

• Guideline 11. Use W3C technologies and guidelines [21]
• Guideline 12. Provide context and orientation information [22]
• Guideline 13. Provide clear navigation mechanisms [23]
• Guideline 14. Ensure that documents are clear and simple [24]

Summary

Opera has a multitude of options to customize the way you view a Web page, and many of these can be used to ascertain how accessible your Web page is. This is an ideal way to check the development of a page template for a site, for example, while you’re on the move, perhaps on a laptop with no immediate connection to the Internet.

Opera is not the only browser to offer such options -- Mozilla also has a number of similar options, and Internet Explorer has a host of plug-ins that can be used to extend the browser's functionality. But for out-of-the-box options, Opera is difficult to beat.

[1] http://www.w3.org/TR/
[2] http://www.webmasterbase.com/examples/opera/bbc-news-full-version.gif
[3] http://www.w3.org/TR/
[4] http://www.webmasterbase.com/examples/opera/bbc-news-images-suppressed.gif
[5] http://www.webmasterbase.com/examples/opera/sitepoint-images-suppressed.gif
[6] http://www.w3.org/TR/
[7] http://www.w3.org/TR/
[8] http://www.webmasterbase.com/examples/opera/bbc-news-style-sheets-disabled.gif
[9] http://www.webmasterbase.com/examples/opera/zeldman-style-sheets-disabl.gif
[10] http://www.w3.org/TR/
[11] http://www.w3.org/TR/
[12] http://www.w3.org/WAI/References/Tablin/form
[13] http://www.webmasterbase.com/examples/opera/bbc-news-tables-linearized.gif
[14] http://www.w3.org/TR/
[15] http://www.webmasterbase.com/examples/opera/bbc-news-javascript-disabled.gif
[16] http://www.w3.org/TR/
[17] http://www.w3.org/TR/
[18] http://www.w3.org/TR/
[19] http://www.w3.org/TR/
[20] http://www.webmasterbase.com/article/955
[21] http://www.w3.org/TR/
[22] http://www.w3.org/TR/
[23] http://www.w3.org/TR/
[24] http://www.w3.org/TR/