Checking Your Site for Accessibility Using Opera

Note: The content of this page is very much out-of-date and may no longer be relevant or correct. It is kept here for little more than archival purposes. Please bear this in mind before reading on.

Posted on: 14 January 2003

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 be able to check them. There are some offline solutions available, such as A-Prompt, and Bobby was 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 is 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 are 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 below should help 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 will 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:

    Opera's toggle Author and User mode

Let's look at each of the WCAG guidelines in turn and see what we can do within the browser to see how well we've done. I've chosen to analyse the BBC News site, simply on the basis that it's the one site I visit more than any others.

Image of the BBC news home page
As a 'control', here is a link to an image showing how the BBC site looks with everything enabled.

Guideline 1. Provide equivalent alternatives to auditory and visual content

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

Opera's option to switch off images

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

Opera's toggle images button

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:

Image showing how Opera displays in place of images if they are suppressed

Take a look at the BBC news site with all images suppressed for a clearer example - the question you would 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 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 do this. So, if you are using spacer pixels and such like, these should not be showing up as [Image] if you include that empty alt.

How SitePoint looks with Images suppressed in Opera 6
See how SitePoint's front page looks with images suppressed

Guideline 2. Don't rely on color alone.

Not everyone has the same level of colour perception, and as such if you use colour to suggest meaning you can get into difficulties. For examples, perhaps you had this great idea that normally links would be green, but for really important links these 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

Opera's option to suppress fonts and colours specified for the page

Example (links):

This is an important link

This is a less important link


Links without colour information, demonstrates need for not relying on colour to convey information

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

A document should be written such that the structure and presentation of that document are separated. 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> and 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 this. 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 by doing the following:

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

Opera's Preferences ssection for enabling and disabling the defined 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
Take a look at a completely style sheet-driven site for comparison (example is

Guideline 4. Clarify natural language usage

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

For many blind users, tables can cause real problems - both tables that are used for layout purposes and also 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 in a screen reader (or when 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. However, if you have Opera to hand you need just do the following:

File > Preferences > Page Style > Author mode > Tables

Opera's preferences section for disabling - or linearizing - 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.

See how the BBC's site looks with tables linearized.

Guideline 6. Ensure that pages featuring new technologies transform gracefully

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 is using a browser that does not support it). It happens, perhaps as a heavy-handed way to stop annoying pop-up windows. Who knows - all you need to know 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 ...

Opera's quick preferences tab - showing option to enable JavaScript

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 then see how well your site/page behaves.

View the BBC site with JavaScript disabled (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 > Mulrimedia > Media Types

Opera's Media Types options

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

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):

Using Quick Preferences to get control over timed elements on a page

Guideline 8. Ensure direct accessibility of embedded user interfaces

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

Similar to guideline number 3, 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 indepenence. If your code is 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 which you can do 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

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):

Opera's Quick preferences option to refuse pop-up menus

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

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

Guideline 12. Provide context and orientation information

Guideline 13. Provide clear navigation mechanisms

Guideline 14. Ensure that documents are clear and simple


Opera has a multitude of options to customize how 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 of checking the development of a page template for a site, for example, while you are 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.

This article was written by Ian Lloyd. Ian works as a senior web designer at Nationwide Building Society where they take the matter of accessibility very seriously. Outside of work, he enjoys a spot of scuba diving and travelling.