This page uses scripts!!!

W3C logoWeb Accessibility Initiative (WAI) logo

Annotated Inaccessible Home Page Before and After Demonstration

Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0

Demo starts here

  Traffic: Construction work on Main Road Today:
 

Welcome to CityLights

Citylights is the new portal for visitors and residents. Find out what's on, book tickets, and get the latest news.

After three years of effort city scientists now agree that the primary cause of the 2003 heatwave was hot air from our 07
06Mayor: These kinds of crimes need more creative, effective punishments. For example, we could require compulsory
Brain donations: huge drop off in brain donations due to the great 'success' of 'Slow Traffic, Safe Streets' policy

Elsewhere on the Web

 Free Penguins
 
 More City Parks
More parks and more green throughout the city at the price of already rare car parking spaces, how will this affect you?
Read More...
Copyright © 2012 W3C® (MIT, ERCIM, Keio)

Annotations

Note 01: Image with incorrect text alternative

The text alternative for this image of text is overly verbose and does not serve the equivalent purpose of the image. The text alternative is as follows:

<img src="top_logo.gif" alt="Red dot with a white letter 'C' that symbolizes a moon crescent as well as the sun. This logo is followed by a black banner that says 'CITYLIGHTS' which is the name of this online portal. Finally, the slogan of the portal, 'your access to the city', follows in a turquoise green handwriting style and with a slight slant across the top banner." ... >

Note: This error is derived from the Template design and occurs throughout the entire website.

Success Criterion 1.1.1 - Non-text Content
Failure 30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g. filenames or placeholder text)

Back to demo

Note 02: Image without any text alternative

This image does not have any text alternative, so that it is unclear to some reasers if the image is important or not.

<img src="teaser_right1.jpg" ... >

Note: Every img element should have an alt attribute. The attribute should be empty if the image should be ignored by assistive technology.

Success Criterion 1.1.1 - Non-text Content
Failure 65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute on img elements, area elements, and input elements of type "image"

Back to demo

Note 03: Link not visually distinct

The link "heat wave linked to temperature" is not sufficiently distinct because it resembles a heading, and will not be recognized as a link by many readers.

Success Criterion 1.4.8 - Visual Presentation
Advisory Technique: Making links visually distinct (future link)
Guideline 2.4 - Navigable
Advisory Technique: Making links visually distinct (future link)
Guideline 3.1 - Readable
Advisory Technique: Making links visually distinct (future link)

Back to demo

Note 04: Image with inadequate text alternative

The text alternative for this image is provided in the title attribute alone, which is not usable for many readers. Moreover, the text alternative "image" does not describe the image.

<div style="background: url(BrainInJar.jpg)" title="image" ... >

Note: The techniques for retrofitting this image differ depending if the author regards this image as purely decorative or as informative.

Success Criterion 1.1.1 - Non-text Content
  • Failure 3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information
  • Failure 30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g. filenames or placeholder text)

Back to demo

Note 05: Link text is not descriptive

The link text "Read more..." is not descriptive to convey the purpose of the link.

Success Criterion 2.4.4 - Link Purpose (In Context)
Failure 63: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link
Success Criterion 2.4.9 - Link Purpose (Link Only)
Failure 84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.

Back to demo

Note 06: Reading sequence not meaningful

These three columns of text appear to be visually distinct but according to the markup code they appear as one piece of running text. They would read as follows:

"After three years of effort city scientists now agree that the primary cause of the 2003 heatwave was hot air from our Mayor: These kinds of crimes need more creative, effective punishments. For example, we could require compulsory Brain donations: huge drop off in brain donations down due to the 'success' of 'Slow Traffic, Safe Streets' policy"

Success Criterion 1.3.1 - Info and Relationships
Failure 2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text
Success Criterion 1.3.2 - Meaningful Sequence
  • Failure 1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS
  • Failure 49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized

Back to demo

Note 07: Link with image has empty text alternative

This image has an empty text alternative but it is the only content in the link, so that the purpose of the link is unclear to some users.

<a href="news.html" ... ><img src="morearrow.gif" alt="" ... ></a>

Success Criterion 2.4.4 - Link Purpose (In Context)
Failure 89: Failure of 2.4.4, 2.4.9 and 4.1.2 due to using null alt on an image where the image is the only content in a link
Success Criterion 2.4.9 - Link Purpose (Link Only)
Failure 89: Failure of 2.4.4, 2.4.9 and 4.1.2 due to using null alt on an image where the image is the only content in a link
Success Criterion 4.1.2 - Name, Role, Value
Failure 89: Failure of 2.4.4, 2.4.9 and 4.1.2 due to using null alt on an image where the image is the only content in a link

Back to demo

Note 08: Decorative image without empty text alternative

This image has the text alternative "bullet", which does not provide any useful information. The image should have an empty text alternative to indicate that it is a decorative image that should be ignored by assistive technology.

<img src="list_bullets.gif" alt="bullet" ... >

Note: The image can also be dispayed using CSS rather than the img element.

Success Criterion 1.1.1 - Non-text Content
Failure 39: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g. alt="spacer" or alt="image") for images that should be ignored by assistive technology

Back to demo

Note 09: List not marked up as such

The items "Killer bees" and "Onions" are formatted to visually resemble a list but this structural information is not represented in the HTML code.

Success Criterion 1.3.1 - Info and Relationships
Failure 2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text

Back to demo

Note 10: Image with incorrect text alternative

This image has an incorrect text alternative, "1234 56789"; possibly because the text alternative is outdated or a placeholder.

<img src="telefon_white_bg.gif" alt="1234 56789" ... >

Success Criterion 1.1.1 - Non-text Content
  • Failure 20: Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur
  • Failure 30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g. filenames or placeholder text)
  • Failure 71: Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative

Back to demo