Welcome to CityLights! [Annotated Inaccessible Template Page]

Inaccessible Template Page Before and After Demonstration

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

Title

[Tagline]

[News Content]

[Content here]

[Intro]
READ MORE 08

[Intro]
READ MORE 09

Annotations

Note 01: Page title and layout causes confusion

This and all other pages are identified as "Welcome to Citylights!" using the title element so that it is unclear for some readers on which page they are on. The page layout also uses deeply nested table elements (up to 5 levels alone for the template) that can cause confusion and disorientation to some readers.

<title>Welcome to Citylights!</title>

Note: Errors 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: Failure 25: Failure of Success Criterion 2.4.2 due to the title of a Web page not identifying the contents

Back to demo

Note 02: Image with incorrect text alternative

The text alternative for this image of text is overly verbose and does not serve the equivalent purpose of the image. The text alternative is as follows:

<img src="top_logo.gif" alt="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." ... >

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

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)

Back to demo

Note 03: Automatic page redirect on change

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: Errors on the template are propagated throughout the entire website.

Success Criterion 2.4.1 - Keyboard: Failure 54: Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event handlers (including gesture) for a function
Success Criterion 3.2.2 - On Input: Failure 36: Failure of Success Criterion 3.2.2 due to automatically submitting a form and presenting new content without prior warning when the last field in the form is given a value

Back to demo

Note 04: Script not compatible with some tools

The script uses document.write() technique which should be avoided. Content inserted that way into a page is not included in the Document Object Model (DOM) and may not be properly communicated to the accessibility APIs used by some assistive technology.

document.write(today);

Note: Errors 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 05: No mechanisms to bypass repeated content

The page does not offer mechanisms to bypass the header and navigation blocks which are repeated on each page. Such skip-links make website use more effective for some readers and keyboard users.

Note: Errors 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 06: Headings not marked up as such

The template suggests styling for headings without use of the corresponding markup within the HTML code.

<p class="headline">Template</p>

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

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 07: Images without any text alternative

The items in the left navigation menues are images that do not have any text alternative, so that it is unclear to some readers what the links correspond to.

<a href="..." ... ><img src="..." ... >

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

Success Criterion 1.1.1 - Non-text Content: Failure 65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute on img elements, area elements, and input elements of type "image"

Back to demo

Note 08: Page components not focusable

The is automatically removed from the menu items using scripting, so that some users cannot navigate to these items.

<a href="..." onfocus="blur();" ... >

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

Success Criterion 2.1.1 - Keyboard: Failure 55: Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received
Success Criterion 2.4.7 - Focus Visible: Failure 55: Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received
Success Criterion 3.2.1 - On Focus: Failure 55: Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received

Back to demo

Note 09: Link text not descriptive and not visually distinct

The template suggests use of the link text "Read more...", which is not descriptive to convey the purpose of the link. It also uses color that is similar to the surrounding text making it hard for some users to identify the link.

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

Success Criterion 1.4.1 - Use of Color

Failure 73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision
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)

Failure 63: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link

Success Criterion 2.4.9 - Link Purpose (Link Only)

Failure 84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.

Guideline 3.1 - Readable

Advisory Technique: Making links visually distinct (future link)

Back to demo

Note 10: 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;"}

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

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

Inaccessible Template Page - Before and After Demonstration

Annotations

Note 01: Page title and layout causes confusion

Note 02: Image with incorrect text alternative

Note 03: Automatic page redirect on change

Note 04: Script not compatible with some tools

Note 05: No mechanisms to bypass repeated content

Note 06: Headings not marked up as such

Note 07: Images without any text alternative

Note 08: Page components not focusable

Note 09: Link text not descriptive and not visually distinct

Note 10: Insufficient color contrast