This is an outdated draft. The latest version is available at http://www.w3.org/WAI/demos/bad/.

Overview This is a sample Evaluation Report as part of the Before and After Demonstration. See:
[ About the Demo | Accessibility Barriers | Inaccessible Site | Accessible Site]


[DRAFT] Web Accessibility Evaluation Report for Citylights

This evaluation was carried out by Education and Outreach Working Group (EOWG) on 28 January, 2006.

Contents

Overview

  1. 1. Introduction
  2. 2. Executive Summary
  3. 3. About the Review Process
  4. 4. Conformance to WCAG 1.0
  5. 5. Detailed Evaluation Results
  6. 6. References

Full Index

  1. 1. Introduction
  2. 2. Executive Summary
  3. 3. About the Review Process
    1. 3.1. Scope
    2. 3.2. Methodology
  4. 4. Conformance to WCAG 1.0
    1. 4.1. Priority 1 Checkpoints
    2. 4.2. Priority 2 Checkpoints
    3. 4.3. Priority 3 Checkpoints
  5. 5. Detailed Evaluation Results
    1. 5.1. Site Navigation
      1. 5.1.1. Page Metadata
      2. 5.1.2. Orientation
    2. 5.2. Page Markup
      1. 5.2.1. Valid Markup
      2. 5.2.2. Deprecated Markup
    3. 5.3. Page Structure
      1. 5.3.1. Natural Language
      2. 5.3.2. Reading Order
      3. 5.3.3. Page Headings
      4. 5.3.4. Lists and List Items
      5. 5.3.5. Quotations
      6. 5.3.6. Acronyms and Abbreviations
    4. 5.4. Page Presentation
      1. 5.4.1. Style Sheets
      2. 5.4.2. Relative Units
    5. 5.5. Use of Images
      1. 5.5.1. Decorative Images
      2. 5.5.2. Images of Text
      3. 5.5.3. Functional Images
      4. 5.5.4. Informative Images
      5. 5.5.5. Complex images
    6. 5.6. Use of Links
      1. 5.6.1. Link Text
      2. 5.6.2. Link Target
      3. 5.6.3. Self Referencial Links
    7. 5.7. Use of Tables
      1. 5.7.1. Data Tables
      2. 5.7.2. Layout Tables
    8. 5.8. Use of Color
      1. 5.8.1. Color Coding
      2. 5.8.2. Color Contrast
    9. 5.9. Use of Forms
      1. 5.9.1. Control Labels
      2. 5.9.2. Control Groups
      3. 5.9.3. Empty Controls
    10. 5.10. Use of Scripts
      1. 5.10.1. Script Alternatives
      2. 5.10.2. Event Handlers
      3. 5.10.3. Visual Effects
    11. 5.11. Keyboard Control
      1. 5.11.1. Tab Order
      2. 5.11.2. Keyboard Shortcuts
  6. 6. References

1. Introduction

This report describes the accessibility of the Web site Citylights for people with disabilities. It includes an assessment of the conformance of the Citylights Web site with Level Triple-A (all Checkpoints) of the W3C Web Content Accessibility Guidelines (WCAG) 1.0. The review process is based on the W3C Conformance Evaluation of Web Sites for Accessibility, and this resulting evaluation report is based on the W3C Template for Accessibility Evaluation Reports.

Conformance evaluation of Web accessibility requires a combination of semi-automated evaluation tools and manual evaluation by an experienced reviewer. This report is a technical assessment of the Web site and did not include involving users with disabilities which could identify additional issues, or help ensure that technical accessibility solutions are applied effectively. The W3C Evaluating Web Sites for Accessibility resource suite outlines different approaches for evaluating Web sites for accessibility.

In section 3 of this report, Review Process, more background on the scope and the methodology used during the conformance evaluation is provided. Section 4, Conformance to WCAG 1.0, summarizes the compliance of the Citylights Web site to the checkpoints of the W3C Web Content Accessibility Guidelines (WCAG) 1.0. Section 5, Detailed Evaluation Results, provides more detail about the findings of the conformance evaluation and includes some examples from the Citylights Web site.

2. Executive Summary

Note: will be written after section 4 and 5 are finalized.

3. About the Review Process

The review process used to produce this report is based on the W3C Conformance Evaluation of Web Sites for Accessibility, which is part of the W3C Evaluating Web Sites for Accessibility resource suite. The review combines automatic, semi-automatic, and manual testing of Web site to determine compliance of the Citylights Web site to the checkpoints of the W3C Web Content Accessibility Guidelines (WCAG) 1.0. The review process does not include involving users with disabilities which could identify additional issues, or help ensure that technical accessibility solutions are applied effectively.

3.1. Scope

After consultation with the stakeholders from "Citylights", the following scope has been selected for the review process:

3.2. Methodology

One or more automated Web accessibility evaluation tools are used to scan the entire Web site. While this automatic scan does not identify all issues, it effectively highlights some of the issues that exist or that need to be manually evaluated by an experienced reviewer. Note: further checking is carried out to help catch false results that can be generated by automatic tools.

The representative sample of pages for manual evaluation (as determined in the scope above) is examined using the Checklist for Web Content Accessibility Guidelines 1.0. To assist reviewers in performing these accessibility checks, a selection of the following tools may be used:

4. Conformance to WCAG 1.0

The following list is a tally of the number of checkpoints met, not met, and not applicable:

The tables in the following sections are based on the Checklist for Web Content Accessibility Guidelines 1.0 and summarizes the compliance of the Citylights Web site to the checkpoints of the W3C Web Content Accessibility Guidelines (WCAG) 1.0.

4.1. Priority 1 Checkpoints

Priority 1 checkpoints, organized by category and sorted by checkpoint number.
In General (Priority 1) PassFailN/A
Checkpoint 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. See section 5.5. Use of Images.   fail  
Checkpoint 2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup. See section 5.8.1. Color Coding.   fail  
Checkpoint 4.1 Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions). See section 5.3.1. Natural Language.   fail  
Checkpoint 6.1 Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document. See section 5.3.2. Reading Order and section 5.4.1. Style Sheets.   fail  
Checkpoint 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes.     N/A
Checkpoint 7.1 Until user agents allow users to control flickering, avoid causing the screen to flicker.     N/A
Checkpoint 14.1 Use the clearest and simplest language appropriate for a site's content. pass    
And if you use images and image maps (Priority 1) PassFailN/A
Checkpoint 1.2 Provide redundant text links for each active region of a server-side image map.     N/A
Checkpoint 9.1 Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape.     N/A
And if you use tables (Priority 1) PassFailN/A
Checkpoint 5.1 For data tables, identify row and column headers. See section 5.7.1. Data Tables.   fail  
Checkpoint 5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells. See section 5.7.1. Data Tables.   fail  
And if you use frames (Priority 1) PassFailN/A
Checkpoint 12.1 Title each frame to facilitate frame identification and navigation.     N/A
And if you use applets and scripts (Priority 1) PassFailN/A
Checkpoint 6.3 Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. See section 5.10.1. Script Alternatives.   fail  
And if you use multimedia (Priority 1) PassFailN/A
Checkpoint 1.3 Until user agents can automatically read aloud the text equivalent of a visual track, provide an auditory description of the important information of the visual track of a multimedia presentation.     N/A
Checkpoint 1.4 For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation.     N/A
And if all else fails (Priority 1) PassFailN/A
Checkpoint 11.4 If, after best efforts, you cannot create an accessible page, provide a link to an alternative page that uses W3C technologies, is accessible, has equivalent information (or functionality), and is updated as often as the inaccessible (original) page.   fail  

4.2. Priority 2 Checkpoints

Priority 2 checkpoints, organized by category and sorted by checkpoint number.
In General (Priority 2) PassFailN/A
Checkpoint 2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text]. See section 5.8.2. Color Contrast.   fail  
Checkpoint 3.1 When an appropriate markup language exists, use markup rather than images to convey information. See section 5.5. Use of Images.   fail  
Checkpoint 3.2 Create documents that validate to published formal grammars. See section 5.2.1. Valid Markup.   fail  
Checkpoint 3.3 Use style sheets to control layout and presentation. See section 5.4.1. Style Sheets.   fail  
Checkpoint 3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values. See section 5.4.2. Relative Units.   fail  
Checkpoint 3.5 Use header elements to convey document structure and use them according to specification. See section 5.3.3. Page Headings.   fail  
Checkpoint 3.6 Mark up lists and list items properly. See section 5.3.4. Lists and List Items.   fail  
Checkpoint 3.7 Mark up quotations. Do not use quotation markup for formatting effects such as indentation. See section 5.3.5. Quotations.   fail  
Checkpoint 6.5 Ensure that dynamic content is accessible or provide an alternative presentation or page.     N/A
Checkpoint 7.2 Until user agents allow users to control blinking, avoid causing content to blink (i.e., change presentation at a regular rate, such as turning on and off).     N/A
Checkpoint 7.4 Until user agents provide the ability to stop the refresh, do not create periodically auto-refreshing pages.     N/A
Checkpoint 7.5 Until user agents provide the ability to stop auto-redirect, do not use markup to redirect pages automatically. Instead, configure the server to perform redirects.     N/A
Checkpoint 10.1 Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.     N/A
Checkpoint 11.1 Use W3C technologies when they are available and appropriate for a task and use the latest versions when supported. See section 5.10.3. Visual Effects.   fail  
Checkpoint 11.2 Avoid deprecated features of W3C technologies. See section 5.2.2. Deprecated Markup.   fail  
Checkpoint 12.3 Divide large blocks of information into more manageable groups where natural and appropriate. See section 5.9.2. Control Groups.   fail  
Checkpoint 13.1 Clearly identify the target of each link. See section 5.6. Use of Links.   fail  
Checkpoint 13.2 Provide metadata to add semantic information to pages and sites. See section 5.1.1. Page Metadata.   fail  
Checkpoint 13.3 Provide information about the general layout of a site (e.g., a site map or table of contents). See section 5.1.2. Orientation.   fail  
Checkpoint 13.4 Use navigation mechanisms in a consistent manner. pass    
And if you use tables (Priority 2) PassFailN/A
Checkpoint 5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). See section 5.7.2. Layout Tables.   fail  
Checkpoint 5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting. See section 5.7.2. Layout Tables.   fail  
And if you use frames (Priority 2) PassFailN/A
Checkpoint 12.2 Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone.     N/A
And if you use forms (Priority 2) PassFailN/A
Checkpoint 10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned. See section 5.9.1. Control Labels.   fail  
Checkpoint 12.4 Associate labels explicitly with their controls. See section 5.9.1. Control Labels.   fail  
And if you use applets and scripts (Priority 2) PassFailN/A
Checkpoint 6.4 For scripts and applets, ensure that event handlers are input device-independent. See section 5.10.2. Event Handlers.   fail  
Checkpoint 7.3 Until user agents allow users to freeze moving content, avoid movement in pages.     N/A
Checkpoint 8.1 Make programmatic elements such as scripts and applets directly accessible or compatible with assistive technologies [Priority 1 if functionality is important and not presented elsewhere, otherwise Priority 2]. See section 5.10.1. Script Alternatives.   fail  
Checkpoint 9.2 Ensure that any element that has its own interface can be operated in a device-independent manner.     N/A
Checkpoint 9.3 For scripts, specify logical event handlers rather than device-dependent event handlers. See section 5.10.2. Event Handlers.   fail  

4.3. Priority 3 Checkpoints

Priority 3 checkpoints, organized by category and sorted by checkpoint number.
In General (Priority 3) PassFailN/A
Checkpoint 4.2 Specify the expansion of each abbreviation or acronym in a document where it first occurs. See section 5.3.6. Acronyms and Abbreviations.   fail  
Checkpoint 4.3 Identify the primary natural language of a document. See section 5.3.1. Natural Language.   fail  
Checkpoint 9.4 Create a logical tab order through links, form controls, and objects. See section 5.11.1. Tab Order.   fail  
Checkpoint 9.5 Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls. See section 5.11.2. Keyboard Shortcuts.   fail  
Checkpoint 10.5 Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links.     N/A
Checkpoint 11.3 Provide information so that users may receive documents according to their preferences (e.g., language, content type, etc.). See section 5.4.1. Style Sheets.   fail  
Checkpoint 13.5 Provide navigation bars to highlight and give access to the navigation mechanism. See section 5.1.2. Orientation.   fail  
Checkpoint 13.6 Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group.     N/A
Checkpoint 13.7 If search functions are provided, enable different types of searches for different skill levels and preferences.     N/A
Checkpoint 13.8 Place distinguishing information at the beginning of headings, paragraphs, lists, etc. pass    
Checkpoint 13.9 Provide information about document collections (i.e., documents comprising multiple pages.).     N/A
Checkpoint 13.10 Provide a means to skip over multi-line ASCII art.     N/A
Checkpoint 14.2 Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page. pass    
Checkpoint 14.3 Create a style of presentation that is consistent across pages. pass    
And if you use images and image maps (Priority 3) PassFailN/A
Checkpoint 1.5 Until user agents render text equivalents for client-side image map links, provide redundant text links for each active region of a client-side image map.     N/A
And if you use tables (Priority 3) PassFailN/A
Checkpoint 5.5 Provide summaries for tables. See section 5.7.1. Data Tables.   fail  
Checkpoint 5.6 Provide abbreviations for header labels. See section 5.7.1. Data Tables.   fail  
Checkpoint 10.3 Until user agents (including assistive technologies) render side-by-side text correctly, provide a linear text alternative (on the current page or some other) for all tables that lay out text in parallel, word-wrapped columns. See section 5.7.2. Layout Tables.   fail  
And if you use forms (Priority 3) PassFailN/A
Checkpoint 10.4 Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas. See section 5.9.3. Empty Controls.   fail  

5. Detailed Evaluation Results

In this section:

  1. 5.1. Site Navigation
  2. 5.2. Page Markup
  3. 5.3. Page Structure
  4. 5.4. Page Presentation
  5. 5.5. Use of Images
  6. 5.6. Use of Links
  7. 5.7. Use of Tables
  8. 5.8. Use of Color
  9. 5.9. Use of Forms
  10. 5.10. Use of Scripts
  11. 5.11. Keyboard Control

5.1. Site Navigation

In this section:

  1. 5.1.1. Page Metadata
  2. 5.1.2. Orientation

5.1.1. Page Metadata

The following WCAG 1.0 checkpoint relates to document titles:

Examples of missing metadata
Issue Description Recommended Action
All pages [Priority 2] - all the pages have the same ambigious page title "..::CityLights:::::::.....................".
Note: this specific title using a combination of punctuation characters may be distracting for screen reader users.
Change the HTML title element (<title>) to reflect the true title of the pages. For example "Home Page" or "Welcome".
All pages [Priority 2] - all the pages are missing the document type definition in the HTML code. Add the document type definition using the !DOCTYPE element.

5.1.2. Orientation

The following WCAG 1.0 checkpoints relate to orientation:

Examples of inadequate orientation support
Issue Description Recommended Action
All pages [Priority 2] - a navigation bar and a drop-down navigation menu exist but both these are not accessible (see other sections of this report for more detail on the accessibility issues). Make the navigation bar and the drop-down menu accessible to provide information about the layout and to provide navigation mechanisms.
Note: if the Web site grows and not all the pages are directily available from these navigation mechanisms then additional means such as a site map or a table of contents may need to be provided.

5.2. Page Markup

In this section:

  1. 5.2.1. Valid Markup
  2. 5.2.2. Deprecated Markup

5.2.1. Valid Markup

The following WCAG 1.0 checkpoint relates to valid markup:

Examples of invalid markup
Issue Description Recommended Action
All pages [Priority 2] - all pages have numerous validation errors. Use the HTML and the CSS code according to their formal specification.

5.2.2. Deprecated Markup

The following WCAG 1.0 checkpoint relates to deprecated markup:

Examples of deprecated markup
Issue Description Recommended Action
All pages [Priority 2] - all pages make use of deprecated markup such as <b> or <font>. Use the HTML and the CSS code according to their formal specification.

5.3. Page Structure

In this section:

  1. 5.3.1. Natural Language
  2. 5.3.2. Reading Order
  3. 5.3.3. Page Headings
  4. 5.3.4. Lists and List Items
  5. 5.3.5. Quotations
  6. 5.3.6. Acronyms and Abbreviations

5.3.1. Natural Language

The following WCAG 1.0 checkpoints relate to natural language:

Examples of unidentified natural language
Issue Description Recommended Action
Survey Form Page [Priority 1] - changes in the natural language for the option c'est la vie (French) has not been identified. Use the language attribute (for example lang="fr") in a directly sorrounding element to identify the natural language of the option.
All pages [Priority 3] - the primary natural language (English) is not identified. Use the language attribute (for example lang="en") in the HTML root element (<html>) of the pages to identify the primary natural language.

5.3.2. Reading Order

The following WCAG 1.0 checkpoint relates to reading order:

Examples of unintended reading order
Issue Description Recommended Action
Home Page [Priority 1] - the headings of the three news items appear visually related to the corresponding text, but they are not associated within the HTML markup of the page. The headings and the news items are therefore read out of context by screen readers, or appear otherwise distorted when the CSS styles are not enabled or supported. The reading order of the news items are currently as follows:
  1. Heading 1: Heat wave linked to temperatures
  2. Heading 2: Man Gets Nine Months in Violin Case
  3. Heading 3: Lack of brains hinders research
  4. Text 1: After three years of effort...
  5. Text 2: Mayor: These kinds of crimes need more creative...
  6. Text 3: Brain donations: huge drop off in brain donations...
Change the order and nesting of the HTML elements as well as the corresponding CSS code so that the reading is order without style sheets is retained as intended. For example in the following order:
  1. Heading 1: Heat wave linked to temperatures
  2. Text 1: After three years of effort...
  3. Heading 2: Man Gets Nine Months in Violin Case
  4. Text 2: Mayor: These kinds of crimes need more creative...
  5. Heading 3: Lack of brains hinders research
  6. Text 3: Brain donations: huge drop off in brain donations...
News Article Page [Priority 1] - the headings of the news articles appear visually related to the corresponding text, but they are not associated within the HTML markup of the page. The headings and the news articles are therefore read out of context by screen readers, or appear otherwise distorted when the CSS styles are not enabled or not supported. The reading order of the news articles are currently as follows:
  1. Heading 1: Heat wave linked to temperatures
  2. Heading 2: Man Gets Nine Months in Violin Case
  3. Text 1: After three years of effort...
  4. Text 2: As news of the conviction and sentencing...
Change the order and nesting of the HTML elements as well as the corresponding CSS code so that the reading is order without style sheets is retained as intended. For example in the following order:
  1. Heading 1: Heat wave linked to temperatures
  2. Text 1: After three years of effort...
  3. Heading 2: Man Gets Nine Months in Violin Case
  4. Text 2: Mayor: These kinds of crimes need more creative...

5.3.3. Page Headings

The following WCAG 1.0 checkpoint relates to page headings:

Examples of inaccessible page headings
Issue Description Recommended Action
Home Page [Priority 2] - "Welcome to Citylights":
Screen grab of 'Welcome to Citylights' heading
This heading is plain text but formatted visually using CSS to look like a heading. Screen readers and other user agents may not detect such headings.
Use the appropriate HTML header element (in this case probably <h2>) to identify this text correctly as a heading.
Note: The current visual styling can be retained by applying the appropriate CSS (class="headline").
News Article Page [Priority 2] - "Tough Wahoonie":
Screen grab of 'Tough Wahoonie' heading
This heading is plain text but formatted visually using CSS to look like a heading. Screen readers and other user agents may not detect such headings.
Use the appropriate HTML header element (in this case probably <h3>) to identify this text correctly as a heading.
Note: The current visual styling can be retained by applying the appropriate CSS (class="headline").
Survey Form Page [Priority 2] - "General Information":
Screen grab of 'General Information' heading
This heading is plain text but formatted visually using CSS to look like a heading. Screen readers and other user agents may not detect such headings.
Use the appropriate HTML header element (in this case probably <h3>) to identify this text correctly as a heading.
Note: The current visual styling can be retained by applying the appropriate CSS (class="headline").
Note: heading structure is still required even though tables are used for layout.

5.3.4. Lists and List Items

The following WCAG 1.0 checkpoint relates to lists and list items:

Examples of inaccessible lists and list items
Issue Description Recommended Action
Home Page [Priority 2] -
Screen grab of 'Elsewhere on the Web' list
This list is plain text but formatted visually using CSS to look like a list. Screen readers and other user agents may not detect such headings.
Use the appropriate HTML list element (in this case <ul>) to identify this text correctly as a list.
Note: The current visual styling can be retained by applying the appropriate CSS.

5.3.5. Quotations

The following WCAG 1.0 checkpoint relates to quotations:

Examples of misidentified quotations
Issue Description Recommended Action
News Article Page [Priority 2] - "<blockquote>":
Face of a small baby
Quatation markup is used to visually indent the image from the left border.
Use the appropriate CSS code to control the indent and visual positioning of the image.
News Article Page [Priority 2] - "The study cost the city taxpayer under 10 million dollars":
This text has quotation marks but is not identified as a quatation in the HTML markup.
Use the appropriate HTML markup (in this case <q>) to identify this text correctly as quotations.

5.3.6. Acronyms and Abbreviations

The following WCAG 1.0 checkpoint relates acronyms and abbreviations:

Examples of unexplained acronyms and abbreviations
Issue Description Recommended Action
Tickets Page [Priority 3] - "FS", "RS", "DC", and "ST":
These acronyms are not expanded or explained within the page.
  1. Use the expanded text instead of acronyms
    or
  2. Provide an expansion of the acronyms before using them

5.4. Page Presentation

In this section:

  1. 5.4.1. Style Sheets
  2. 5.4.2. Relative Units

5.4.1. Style Sheets

The following WCAG 1.0 checkpoints relate to style sheets:

Examples of style sheets not used
Issue Description Recommended Action
News Article Page [Priority 1] - some of the text colors are defined by a combination of HTML markup and CSS code. When the style sheets are not enabled or not supported, some of the colors are only partially defined. This causes some of the text to display incorrectly, and others to become indistinguishable from the backround. For example the headings "Heat wave linked to temperatures" and "Man Gets Nine Months in Violin Case" display incorrectly without style sheets. Use only CSS code to control the page presentation instead of using HTML markup.
All pages [Priority 2] - some of the page presentation is defined by HTML markup, for example by using elements and attributes to control font, color, or positioning. Use CSS code to control the page presentation instead of using HTML markup.
All pages [Priority 3] - the presentation of the content can not be selected by the users according to thier preferences. For example alternate style sheets with larger font sizes, higher color contrast, and simplified layout. Provide alternate style sheets that present the information to match user preferences. For example style sheets with larger font sizes, higher color contrast, and simplified layout.

5.4.2. Relative Units

The following WCAG 1.0 checkpoint relates to relative units:

Examples of absolute units
Issue Description Recommended Action
All pages [Priority 2] - font sizes, line heights, as well as widths and positions of other HTML elements such as tables and "<div>"-blocks are specified in absolute units ("px" and "pt"). Use relative units ("%" and "em") to control all the sizes and positions of the HTML elements (these units should be specified in the CSS code, see section 5.4.1. Style Sheets for more information).

5.5. Use of Images

In this section:

  1. 5.5.1. Decorative Images
  2. 5.5.2. Images of Text
  3. 5.5.3. Functional Images
  4. 5.5.4. Informative Images
  5. 5.5.5. Complex images

The following WCAG 1.0 checkpoints relate to use of images:

5.5.1. Decorative Images

Images that are used for visual formatting and decoration include:

Examples of inappropriate text equivalents for decorative images
Issue Description Recommended Action
Page Template [Priority 1] - "top_logo_next_end.gif":
Section of (gray) border for banner across the top of the page
No alt-attribute provided.
  1. (prefered) Include the image in the CSS as part of the styling.
    or
  2. Provide an empty (null) alt-attribute (alt="").
Page Template [Priority 1] - "marker2_w.gif":
Dotted (gray) line for creating borders and separators
No alt-attribute provided.
  1. (prefered) Include the image in the CSS as part of the styling.
    or
  2. Provide an empty (null) alt-attribute (alt="").
Home Page [Priority 1] - "list_bullets.gif":
Green square list bullet
Inappropriate alt-attribute "bullet" provided.
  1. (prefered) Include the image in the CSS as part of the styling.
    or
  2. Provide an empty (null) alt-attribute (alt="").

Note: see related issues in section 5.3.4, Lists and List Items.

5.5.2. Images of Text

Examples of inappropriate text equivalents for images of text
Issue Description Recommended Action
Page Template [Priority 1] - "top_logo.gif":
'Citylights - your access to the city' using special fonts and colors
No alt-attribute provided.
Add the alt-attribute alt="Citylights - your access to the city".
Home Page [Priority 1] - "telefon_white_bg.gif":
'(1) 269 C-H-O-K-E' using special fonts
Inappropriate alt-attribute "1234 56789" provided.
  1. (prefered) Replace image with the actual text and use CSS to control the styling [Priority 2].
    or
  2. Change the alt-attribute to alt="(1) 269 C H O K E" [Priority 1].
Tickets Page [Priority 1] - "headline_ticket_offers.gif":
'Citylights Ticket Offers'
No alt-attribute provided.
  1. (prefered) Replace image with the actual text and use CSS to control the styling [Priority 1].
    or
  2. Add the alt-attribute alt="Citylights Ticket Offers" [Priority 2].

5.5.3. Functional Images

Images that represent functionality trigger an action such as activate links, submit forms, or initiate other events.

Examples of inappropriate text equivalents for functional images
Issue Description Recommended Action
Page Template [Priority 1] - "nav_home.gif":
Icon of a small house beside the word 'Home'
No alt-attribute provided.
  1. (prefered) Separate the image into the icon (small house) and replace the image of the word "Home" with plain text (using CSS to control the styling); add empty (null) alt-attribute alt="" to the icon and place the icon and the HTML text together within the same link.
    or
  2. Add the alt-attribute alt="Home Page" to indicate the link target.
Home Page [Priority 1] - "morearrow.gif":
Word 'More' and small arrows to indicate more content available
Inappropriate alt-attribute "" (empty) provided.
  1. (prefered) Replace image with the actual text and use CSS to control the styling.
    or
  2. Change the alt-attribute to indicate the link target, for example to alt="Brain Donations - News Article".
News Article Page [Priority 1] - "smzappa2.jpg":
Face of a small baby
Inappropriate alt-attribute "man holding a giant artichoke" provided, and the image does not represent the functionality of the link.
Place the image outside the link and provide an equivalent alt-attribute (for example alt="baby pouting"); add a separate and clear text-link to the survey form.

5.5.4. Informative Images

Examples of images that convey information are pictures, logos, or symbols.

Examples of inappropriate text equivalents for informative images
Issue Description Recommended Action
Page Template [Priority 1] - "top_weather.gif":
Symbol for 'sunny spells' weather forecast
No alt-attribute provided.
  1. (prefered) Include the corresponding description for the image in the alt-attribute (for example alt="Sunny spells").
    or, if this can't be done,
  2. Add an alt-attribute such as alt="Symbol for weather forecast".
Home Page [Priority 1] - "panda-sm.jpg":
Man with a giant hat
Image is part of the CSS styling but seems to be relevant ("<div>" element has a title attribute "hat" instead of an image with an alt-attribute).
  1. (prefered) If the image is relevant to the purpose of the site, change "<div>" to an "<div>" element (to make it a real image instead of a CSS background); add a meaningful alt-attribute such as alt="Man with giant a hat" (the current title "bear" is not an equivalent alternate text).
    or
  2. No need for further changes if the image is actually purely decorative.
Survey Form Page [Priority 1] - "teaser_right1.jpg":
Singer on concert stage
No alt-attribute provided.
  1. If the content of this image is relevant to the purpose of the site, add an alt-attribute to something meaningful such as alt="Joe Blue playing at the zoo benefit concert".
    or
  2. Include the image in the CSS as part of the styling (or add empty alt-attribute alt="") if it is purely decorative.

5.5.5. Complex images

Examples of complex images are charts, diagrams, or graphs.

Examples of inappropriate text equivalents for complex images
Issue Description Recommended Action
News Article Page [Priority 1] - "chart1.jpg":
Bar chart that is not easy to identify in detail
No alt-attribute provided (the following description is found nearby: "Brain donations at city hospital (by month)").
  1. (prefered) Describe the highlights of the data in the image within the text of the same page to clarify its meaning, and what it is trying to show. Add an alt-attribute, for example alt="Brain donations at city hospital by month, full description below". If applicable also make the data on which the chart is based available on a separate page; provide a link to this page near the image.
    or
  2. Describe the data in the image on a separate page, and provide a link to that page as described at the beginning of this section. Add an alt-attribute, for example alt="Brain donations at city hospital by month" as appropriate.
    or
  3. If the details are not important to the purpose of the site, provide a brief description of the information that is communicated visually in the alt-attribute; for example alt="Brain donations at city hospital by month showing seasonal variations".
    or
  4. If the image is purely decorative (which it does not seem to be due to the description located nearby and the nature of the image), add an empty alt-attribute (alt="").

5.6. Use of Links

In this section:

  1. 5.6.1. Link Text
  2. 5.6.2. Link Target
  3. 5.6.3. Self Referencial Links

The following WCAG 1.0 checkpoints relate to use of links:

5.6.1. Link Text

Examples of ambigious link text
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

5.6.2. Link Target

Examples of ambigious link target
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

5.6.3. Self Referencial Links

Examples of self referencial links
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

5.7. Use of Tables

In this section:

  1. 5.7.1. Data Tables
  2. 5.7.2. Layout Tables

5.7.1. Data Tables

The following WCAG 1.0 checkpoints relate to data tables:

Examples of inaccessible layout tables
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

5.7.2. Layout Tables

The following WCAG 1.0 checkpoints relate to layout tables:

Examples of inaccessible layout tables
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

5.8. Use of Color

In this section:

  1. 5.8.1. Color Coding
  2. 5.8.2. Color Contrast

5.8.1. Color Coding

The following WCAG 1.0 checkpoint relates to color coding:

Examples of information conveyed by color alone
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

5.8.2. Color Contrast

The following WCAG 1.0 checkpoint relates to color contrast:

Examples of inadequate color contrast
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

5.9. Use of Forms

In this section:

  1. 5.9.1. Control Labels
  2. 5.9.2. Control Groups
  3. 5.9.3. Empty Controls

5.9.1. Control Labels

The following WCAG 1.0 checkpoint relates to control labels:

Examples of inappropriate control labels
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

5.9.2. Control Groups

The following WCAG 1.0 checkpoint relates to grouping controls:

Examples of ungrouped controls
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

5.9.3. Empty Controls

The following WCAG 1.0 checkpoint relates to empty controls:

Examples of empty controls
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

5.10. Use of Scripts

In this section:

  1. 5.10.1. Script Alternatives
  2. 5.10.2. Event Handlers
  3. 5.10.3. Visual Effects

5.10.1. Script Alternatives

The following WCAG 1.0 checkpoints relate to script alternatives:

Examples of scripts without accessible alternatives
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

5.10.2. Event Handlers

The following WCAG 1.0 checkpoints relate to event handlers:

Examples of device-dependent event handlers
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

5.10.3. Visual Effects

The following WCAG 1.0 checkpoint relates to visual effects:

Examples of unneccessary scripts for visual effects
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

5.11. Keyboard Control

In this section:

  1. 5.11.1. Tab Order
  2. 5.11.2. Keyboard Shortcuts

5.11.1. Tab Order

The following WCAG 1.0 checkpoint relates to tab order:

Examples of illogical tab order
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

5.11.2. Keyboard Shortcuts

The following WCAG 1.0 checkpoint relates to keyboard shortcuts:

Examples of missing keyboard shortcuts
Issue Description Recommended Action
Note: example(s) of the issue to be provided Note: recommended action to be provided

6. References