Accessible Tickets Page Before and After Demonstration

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

Citylights Ticket Offers

Citylights in partnership with globo enterprises are proud to offer specially priced tickets to see these great artists - Les Garçons & The Obelisks

These special deals 03 are exclusive to Citylights and can only be purchased by calling the ticket hotline.

Buy tickets by phoning the Music line -- get your tickets now!: (1) 269 68742 / (1) 269 M-U-S-I-C 04

Concert Dates
Date	Event
12 Feb 09	Les Garçons
24 Mar 09	The Obelisks

Ticket prices for the Les Garçons and The Obelisks concerts
Adult	Front Seats 06	Rear Seats	Dress Circle	Special Tables
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 Music line -- get your tickets now!: (1) 269 68742 / (1) 269 M-U-S-I-C

Citylights Terms and Conditions

You agree through the act of calling the M-U-S-I-C Line or by reading any part of these terms and conditions that you will not, now or ever, (a) transmit any material to any person, living or dead, that may be deemed by that person to be defamatory, harmful, unlawful, argumentative or confusing, and that furthermore (b) any resemblance between yourself or your family and any persons, vegetables or musical instruments living, dead or other featured on the Citylights website is entirely unintentional and that where such a resemblance may occur that you will take immediate action to prevent such resemblance reoccurring.
Citylights shall not be liable to you for any damages or loss of revenue, goodwill, enthusiasm or skin tone arising out of or in connection with any use or other interaction with (a) the Citylights websites, (b) reviews of the Citylights website, (c) any employees or potential employees of Citylights past or present or (d) any website linking to or linked from the Citylights website, whether directly or through other websites.
Remedies: Since Citylights would be irreparably damaged to an unforeseeable degree if Sections [1] and [2] were not specifically enforced, Citylights will be entitled without bond, other security or proof of damages, to appropriate equitable remedies with respect to breaches of such sections, in addition to any other available remedies.

Annotations

Note 01: Heading marked up as such

The heading "Citylights Ticket Offers" has been marked up using the HTML heading element, and styled visually using CSS.

<h1>Citylights Ticket Offers</h1>

Success Criteria 1.3.1 - Info and Relationships

General Technique 115: Using semantic elements to mark up structure
HTML Technique 42: Using h1-h6 to identify headings

Success Criteria 1.4.5 - Images of Text

SCSS Technique 22: Using CSS to control visual presentation of text

Back to demo

Note 02: Table headers have been marked up as such

The table headers have been marked up using the th elements with scope attributes, as well as with a caption element.

<th scope="col">Date</th>

Note: The summary attribute was not used for this simple table as it would not add useful information.

Success Criterion 1.3.1 - Info and Relationships

General Technique 115: Using semantic elements to mark up structure
General Technique 138: Using semantic markup whenever color cues are used
HTML Technique 63: Using the scope attribute to associate header cells and data cells in data tables
HTML Technique 39: Using caption elements to associate data table captions with data tables

Back to demo

Note 03: Using structure to convey semantic meaning

The text "special deals" is emphasized using the strong element.

<strong>special deals</strong>

Success Criterion 1.3.1 - Info and Relationships: General Technique 115: Using semantic elements to mark up structure

Back to demo

Note 04: 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.

<strong>(1) 269 68742 / (1) 269 M-U-S-I-C</strong>

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 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

Note 05: Table data has been properly structured

The data cells have been associated with the table headings using id and headers attributes, and a summary attribute has been provided to explain the relationships between the cells.

<table width="100%" ... summary="Ticket prices for each concert are indicated by seat allocation; there are separate sets of ticket prices for concessions and groups of 5 or more people"> ... <caption class="head">Ticket prices for the Frank Zappa and Theolonius Mank concerts</caption> ... <th id="c1">Adult</th> <th id="c2"><div>Front Seats</div></th> ... <th id="c6" headers="c1" abbr="Mank">Thelonius Mank - reincarnate</th> <td headers="c1 c2 c6">$20.90</td>

Success Criteria 1.1.1 - Non-text Content

General Technique 94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

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: Seat options are spelt out in full

Seat options are spelt out in full and acronyms are avoided as much as possible.

Success Criteria 3.1.4 - Abbreviations: General Technique 102: Providing the expansion or explanation of an abbreviation
Success Criteria 3.1.5 - Reading Level: Advisory Technique: Using the clearest and simplest language appropriate for the content (future link)

Back to demo

Note 07: Sufficient color contrast to increase readability

Contrast ratio between foreground color (#000000) and background color (#c0c0c0) is with 11.5:1 sufficiently high.

.datahead { background-color: #c0c0c0; } .sfdtable { color: #000000; }

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 08: Text is marked up semantically and is easier to read

Bolding, italics, underline, fully-justified, all-capitals, and other text decoration is used only where necessary to support readability, and emphasized text is marked up semantically using the corresponding HTML elements.

<h2>Citylights Terms and Conditions</h2> <ol> <li>You agree through the act of calling ...

Success criteria 1.3.1 - Info and Relationships

General Technique 115: Using semantic elements to mark up structure
HTML Technique 42: Using h1-h6 to identify headings
HTML Technique 48: Using ol, ul and dl for lists

Success criteria 1.4.8 - Visual Presentation

CSS Technique 19: Specifying alignment either to the left OR right in CSS
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

Accessible Tickets Page - Before and After Demonstration

Citylights Terms and Conditions

Annotations

Note 01: Heading marked up as such

Note 02: Table headers have been marked up as such

Note 03: Using structure to convey semantic meaning

Note 04: Phone number provided as text

Note 05: Table data has been properly structured

Note 06: Seat options are spelt out in full

Note 07: Sufficient color contrast to increase readability

Note 08: Text is marked up semantically and is easier to read