This page uses scripts!!!

W3C logoWeb Accessibility Initiative (WAI) logo

Annotated Inaccessible News Page Before and After Demonstration

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

Demo starts here

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.
  Traffic: Construction work on Main Road Today:
 

Citylights News

Heat wave linked to temperatures

01

Man Gets Nine Months in Violin Case

02
After three years of effort city scientists now agree that the primary cause of the 2003 heatwave was hot air from our air conditioning units. "The study cost the city taxpayer under 10 million dollars" said Prof. Steve 'Call me Stephen' Wahoonie, of City University Public Expenditure on Science dept. "We had five top statisticians working on it: one to write the grant proposal, one to do the mathematical modelling, two to collaborate on the research paper, and one to hire a student to do the job."
As news of the conviction and sentencing of infamous violin thief Pasquale Ginkgo-Biloba reached city hall, Mayor Auberon 'Slim' Shadi stated that he was furious at the boring sentence handed down by the judge in the case, and is demanding a review of sentencing policy. This is not the first time that judges have come under fire for lenient sentencing in musical-instrument related cases. Last year's trombone forgery debacle also resulted in a formal rebuke from the Mayor.
03

Tough Wahoonie

"We soon realized that we were seeing a rise in temperatures every time a heatwave occurred. Also, the more air conditioning used, the bigger the heatwave. We knew it couldn't just be a coincidence, the match was 100%. Air conditioning was driving temperatures up, which in turn resulted in a heatwave," the Prof. explained. "It all comes from the way that air conditioning works06. Air conditioners produce cold air to go into the room but also hot air that's ducted away to the outside07. We are recommending a new city ordinance restricting use of air conditioning to winter months, when the heat will come in useful."
04

Your Shout
picture of Clara F.05 "Well I think the Mayor's getting all heated up about nothing. Remember that 15 months is pretty much a lifetime to someone like me. But hey, I'm just a baby, and can't even vote, so you can ignore my opinion. And I can tell you that I'm standing for mayor on a ticket of infant suffrage".
 Clara F., 15 months, via email

Lack of Brains Hinders Research

Brain donations at city hospital (by month)
09

Return To Sender

08When questioned whether their results would be affected if air conditioners were found to be used on cold days, Wahoonie responded: "we had one guy in the lab whining those kinds of questions. 'Why are you doing this? Why are there all those discrepencies in the department accounts?', but it was after we had written up the results. We later found that he took 40% of his sick days on Mondays or Fridays. How convenient. Some people have no shame."
Air-Con Fact Finding Mission
Mrs B. Wahoonie investigates shipping hot air to Australia10
There has been a significant drop in brain donations as a result of the successful 'Slow Traffic, Safe Streets' policy, say city doctors.
"Brain donations are essential" said Dr. Liam Colluspid of Central Hospital, at a press conference yesterday. "I must ask that the Mayor either dispenses with these road safety measures, or else that every concerned citizen should consider right now whether there are any brains they aren't making much use of at the moment, that they might like to drop off".
Copyright © 2012 W3C® (MIT, ERCIM, Keio)

Annotations

Note 01: Heading not marked up as such

The heading "Heat wave linked to temperatures" has been styled to look like a heading but has not been marked up as a heading within the HTML code.

<font size="5" color="#FFFFFF"><P class=headline>Heat wave linked to temperatures</P></font>

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 02: Font difficult to read

The text on this page uses serif fonts such as 'Times New Roman' rather than sans-serif fonts such as 'Lucida', which are considered easier to read on-screen.

td { color: #000000; text-decoration: none; font: 15px/17px "Times New Roman", Times, serif; }

Success Criterion 1.4.8 - Visual Presentation
Advisory Technique: Presenting text in sans serif font or providing a mechanism to achieve this (CSS) (future link)

Back to demo

Note 03: Columns too close together

The two main columns of text need more space between them.

<div style="padding: 10px 0px 10px 0px; margin: 0px; ... ">

Success Criterion 1.4.8 - Visual Presentation
Advisory Technique: Providing sufficient inter-column spacing (future link)

Back to demo

Note 04: Reading sequence not meaningful

The section "Your Shout" appears visually below and as part of the "Man Gets Nine Months in Violin Case" article but it only appears after the "Tough Wahoonie" section within the HTML code. Some readers will read this section out of the intended order.

Success Criterion 1.3.2 - Meaningful Sequence
Failure F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS

Back to demo

Note 05: Link purpose unclear

This image is part of a link so its text alternative should describe the link purpose rather than describe the image.

<a href="..." ...><img src="smzappa2.jpg" alt="picture of Clara F." ... / ></a>

Note: This seems to be a stray link that was placed in error or that was there for an earlier image.

Success Criterion 2.4.4 - Link Purpose (In Context)
The link purpose cannot be determined from the link text alone, or from the link text together with its context
Success Criterion 2.4.9 - Link Purpose (Link Only)
The link purpose cannot be identified from the link text alone

Back to demo

Note 06: Link not visually distinct

The link "the way that air conditioning works" is not distinguished from the surrounding text because it has a similar color and there are no other cues (such as underline) to indicate it is a link.

Success Criterion 1.4.1 - Use of Color
  • Failure 73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision
  • General 183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
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 07: Emphasized text not marked up as such

The text "but also hot air that's ducted away to the outside" is styled visually to resemble emphasized text but it is not marked up using the em element.

<span style="font-style: italic;">but also hot air that's ducted away to the outside</span>

Success Criterion 1.3.1 - Info and Relationships
Failure F2: 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 08: Text with deprecated markup

The text "Return to Sender" is formatted using deprecated markup code, such as font element and align attribute, that may not be supported by browsers and assistive technology.

<p ... align="center"><font size="3">Return To Sender</font></p>

Note: See also Note 01: Heading not marked up as such.

Guideline 4.1 - Compatible
Advisory Technique: Avoiding deprecated features of W3C technologies (future link)

Back to demo

Note 09: Diagram representation unclear

This diagram does not have any text alternative and is of very poor quality so that it is unclear what it represents.

<img src="chart1.jpg" alt="" ... / >

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 10: Image with incorrect text alternative

The text alternative for this image provides more information than what is visually conveyed to most readers. This information should be provided to all readers rather than in the text alternative alone.

<img src="blanca.jpg" alt="Mrs B. Wahoonie investigates shipping hot air to Australia" width="240" height="180" border="0">

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