Demo starts here

• Skip to content (within demo page)
• Skip to navigation (within demo page)

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