By: Trenton Moss

June 24th, 2004

Reader Rating: 8.5

Web accessibility [1] is about making your Website accessible to all Internet users (both disabled and non-disabled), regardless of what browsing technology they're using.

More and more countries have passed laws [2] stating that Websites must be accessible to blind and disabled people. With this kind of legal pressure, and the many benefits of accessibility [3], the big players on the Web must surely have accessible Websites, right?

Let's find out...

Incorrectly Assigned ALT Text

Guilty party: Amazon [4]

Screen readers, in-car browsers and users who are connected through slow dial-up connections and turn off images rely on ALT text in place of images. There are two types of images: informational and decorative. Informational images should have an ALT description that adequately describes the image. Decorative images, on the other hand, should have ALT="" assigned to them. By assigning this null value, browsers simply ignore the image.

The majority of images on Amazon don't have any ALT text -- quite extraordinary, considering how non-time-consuming it is to assign it. Even more bizarrely, some informational images, such as the Amazon logo, have been assigned ALT="".

Non-resizable Text

Guilty party: CNN [5]

To take full advantage of the Internet, users with partial or poor sight need to be able to enlarge the text on Web pages (read how to resize text [6] if you're not sure). To enable users to do this, you need to specify the font size in terms of %, em or a relative value (small, medium etc.). CNN have specified the body text to be 12px in size.

Text Not Created Through Markup

Guilty party: AOL [7]

If images are used to display text, then the text is obviously not resizable. Additionally, text embedded in images appears pixelated and blurry to users who utilise screen magnifiers. The W3C Priority 2 guidelines [8] (point 3.1) cover this, so, if your Website uses images to display text, it's not AA or AAA accessibility compliant.

Have a look at the screenshot of the AOL homepage below. Aside from the area with the blue background at the bottom, virtually everything you see is created through images -- even their phone number (in the very bottom right of the screenshot)! What if I want to copy and paste that number into my address book?

Inaccessible Forms

Guilty party: Most major sites (except AOL [9])

For forms to be accessible, prompt text should be correctly positioned and assigned to form items. For more on accessible forms, read Build Accessible Online Forms [10].

To check if a textbox is accessible or not, simply click on the text next to it (the prompt text) and a flashing cursor should appear in the box. When you click on the prompt text for a radiobox or a checkbox, the item should become selected.

Invalid HTML

Guilty party: eBay [11]

With so many different browsers and browsing technologies available, invalid HTML code can have really unpredictable results. You can use the very handy W3C HTML validator [12] to check your own HTML.

Link Text Doesn't Make Sense Out of Context

Guilty party: Weather Channel [13]

Blind Internet users often browse Websites by tabbing from one link to the next, so it's important that all link text make sense out of context. 'Click here' and 'more' are two common examples of non-descriptive link text. Descriptive link text also has usability and SEO benefits.

Have a look at this screen shot of the Weather Channel. In addition to the 'Click here' near the centre of the page, none of the links on the far right make any sense out of context. For example, what do 'on your desktop' and 'free trial' actually mean by themselves?

Using HTML to change font size/colour

Guilty party: Google [14]

Web users with special needs may use specific fonts and colours when browsing the Web. They can utilise their own CSS document to override the fonts and colours you specify in your CSS document -- but not those specified in the HTML document. As such, all formatting should be called up through the CSS document, and should not be placed in the HTML document.

Don't do as Google does and use the <font> or <body> tags to change the colour and size of text. Google's <body> tag, for example, looks like this:

<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000>

Tables Used for Layout

Guilty party: Virtually every major site (except ESPN [15])

Tables are structural elements, so any Website that's laid out using tables is automatically ineligible to be W3C AA or AAA accessibility compliant (see point 3.3 of the W3C guidelines [16]).

Using CSS, instead of tables, for layout means your Website will be compatible with all 'future' technologies: handhelds, in-car browsers and WebTV. You can test how your Website looks in a handheld using the Wapalizer [17]; why not download the free WebTV Viewer [18] and test your site on that, too? Using CSS for layout has additional search engine benefits and usually allows for a much quicker download.

Website Relies on JavaScript

Guilty party: Expedia [19]

Approximately 6% of Internet users' browsers don't support JavaScript [20], so alternatives should be provided, for example, with the <noscript> tag.

Turn off JavaScript in your browser, then go to Expedia. It's truly remarkable that a Website as large as Expedia can't function without JavaScript. Click on any of the tabs at the top of the screen and you'll get this:

They couldn't even be bothered to style it like the rest of the site!

Separate 'Accessible' Version

Guilty party: Manchester United [21]

The W3C says you should only resort to a separate accessible version "if all else fails". Separate accessible versions are strongly advised against because:

• They often offer less functionality than the main Website.
• They are usually not kept as up-to-date as the regular site.
• They can be seen as one more way of excluding disabled people from regular society.
• The regular Website may still be inaccessible to non-disabled people.

Man Utd's Website is so bad in terms of accessibility that it could have been named as the guilty party for each of the ten points in this article! Manchester United have completely missed the point here: Web accessibility is all about following design standards and then adding a few simple accessibility features. It's not just about disabled users being able to access your Website -- it's about everyone being able to access your Website, including those who use handheld devices, WebTV and in-car browsers.

And Finally...

All in all, it looks like the big players aren't leading by example when it comes to accessibility. It's surprising, really, as they'll undoubtedly be the first ones to have legal action taken against them should cases start to make it to court.

Come on, guys, sort it out. Web accessibility isn't rocket science. Any Web developer with basic HTML and CSS design knowledge, and a little of time on their hands, can easily learn and implement Web accessibility.

[1] http://www.sitepoint.com/article/accessible-web-design
[2] http://www.uiaccess.com/
[3] http://www.sitepoint.com/article/sell-web-accessibility
[4] http://www.amazon.com/
[5] http://www.cnn.com/
[6] http://www2.tec.govt.nz/home/
[7] http://www.aol.com/
[8] http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html
[9] http://www.aol.com/
[10] http://www.sitepoint.com/article/accessible-online-forms
[11] http://www.ebay.com/
[12] http://validator.w3.org/
[13] http://www.weather.com/
[14] http://www.google.com/
[15] http://www.espn.com/
[16] http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html
[17] http://www.gelon.net/
[18] http://developer.msntv.com/TOOLS/webtvvwr.asp
[19] http://www.expedia.com/
[20] http://www.thecounter.com/stats/2004/March/javas.php
[21] http://www.manutd.com/