This page uses scripts!!!

W3C logoWeb Accessibility Initiative (WAI) logo

Annotated Inaccessible Tickets 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 in partnership with globo enterprises are proud to offer specially priced tickets to see these great artists - Les Garçons & The Obelisks

Buy tickets by phoning the M-u-s-i-c line ---- get your tickets now!: 

 

ADULT FS RS DC ST
Obelisks - Monkey, Monkey $20.90 $20.90 $20.90 $20.90
Les Garçons de la Plage $20.90 $27.90 $30.90 $33.90
Concession
Obelisks - Monkey, Monkey $20.90 $20.90 $20.90 $20.90
Les Garçons de la Plage $20.90 $27.90 $30.90 $33.90
Group (5 or more)
Obelisks - Monkey, Monkey $14.90 $14.90 $14.90 $14.90
Les Garçons de la Plage $14.90 $20.90 $22.90 $23.90
Buy tickets by phoning the M-u-s-i-c line ---- get your tickets now!: 
music line phone number
Citylights Terms and Conditions

 

Copyright © 2012 W3C® (MIT, ERCIM, Keio)

Annotations

Note 01: Image of text without text alternative used as a heading

This is an image of text that visually looks like a heading but is not marked up as a heading. It also does not have a text alternative.

<p style="padding-top:5px;"><img src="../img/headline_ticket_offers.gif" border="0"></p>

Note: It is more preferable to present text that is styled visually with CSS rather than images of text.

Success Criteria 1.1.1 - Non-text Content
Failure 71: Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative
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
  • HTML 42: Using h1-h6 to identify headings
Success Criteria 1.4.1 - Resize Text
Advisory Technique: Avoiding the use of text in raster images (future link)
Success Criterion 1.4.5 - Images of Text
Sufficient Technique C22: Using CSS to control visual presentation of text

Back to demo

Note 02: Table column headings not marked up

Table headings are indicated by the colored background but have not been marked up semantically using the th element. Also, the table title has not been associated with the table.

<td><b><font color="41545D">Frank Zappa</font ></b></td>

Success Criterion 1.3.1 - Info and Relationships
  • Failure 43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content
  • 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 03: Using CSS to convey semantic meaning

The "special deals" text has been made bold visually using CSS rather than semantically using the strong element.

<big style="font-weight:bold;">special deals</big>

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

The text alternative for this image does not provide the phone number "(1) 269 M-U-S-I-C" that is displayed graphically.

<img src="../img/telefon_lightgrey_bg.gif" alt="music line phone number" border="0" valign="absmiddle">

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)
Success Criterion 1.4.4 - Resize Text
Advisory Technique: Avoiding the use of text in raster images (future link)
Success Criterion 1.4.5 - Images of Text
CSS Technique22: Using CSS to control visual presentation of text

Back to demo

Note 05: Data table without semantic structure

Table is not identified using the caption element, and the header cells are not marked up or associated with the data cells.

<table ...>
<tr>
<td><b>ADULT</b></td>
<td><b>FS</b></td>
<td><b>RS</b></td>
<td><b>DC</b></td>
<td><b>ST</b></td>
</tr>
<tr>
<td><b>Thelonius Mank - reincarnate</b></td>
<td><b>$20.90</b></td>
<td><b>$20.90</b></td>
<td><b>$20.90</b></td>
<td><b>$20.90</b></td>
</tr>

Success Criteria 1.3.1 - Info and Relationships
  • HTML Technique 51: Using table markup to present tabular information
  • HTML Technique 39: Using caption elements to associate data table captions with data tables
  • HTML Technique 73: Using the summary attribute of the table element to give an overview of data tables
  • HTML Technique 43: Using id and headers attributes to associate data cells with header cells in data tables

Back to demo

Note 06: Insufficient color contrast

Contrast ratio between foreground color (#41545D) and background color (#A9B8BF) is too low for some people to differentiate.

{color:#41545D; background-color:#A9B8BF;"}

Success Criteria - 1.4.3 - Contrast (Minimum)
General Technique 18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
Success Criteria - 1.4.6 - Contrast (Enhanced)
General Technique 17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text

Back to demo

Note 07: Acronyms used to indicate seat options are not explained

The acronyms "FS", "RS", "DC", and "ST" used to indicate seat options are not expanded or otherwise explained.

<td><b>FS</b></td>

Success Criteria 3.1.4 - Abbreviations
General Technique 102: Providing the expansion or explanation of an abbreviation

Back to demo

Note 08: No semantic markup and text is hard to read

Heading is not marked up as such, list is not marked up as such, and text is hard to read due to full justification, use of all-capitals, use of underlining, and tight line-spacing (leading).

<p id="terms" class="annot_link_parent" align="justify"><b><div style="text-align: center;"><font size="4">Citylights Terms and Conditions</font></div><br><br>[1] You agree through the act of calling ... etc

Success criteria 1.3.1 - Info and Relationships
Success criteria 1.4.8 - Visual Presentation
  • Failure 88: Failure of SC 1.4.8 due to using text that is justified (aligned to both the left and the right margins)
  • CSS Technique 21: Specifying line spacing in CSS
  • Advisory Technique: Using upper and lower case according to the spelling conventions of the text language (future link)
Guideline 3.1 - Readable
  • Advisory Technique: Avoiding centrally aligned text (future link)
  • Advisory Technique: Avoiding text that is fully justified (to both left and right margins) in a way that causes poor spacing between words or characters (future link)
  • Advisory Technique: Using left-justified text for languages that are written left to right and right-justified text for languages that are written right-to-left (future link)
  • Advisory Technique: Avoiding overuse of different styles on individual pages and in sites (future link)
  • Advisory Technique: Using upper and lower case according to the spelling rules of the text language (future link)

Back to demo