W3C logoWeb Accessibility Initiative (WAI) logo

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


Note 01: Text alternative matches the graphical text

The text alternative for this image of text contains the words that are displayed in the image.

<img src="../../img/after/toplogo.png" alt="Citylights: your access to the city.">

Success Criterion 1.1.1 - Non-text Content
HTML technique 37: Using alt attributes on img elements

Back to demo

Note 02: Picture with text alternative

This picture of the "Free Penguins" band is considered informative, so a text alternative has been provided to briefly describe the image.

<img src="../../img/after/teaser_right1.jpg" alt="Free Penguins playing on stage">

Success Criterion 1.1.1 - Non-text Content
HTML technique 37: Using alt attributes on img elements

Back to demo

Note 03: Links highlighted when they receive focus

These links (also headings of the news items) are highlighted when they are selected using the keyboard or hovered over using the mouse.

.news h2 a {color: #000; text-decoration: none; display: block;}
.news h2 a:hover {color: #ba2710; background-image: none;}
.news h2 a:focus {color: #ba2710}

Success Criteria 2.4.7 - Focus Visible
  • Highlighting a link or control when the mouse hovers over it (future link)
  • Providing a highly visible highlighting mechanism for links or controls when they receive keyboard focus (future link)

Back to demo

Note 04: Image with 'null' text alternative

This image is displayed for decorative purposes only, and thus has an empty (null) text alternative.

<img src="../../img/after/BrainInJar.jpg" alt="">

Note: The images are displayed using the img element rather than CSS to make it easier to add text alternatives for images that are considered informative.

Success Criterion 1.1.1 - Non-text Content
HTML technique 67: Using null alt text and no title attribute on img elements for images that AT should ignore

Back to demo

Note 05: Link text indicates the link purpose

Link text uses "buy tickets" rather than "click here" or "read more" to better indicate the purpose of the link.

<a href="../tickets/annotations" class="more">Buy Tickets</a>

Success Criterion 2.4.4 - Link Purpose (In Context)
Success Criterion 2.4.9 - Link Purpose (Link Only)

Back to demo

Note 06: Using CSS rather than tables for layout

The news items are presented using CSS rather than table layout.

<div class="news "><h2><a href="../news/#story3">Man Gets Nine Months in Violin Case</a></h2><p class="image"><img src="../../img/after/violin.jpg" alt=""></p><p>Mayor: These kinds of crimes need more creative, effective punishments. For example, we could require...<br /><a href="../news/#story3" class="more">Violin case -<br />full story</a></p></div>

Success Criterion 1.3.1 - Info and Relationships
  • General technique 140: Separating information and structure from presentation to enable different presentations
  • Using CSS rather than tables for page layout (future link)

Back to demo

Note 07: Links with distinctive appearance

Links have a distinctive appearance using color and non-color cues (underline).

<a href="../../offsite.html">Killer Bees</a>

Success Criterion 1.4.8 - Visual Presentation
Advisory Technique: Making links visually distinct (future link)

Back to demo

Note 08: List marked up as such

This list is marked up using an HTML list structure.

<ul class="elsewhere"><li><a href="../../offsite.html">Killer Bees</a></li><li><a href="../../offsite.html">Onions</a></li></ul>

Success Criteria 1.3.1 - Info and Relationships

Back to demo

Note 09: List bullet displayed using CSS

The decorative list bullet is displayed using CSS rather than the img element with an empty (null) text alternative.

li a {background: url(../img/after/list_bullets.png) no-repeat top left; .... }

Success Criteria 1.1.1 (Non-text Content)m
CSS technique 9: Using CSS to include decorative images

Back to demo

Note 10: Phone number provided as text

The phone number for the Artichoke Advice Line is provided as text (in two formats - as numbers and as letters) rather than as an image.

<p><strong>Artichoke advice telephone hotline:<br />(1) 269 24653 / (1) 269 C-H-O-K-E</strong></p>

Success Criterion 1.4.4 - Resize Text
Advisory Technique: Avoiding the use of text in raster images (future link)
Success Criteria 1.4.5 - Images of Text
CSS technique 22: Using CSS to control visual presentation of text
Success Criteria 1.4.8 - Visual Presentation
Advisory technique: Avoiding the use of text in raster images (future link)

Back to demo