W3C logoWeb Accessibility Initiative (WAI) logo

Annotated Accessible News 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: Wednesday 25 January 2012, Sunny Spells, 23°C

Citylights News

Tough Wahoonie


Annotations

Note 01: Increased spacing

Column spacing is increased to make reading easier.

#content p { padding: 0 10px; margin: 0 0 0.618em; line-height: 130%; }

Success Criterion 1.4.4 - Resize text
Advisory Technique: Providing sufficient inter-line and inter-column spacing (future link)
Success Criterion 1.4.8 - Visual Presentation
Advisory Technique: Providing sufficient inter-column spacing (future link)

Back to demo

Note 02: Page organized using headings

The heading "Heat wave linked to temperatures" has been marked up using the HTML heading element, to add structure to the page.

<h2 id="story1">Heat wave linked to temperatures</h2>

Success Criterion 1.3.1 - Info and Relationships

Back to demo

Note 03: Font easier to read

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

body { font-family: "Lucida Grande", Lucida, Verdana, sans-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 04: Meaningful reading sequence

The section "Your Shout" appears below and as part of the "Man Gets Nine Months in Violin Case" article, both visually as well as within the HTML code.

Success Criterion 1.3.2 - Meaningful Sequence

Back to demo

Note 05: Text alternative describes link purpose

This linked image has a text alternative that describes the purpose of the link rather than to describe the image.

<a href="..." ...><img src="smzappa2.jpg" alt="Clara F.'s website" ... / ></a>

Note: The signature "Clara F., 15 months" has been made into a link too, because some readers may not realize that this image is linked.

Success Criterion 1.1.1 - Non-text Content
General 94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

Back to demo

Note 06: Link visually distinct

The link "the way that air conditioning works" has sufficient color contrast and is underlined to make it sufficiently distinct from the surrounding text.

a { color: #ba2710; } #content a { text-decoration: underline }

Success Criterion 1.4.1 - Use of Color
  • General 182: Ensuring that additional visual cues are available when text color differences are used to convey information
  • 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 marked up as such

The text "but also hot air that's ducted away to the outside" is emphasized using the em element.

<em>but also hot air that's ducted away to the outside</em>

Success Criterion 1.3.1 - Info and Relationships
Technique G115 - Using semantic elements to mark up structure AND Technique H49 - Using semantic markup to mark emphasized or special text

Back to demo

Note 08: Valid markup

The heading "Return to Sender" is formatted using the appropriate and valid markup code.

<h3>Return To Sender</h3>

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

Guideline 4.1 - Compatible
  • Technique G134 - Validating Web pages
  • Technique G192 - Fully conforming to specifications
  • Advisory Technique: Avoiding deprecated features of W3C technologies (future link)

Back to demo

Note 09: Illustrative diagram representation

This diagram has an appropriate text alternative and provides a useful illustratation to clarify a meaning.

<img src="chart1.jpg" alt="Brain Donations for May:13, June:13, July:12, August:8, September:7" ... / >

Success Criterion 1.1.1 - Non-text Content
General 94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
Guideline 3.1 - Readable
Advisory Technique: Using images, illustrations, video, audio, or symbols to clarify meaning (future link)

Back to demo

Note 10: Image with appropriate text alternative

This picture of Mrs B. Wahoonie has been considered informative, so text alternative has been provided to briefly describe the image.

<img src="blanca.jpg" alt="Mrs B. Wahoonie in front of a canyon" width="240" >

Note: The additional information "Mrs B. Wahoonie investigates shipping hot air to Australia" that was previously used to describe the image is now made available to all readers.

Success Criterion 1.1.1 - Non-text Content
General 94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

Back to demo