Accessible Websites - a "Win-Win" Situation

The problem : why accessibility is an issue

So, what is the problem with many Websites today ? Why are more and more people talking of Accessibility and Standards ?

Well, the problem is that there are an awful lot of websites out there which do not conform to Web Standards. More specifically, they have been developed so that their content looks fine (is accessible) when viewed on, say, a PC using one or two of the more well-known web browsers such as Internet Explorer or Netscape.

However, when viewed on other browsers, with other access devices, or on other platforms, they may not display correctly, or even worse do not display at all. Their content has become Inaccessible to some section of the target audience.

This is because such websites have not been developed correctly to current web standards, and little attention has been paid to the correct mark-up of their content, structure, and presentation.

For years web authors have decided to "enhance" their pages as if they were using a desktop publisher so that they would look good in a particular browser, say, Microsoft Internet Explorer.

Many of these authors did not realise that their websites would later become illegible, invisible, or generally inaccessible to many viewers. However, this has been known to happen, due to a combination of faulty implementation in popular browsers and less than careful attention to the correct use of the mark-up language.

A prime example in case is the overly popular use of the HTML tag, e.g.

Imagine a web author has liberally inserted the tag in her pages in the hope that others will see what she sees on her Macintosh. She has done this at the top of every page in a bold blue font to make the headings stand out. This is fine for those viewers using the same browser and version number on another Mac, but what about someone using a different browser, on a different platform, or someone using a text-only browser ?

Specifying color to emphasise a specific bit of text might be seen by many as a good thing; but use of the tag overrides both the documents and the user’s choice in colors. If the user has decided to set their colours to white text on a blue background (to provide high contrast for instance), the above example may produce text that is effectively invisible.

In many browsers versions and implementations, support for the FONT element has been broken, inconsistent, or known to be prone to unpredictable results.

Using HTML formatting tags such as , instead of other structural tags that give semantic meaning to a document (the <H1> heading tags and the <BIG> and tags), means some viewers lose structural cues, so the page’s overall accessibility decreases.

Such very popular use (misuse ?!) of the font tag has become a hindrance to pages all over the Web because it makes too many assumptions about the user’s browser, system and configuration, and allows less flexibility in the way web pages are presented.

The font element was also deprecated (made outdated) in HTML 4.01, and deprecated elements may become obsolete and unsupported in future versions of HTML, so web sites developed using these techniques are not guaranteed to work correctly in the future.

Another good example is the well used trick of using tables to layout web sites. Many website have overly complicated, intricate nested tables within tables to achieve a reasonable looking design. Often these are used along with ‘invisible’ images called ‘spacer gifs’ (with no blank ALT tag set - which will trigger an image ‘announcement’ in some screen readers) to pad out spaces and achieve the correct layout.

The problem with this is that when these pages are accessed or viewed by assistive technologies such as Text-only browsers, screen readers, or other devices, they tend to be ‘linearised’ (processed in one long line) from top–left to bottom–right. Instead of text being read ‘downwards’ in a column as the author intender, the content may be read 'across' the table cells on the page - mixing up sentences that are adjacent to one another.

Many usability and accessibility problems stem from the translation of such graphical web pages with complex layouts into a non graphical linear version. Information flow which relied on the position of one page element or piece of text, in relation to another, can be lost when the page is linearised. All that ends up being presented to some users is a soup of mixed up words and image ‘announcements’, with no meaningful separation or logical grouping of page elements and text.

Web sites designed using techniques like those mentioned above can also quickly become large, complex monsters that are hard to change and maintain. They tend to develop ‘bloated’ pages that are full of lots of presentational mark-up code, which in turn uses more bandwidth and causes pages to both download and render (display) more slowly in web browsers.

As a final example problem, consider web sites that use images to represent text, because the author could not find a font that they liked, so they created their own graphic element to make the page look ‘nice’.

If the alternative text attribute of the image is not set, or no text equivalent is provided, users whose browsers do not support images will be alerted to its existence, but will not know what purpose it serves - which is frustrating.

On other websites, images are frequently used as links; for instance, a small picture of a product such as a radio, which when clicked on moves to a more detailed information page. The alternative link text for the image might only say "click here" - which is of little or no use to a blind person who cannot see the image of the radio; they have NO IDEA what product the "click here" relates to !

As the World Wide Web Consortium (W3C) has put it :-

"Content developers may be tempted to use (or misuse) constructs that achieve a desired formatting effect on older browsers. They must be aware that these practices cause accessibility problems and must consider whether the formatting effect is so critical as to warrant making the document inaccessible to some users."

and also :-

"Using markup improperly -- not according to specification -- hinders accessibility. Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for users with specialized software to understand the organization of the page or to navigate through it. Furthermore, using presentation markup rather than structural markup to convey structure (e.g., constructing what looks like a table of data with an HTML PRE element) makes it difficult to render a page intelligibly to other devices (refer to the description of difference between content, structure, and presentation)."

Next » The solution : Developing Websites using Web Standards

Back « Table of Contents

Top of page