Editors Draft: 22 September 2010 [Changelog]
Status: This document is an outdated Draft.
The published version is at http://www.w3.org/WAI/older-users/developing.html.
Please send comments to wai-eo-editors@w3.org (a publicly archived list).
[DRAFT] Developing Websites for Older People:
How Web Content Accessibility Guidelines (WCAG) 2.0 Applies
Introduction
An extensive literature review identified that existing standards from the W3C Web Accessibility Initiative (WAI) address the accessibility needs of older web users. This page introduces how to use Web Content Accessibility Guidelines (WCAG) 2.0 to improve the accessibility and usability of websites and web applications for older people.
Please see Web Accessibility and Older People: Meeting the Needs of Ageing Web Users for additional background and resources on the overlapping needs of older people and people with disabilities.
Page Contents
- Introduction (above)
- About WCAG 2.0
- How WCAG 2.0 Applies to Older People
- Perceivable information and user interface
- Operable user interface and navigation
- Understandable information and user interface
- Robust content and reliable interpretation
About WCAG 2.0
The Web Content Accessibility Guidelines (WCAG) 2.0 includes organizing principles and guidelines, and has success criteria at three levels: A, AA, AAA. WAI recommends meeting at least all WCAG 2.0 Level A and AA success criteria.
A related document provides techniques that include specific details on meeting the success criteria, such as code examples. WAI encourages developers to use the How to Meet WCAG 2.0 quick reference to access the guidelines, success criteria, and techniques, along with the additional descriptions, examples, and resources from “Understanding WCAG 2.0”.
To learn more about WCAG, see:
- WCAG Overview - provides background, an introduction to WCAG, and links to additional information
- The WCAG 2.0 Documents - describes the different WCAG 2.0 technical and supporting documents
- How to Meet WCAG 2.0 - is a customizable quick reference to Web Content Accessibility Guidelines 2.0 requirements (Success Criteria) and techniques
How WCAG 2.0 Applies to Older People
This section explains how many of the Web Content Accessibility Guidelines (WCAG) 2.0 guidelines and success criteria specifically meet the needs of older web users. Although not all the WCAG 2.0 success criteria are listed here, WAI recommends meeting at least all WCAG 2.0 Level A and AA success criteria. Some of the Level AAA success criteria that are particularly important for older people are listed in this section too.
When implementing WCAG 2.0, developers can use different techniques to meet the success criteria. In some cases, using one technique instead of another can optimize accessibility for certain users. This section lists some of the techniques that can help optimize websites for older people. (Many of the techniques link to additional information; those with "(future link)" will be written up with later edits to the WCAG Techniques.)
This section is organized under the four principles of web accessibility from WCAG 2.0: perceivable, operable, understandable, and robust. Success criteria are listed thematically, to help readability. Sometimes they are drawn from different guidelines to address a particular aspect.
Perceivable information and user interface
Text size
Many older people require large text due to declining vision, including text in form fields and other controls.
WCAG 2.0 success criteria:
- 1.4.4 - Resize text (AA) says "text can be resized without assistive technology up to 200 percent without loss of content or functionality"
Example techniques to consider:
- Using relative font-sizes such as percent (C12) or ems (C14) and ensuring text containers resize (C28)
- Providing large fonts by default (future link)
- C17: Scaling form elements which contain text
- Avoiding the use of text in raster images (future link)
- G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent
More techniques are listed under 1.4.4 - Resize text in "How to Meet WCAG 2.0".
Literature review reference: Vision decline with ageing.
Text style and text layout
Text style and its visual presentation impacts how hard or easy it is for people to read, especially older people with declining vision.
WCAG 2.0 success criteria:
- 1.4.8 - Visual Presentation (AAA) includes requirements on text style, text justification, line spacing, line length, and horizontal scrolling
Example techniques to consider:
- Avoiding fully-aligned text (C19) or center-aligned text (future link)
- Using readable fonts (future link)
- Using upper and lower case according to the spelling conventions of the text language (future link)
- Avoiding chunks of italic text (future link)
- G188: Providing a button on the page to increase line spaces and paragraph spaces
- Providing sufficient inter-column spacing (future link)
- Avoiding overuse of different styles on individual pages and in sites (future link)
More techniques are listed under 1.4.8 - Visual Presentation in "How to Meet WCAG 2.0".
Literature review references: Vision decline with ageing, Previous approaches to ‘senior friendly’ Web guidelines, and Studies of elderly Web users’ specific disabilities - Vision.
Color and contrast
Most older people's color perception changes, and they lose contrast sensitivity.
WCAG 2.0 success criteria:
- 1.4.1 - Use of Color (A) requires that color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element
- 1.4.3 - Contrast (Minimum) (AA) requires a contrast ratio of at least 4.5:1 for the visual presentation of text and images
- 1.4.6 - Contrast (Enhanced) (AAA) requires a higher contrast ratio of at least 7:1 for the visual presentation of text and images
Example techniques to consider:
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- G14: Ensuring that information conveyed by color differences is also available in text
- G122: Including a text cue whenever color cues are used
- Using a light pastel background rather than a white background behind black text to create sufficient but not extreme contrast (future link)
- G183: 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
More techniques are listed under 1.4.1 - Use of Color, 1.4.3 - Contrast (Minimum) and 1.4.6 - Contrast (Enhanced) in "How to Meet WCAG 2.0".
Literature review references: Vision decline with ageing, and Studies of elderly Web users’ specific disabilities: vision.
Multimedia
Because many older people's hearing or vision declines, they often need transcripts, captions, and low background sound.
WCAG 2.0 success criteria:
- 1.2.1 - Audio-only and Video-only (Prerecorded) (A)
- 1.2.2 - Captions (Prerecorded) (A)
- 1.2.3 - Audio Description or Media Alternative (Prerecorded video) (A)
- 1.2.4 - Captions (Live) (A)
- 1.2.5 - Audio Description (Prerecorded video) (AA)
- 1.2.7 - Extended Audio Description (Prerecorded video) (AAA)
- 1.2.8 - Media Alternative (Prerecorded) (AAA)
- 1.2.9 - Audio-only (Live) (AAA)
- 1.4.7 - Low or No Background Audio (Prerecorded) (AAA)
Example techniques to consider:
- All transcript, caption, and audio description techniques from the listed success criteria should be considered as appropriate, for example:
- G69: Providing an alternative for time based media
- G158: Providing an alternative for time-based media for audio-only content
- G159: Providing an alternative for time-based media for video-only content
- G93: Providing open (always visible) captions
- G173: Providing a version of a movie with audio descriptions
- G56: Mixing audio files so that non-speech sounds are at least 20 decibels lower than the speech audio content
More techniques are listed under the success criteria for Guideline 1.2 (Time-based Media) and under 1.4.7 - Low or No Background Audio (Prerecorded) in "How to Meet WCAG 2.0".
Literature review references: Vision decline with ageing and Hearing loss with age.
Text-to-speech (speech synthesis)
Some older people use text-to-speech (speech synthesis) software, which is becoming increasingly available in browsers and operating systems.
WCAG 2.0 success criteria:
- 1.1.1 - Non-text Content (A) says "a text alternative that serves the equivalent purpose" is required
- 1.3.1 - Info and Relationships (A) says "information, structure, and relationships" to be made available, for example to text-to-speech software
Example techniques to consider:
- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- H44: Using label elements to associate text labels with form controls
- H42: Using h1-h6 to identify headings
More techniques are listed under 1.1.1 - Non-text Content and 1.3.1 - Info and Relationships in "How to Meet WCAG 2.0".
CAPTCHA
Older people with declining eyesight may not be able to discern the characters in a CAPTCHA, especially because CAPTCHAs often have low contrast and do not increase in size when users have text sized larger.
CAPTCHA stands for 'Completely Automated Public Turing tests to tell Computers and Humans Apart'. An example of CAPTCHA is:
WCAG 2.0 success criteria:
- 1.1.1 - Non-text Content (A) includes a requirement for alternative CAPTCHAs
Example techniques to consider:
- G143: Providing a text alternative that describes the purpose of the CAPTCHA AND G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality
- Providing more than two modalities of CAPTCHAs (future link)
- Providing access to a human customer service representative who can bypass CAPTCHA (future link)
- Not requiring CAPTCHAs for authorized users (future link)
Literature review reference: Vision decline with ageing.
Operable user interface and navigation
Links
Many older people need links to be particularly clear and identifiable due to declining vision and cognition.
WCAG 2.0 success criteria:
- 2.4.4 - Link Purpose (In Context) (A) requires that the purpose of a link can be determined from the link text alone, or from the link text together with its surrounding context
- 2.4.9 - Link Purpose (Link Only) (AAA) says "a mechanism is available to allow the purpose of each link to be identified from link text alone"
- 2.4.7 - Focus Visible (AA) requires a visible keyboard focus indicator that shows what component on the web page has focus
Example techniques to consider:
- G91: Providing link text that describes the purpose of a link
- Limiting the number of links per page (future link)
- Making links visually distinct (future link)
- G195: Using an author-supplied, highly visible focus indicator
- Highlighting a link or control when the mouse hovers over it, or when it receives keyboard focus (future links)
More techniques are listed under 2.4.4 - Link Purpose (In Context), 2.4.9 - Link Purpose (Link Only), and 2.4.7 - Focus Visible in "How to Meet WCAG 2.0".
Literature review reference: Previous approaches to ‘senior friendly’ Web guidelines.
Navigation and location
Many older people need navigation to be particularly clear due to declining cognitive abilities.
WCAG 2.0 success criteria:
- 2.4.5 - Multiple Ways (AA) says "more than one way is available to locate a Web page within a set of Web pages"
- 2.4.8 - Location (AAA) says "information about the user's location within a set of Web pages is available"
- 2.4.2 - Page Titled (A) says "web pages have titles that describe topic or purpose" (this is important for search results as the page title is usually displayed first in the listing)
Example techniques to consider:
- G63: Providing a site map
- G161: Providing a search function to help users find content
- G88: Providing descriptive titles for Web pages to help understand the results from Search based navigation
- G65: Providing a breadcrumb trail
- G128: Indicating current location within navigation bars
- Providing a link to the home page or main page (future link)
More techniques are listed under 2.4.5 - Multiple Ways, 2.4.8 - Location and 2.4.2 - Page Titled in "How to Meet WCAG 2.0".
Literature review references: Previous approaches to ‘senior friendly’ Web guidelines and Studies of elderly Web users’ specific disabilities - Cognition.
Mouse use
It is difficult for some older people to use a mouse due to declining vision or dexterity.
WCAG 2.0 success criteria:
- 2.4.7 - Focus Visible (AA) says that focus indicators should be visible
- 3.3.2 - Labels or Instructions (A) says that labels should be provided "when content requires user input"
- 1.1.1 - Text Alternatives (A) says to provide "text alternatives for any non-text content" such as form controls
- 1.4.4 - Resize Text (AA) says that text should be resizable up to 200 percent
Example techniques to consider:
- Highlighting a link or control when the mouse hovers over it (future link)
- G195: Using an author-supplied, highly visible focus indicator
- H44: Using label elements to associate text labels with form controls which increases the clickable area for form controls
- Using real text with relative font size (e.g. C12, C14) and avoiding the use of text in raster images (future link) as larger text is easy to click
More techniques are listed under 2.4.7 - Focus Visible, 3.3.2 - Labels or Instructions, 1.1.1 - Text Alternatives and 1.4.4 - Resize Text in "How to Meet WCAG 2.0".
Literature review references: Motor skill diminishment and Studies of elderly Web users’ specific disabilities - Mobility.
Keyboard use and tabbing
Some older people cannot use a mouse well or at all and instead use a keyboard.
WCAG 2.0 success criteria:
- 2.1.1 - Keyboard (A) says "the content is operable through a keyboard interface"
- 2.1.2 - No Keyboard trap (A) makes sure that keyboard focus "can be moved away from that component using only a keyboard"
- 2.1.3 - Keyboard (No Exception) (AAA) says "all functionality of the content is operable through a keyboard interface "
- 2.4.1 - Bypass Blocks (A) says "a mechanism is available to bypass blocks of content that are repeated"
- 2.4.3 - Focus Order (A) says "components receive focus in an order that preserves meaning and operability"
- 2.4.7 - Focus Visible (AA) requires an ability for the "keyboard focus indicator (to be) visible"
Example techniques to consider:
- H91: Using HTML form controls and links to ensure that users can use the form without the mouse
- G90: Providing keyboard-triggered event handlers
- G1: Adding a link at the top of each page that goes directly to the main content area
- G59: Placing the interactive elements in an order that follows sequences and relationships within the content
- G195: Using an author-supplied, highly visible focus indicator
- Providing a highly visible highlighting mechanism for links or controls when they receive keyboard focus (future link)
More techniques are listed under various success criteria for Guideline 2.1 - Keyboard Accessible and Guideline 2.4 - Navigable in "How to Meet WCAG 2.0".
Literature review references: Motor skill diminishment and Studies of elderly Web users’ specific disabilities - Mobility.
Distractions
Some older people are particularly distracted by any movement and sound on web pages.
WCAG 2.0 success criteria:
- 2.2.2 - Pause, Stop, Hide (A) says "a mechanism for the user to pause, stop, or hide" moving or blinking content
- 2.2.4 - Interruptions (AAA) says "interruptions can be postponed or suppressed"
- 1.4.2 - Audio Control (A) says "a mechanism is available to pause or stop the audio"
Example techniques to consider:
- G4: Allowing the content to be paused and restarted from where it was paused
- G11: Creating content that blinks for less than 5 seconds
- Providing the user with a means to stop moving content even if it stops automatically within 5 seconds (future link)
- G76: Providing a mechanism to request an update of the content instead of updating automatically
- G60: Playing a sound that turns off automatically within three seconds
- G171: Playing sounds only on user request
More techniques are listed under 2.2.2 - Pause, Stop, Hide, 2.2.4 - Interruptions, and 1.4.2 - Audio Control in "How to Meet WCAG 2.0".
Literature review references: Cognitive decline with age and Studies of elderly Web users’ specific disabilities - Cognition.
Sufficient time
It takes some older people longer to read text and complete transactions due to declining vision, dexterity, or cognition.
WCAG 2.0 success criteria:
- 2.2.1 - Timing Adjustment (A) says that users can turn off, adjust, or extend any time limits
- 2.2.3 - No Timing (AAA) says "timing is not an essential part of the event or activity presented by the content" (except for multimedia or real-time events)
- 2.2.2 - Pause, Stop, Hide (A) says that scrolling content should be able to be paused and that auto updating content can be also paused or controlled
Example techniques to consider:
- G4: Allowing the content to be paused and restarted from where it was paused
- G198: Providing a way for the user to turn the time limit off
- SCR16: Providing a script that warns the user a time limit is about to expire and
SCR1: Allowing the user to extend the default time limit
More techniques are listed under 2.2.1 - Timing Adjustment, 2.2.3 - No Timing, and 2.2.2 - Pause, Stop, Hide in "How to Meet WCAG 2.0".
Literature review references: Cognitive decline with age and Studies of elderly Web users’ specific disabilities - Cognition.
Understandable information and user interface
Page organization
Many older people are inexperienced web users without advanced browsing habits and therefore read the whole page, so good page organization is important.
WCAG 2.0 success criteria:
- 2.4.6 - Headings and Labels (AA) says "headings and labels describe topic or purpose"
- 2.4.10 - Section Headings (AAA) says "section headings are used to organize the content"
- 1.4.8 - Visual Presentation (AAA) includes techniques to help with text organization
Example techniques to consider:
- G130: Providing descriptive headings
- G131: Providing descriptive labels
- G141: Organizing a page using headings
- Using vertical (bulleted or numbered) lists rather than inline lists (future link)
More techniques are listed under 2.4.6 - Headings and Labels, 2.4.10 - Section Headings and 1.4.8 - Visual Presentation in "How to Meet WCAG 2.0".
Literature review references: Cognitive decline with age and Previous approaches to ‘senior friendly’ Web guidelines.
Understandable language
Many older people find it particularly difficult to understand complex sentences, unusual words, and technical jargon.
WCAG 2.0 success criteria:
- 3.1.3 - Unusual Words (AAA) says "a mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way"
- 3.1.4 - Abbreviations (AAA) says "a mechanism for identifying the expanded form or meaning of abbreviations is available"
- 3.1.5 - Reading Level (AAA) requires providing a version that "does not require reading ability more advanced than the lower secondary education level"
Example techniques to consider:
- Using the clearest and simplest language appropriate for the content (future link)
- G102: Providing the expansion or explanation of an abbreviation
- G153: Making the text easier to read
More techniques are listed under 3.1.3 - Unusual Words, 3.1.4 - Abbreviations and 3.1.5 - Reading Level in "How to Meet WCAG 2.0".
Literature review references: Cognitive decline with age and Previous approaches to ‘senior friendly’ Web guidelines.
Consistent navigation and labeling
For people who are new to the web, and older people with some types of cognitive decline, consistent navigation and presentation is particularly important.
WCAG 2.0 success criteria:
- 3.2.3 - Consistent Navigation (AA) requires that navigation is presented in the same relative order across a website
- 3.2.4 - Consistent Identification (AA) requires that components with similar functionality are identified consistently
Example techniques to consider:
- G61: Presenting repeated components in the same relative order each time they appear
- G197: Using labels, names, and text alternatives consistently for content that has the same functionality
More techniques are listed under 3.2.3 - Consistent Navigation and 3.2.4 - Consistent Identification in "How to Meet WCAG 2.0".
Literature review references: Cognitive decline with age and Previous approaches to ‘senior friendly’ Web guidelines.
Pop-ups and new windows
Some older people experiencing cognitive decline can be confused or distracted by pop-ups, new windows, or new tabs.
WCAG 2.0 success criteria:
- 3.2.1 - On Focus (A) says "when any component receives focus, it does not initiate a change of context"
- 3.2.5 - Change on Request (AAA) says "changes of context are initiated only by user request or a mechanism is available to turn off such changes"
Example techniques to consider:
- Giving users advanced warning when opening a new window (future link)
- G107: Using "activate" rather than "focus" as a trigger for changes of context
- Opening new windows only when best from an accessibility perspective (future link)
- SCR24: Using progressive enhancement to open new windows on user request
- Opening new windows by providing normal hyperlinks without the target attribute (future link), because many user agents allow users to open links in a new window or tab
More techniques are listed under 3.2.1 - On Focus and 3.2.5 - Change on Request in "How to Meet WCAG 2.0".
Literature review reference: Training the elderly to Use ICT and the Web
Page refresh and updates
Some older people with declining vision or cognition can miss content that automatically updates or refreshes in a page.
WCAG 2.0 success criteria:
- 3.2.1 - On Focus (A) says "when any component receives focus, it does not initiate a change of context"
- 3.2.2 - On Input (A) says that changing a setting does not automatically change the context unless the user has been advised beforehand
- 3.2.5 - Change on Request (AAA) says "changes of context are initiated only by user request or a mechanism is available to turn off such changes"
Example techniques to consider:
- G80: Providing a submit button to initiate a change of context
- G13: Describing what will happen before a change to a form control that causes a change of context to occur is made
- G107: Using "activate" rather than "focus" as a trigger for changes of context
- Not causing persistent changes of state or value when a component receives focus, or providing an alternate means to reset any changes (future link)
- G76: Providing a mechanism to request an update of the content instead of updating automatically
- SCR19: Using an onchange event on a select element without causing a change of context
More techniques are listed under 3.2.1 - On Focus, 3.2.2 - On Input and 3.2.5 - Change on Request in "How to Meet WCAG 2.0".
Literature review reference: Studies of elderly Web users’ specific disabilities - Cognition
Instructions and input assistance
It is difficult for some older people to understand the requirements of forms and transactions.
WCAG 2.0 success criteria:
- 3.3.2 - Labels or Instructions (A) says "labels or instructions are provided when content requires user input"
- 3.3.5 - Help (AAA) says "context-sensitive help is available"
- 3.2.4 - Consistent Identification (AA) says "components that have the same functionality within a set of Web pages are identified consistently"
Example techniques to consider:
- G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input
- Providing linear form design and grouping similar items (future link)
- G194: Providing spell checking and suggestions for text input
- G89: Providing expected data format and example
- G197: Using labels, names, and text alternatives consistently for content that has the same functionality
More techniques are listed under the success criteria for 3.3.2 - Labels or Instructions, 3.3.5 - Help and 3.2.4 - Consistent Identification in "How to Meet WCAG 2.0".
Literature review reference: Aspects of Web Design affecting the elderly - Forms.
Error prevention and recovery for forms
It is difficult for some older people to use forms and complete transactions due to declining cognitive abilities.
WCAG 2.0 success criteria:
- 3.3.4 - Error Prevention (Legal, Financial, Data) (AA) says that pages with legal commitments or financial transactions have reversible submissions and can be checked and corrected
- 3.3.6 - Error Prevention (All) (AAA) says that users can check and correct any information they submit
- 3.3.1 - Error Identification (A) says "if an input error is automatically detected, the item that is in error is identified and the error is described to the user"
- 3.3.3 - Error Suggestion (AA) says "if an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user"
Example techniques to consider:
- G98: Providing the ability for the user to review and correct answers before submitting
- Accepting input data in a variety of formats (future link)
- Informing the user what irreversible action is about to happen (future link)
- Making error messages easy to understand and distinguishable from other text in the Web page (future link)
- G83: Providing text descriptions to identify required fields that were not completed
- G85: Providing a text description when user input falls outside the required format or values
- G139: Creating a mechanism that allows users to jump to errors
- Re-displaying a form with a summary of errors (future link)
- G177: Providing suggested correction text
- Providing a text description that contains information about the number of input errors, suggestions for corrections to each item, and instructions on how to proceed (future link)
More techniques are listed under the success criteria for Guideline 3.3 - Input Assistance in "How to Meet WCAG 2.0".
Literature review reference: Aspects of Web Design affecting the elderly - Forms.
Robust content and reliable interpretation
Older equipment/software
Some older people will be using older browsers that might not be as capable or fault tolerant as current releases.
WCAG 2.0 success criteria:
- 4.1.1 - Parsing (A) requires that markup is used correctly according to specification
Example techniques to consider:
More techniques are listed under 4.1.1 - Parsing in "How to Meet WCAG 2.0".