W3C logoWeb Accessibility Initiative (WAI) logo

Annotated Accessible Template Page Before and After Demonstration

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

Annotations

Note 01: Page titled and layout using CSS

The pages is uniquely identified using the title element so that readers know on which page they are on. Also the page layout is organized using CSS rather than with table elements, which helps maintain a reading order that matches the visual presentation.

Note: Improvements on the template are propagated throughout the entire website.

<title>Citylights Template</title>

Note: Improvements on the template are propagated throughout the entire website.

Success Criterion 1.3.1 - Info and Relationships
Advisory Technique: Using CSS rather than tables for page layout (future link)
Success Criterion 2.4.2 - Page Titled

Back to demo

Note 02: Skip-links to bypass repeated content

Skip-links are provided to bypass the header and navigation blocks which are repeated on each page. This makes website use more effective for some readers and keyboard users. Skip-links appear when they are actived via the keyboard though ideally they are presented for all users.

Note: Improvements on the template are propagated throughout the entire website.

Success Criterion 2.4.1 - Bypass Blocks
  • General Technique 1: Adding a link at the top of each page that goes directly to the main content area
  • Advisory Technique: Providing skip links to enhance page navigation (future link)

Back to demo

Note 03: Page redirect initiated by the user

Selecting an item from the drop-down menu automatically redirects the user to another page. This is confusing and disorienting to some users, especially keyboard users who are trying to move from one item to the next rather than actively selecting an item.

<select onchange="...">

Note: Improvements on the template are propagated throughout the entire website.

Success Criterion 2.4.1 - Keyboard
Scripting Technique 35: Making actions keyboard accessible by using the onclick event of anchors and buttons
Success Criterion 3.2.2 - On Input

Back to demo

Note 04: Image with succinct text alternative

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

Note: Improvements on the template are propagated throughout the entire website.

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

Back to demo

Note 05: Script not compatible with some tools

The script creates a new Document Object Model (DOM) node and uses document.innerHTML to add the content. There is also a redundant server-side script that inserts default content, in case JavaScript is not activated. This is not a requirement but good practice where possible.

var tochange = document.createElement("span"); tochange.innerHTML = today;

Note: Improvements on the template are propagated throughout the entire website.

Guideline 4.1 - Compatible
Advisory Technique: Not displaying content that relies on technologies that are not accessibility-supported when the technology is turned off or not supported

Back to demo

Note 06: Navigation menu marked up as a list

The left navigation menu is marked up as a list, and each navigation link is a list item.

<ul>
...
<li class="news"><a href="../news/annotations">News</a></li>
...
</ul>

Note: Improvements on the template are propagated throughout the entire website.

Success Criteria 1.3.1 - Info and Relationships

Back to demo

Note 07: Headings marked up as such

The template suggests styling for headings using the corresponding markup within the HTML code.

<h1>Template</h1>

Note: Improvements on the template are propagated throughout the entire website.

Success Criterion 1.3.1 - Info and Relationships

Back to demo

Note 08: Menu items styled using CSS

The menu items are text that is styled visually using CSS rather than images of text and JavaScript for decorative effects. Particular care has been taken to maximize the clickable area.

<li class="news"><a href="../news/annotations">News</a></li>

Note: Improvements on the template are propagated throughout the entire website.

Success Criteria 1.4.5 - Images of Text
SCSS Technique 22: Using CSS to control visual presentation of text

Back to demo

Note 09: Link text descriptive and visually distinct

The template suggests use of the link text that contains a brief description in addition to "read more...", to make the link text more descriptive and to convey the purpose of the link. It also uses color that is distinct from the surrounding text to make it easier to identify the link.

Note: Improvements on the template are propagated throughout the entire website.

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)
Success Criterion 2.4.4 - Link Purpose (In Context)
Success Criterion 2.4.9 - Link Purpose (Link Only)
Guideline 3.1 - Readable
Advisory Technique: Making links visually distinct (future link)

Back to demo

Note 10: Sufficient color contrast

Contrast ratio between foreground color (#000000) and background color (#c0c0c0) is with 11.5:1 sufficiently high for most people to be able to differentiate.

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

Note: Improvements on the template are propagated throughout the entire website.

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