Please enable JavaScript.
Coggle requires JavaScript to display documents.
6 Developing Websites for Older People: How Web Content Accessibility…
6 Developing Websites for Older People: How Web Content Accessibility Guidelines (WCAG) 2.0 Applies | Web Accessibility Initiative (WAI) | W3C
-
principles
perceivable
:star: AA text can be resized without assistive technology up to 200 percent without loss of content or functionality
:pencil2:
- % -> font-size & em -> font-size & width & height
- Providing large fonts by default (future link)
- Scaling form elements which contain text
- Avoiding the use of text in raster images (future link)
- Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent
- Text style and text layout
:check: Visual Presentation
- Foreground and background colors can be selected by the user.
- Width is no more than 80 characters or glyphs (40 if CJK).
- Text is not justified (aligned to both the left and the right margins).
- Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
- Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.
:pencil2:
- 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)
- 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)
:star: AAA text style, text justification, line spacing, line length, and horizontal scrolling
:star:
- 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
- Contrast (Minimum) (AA) requires a contrast ratio of at least 4.5:1 for the visual presentation of text and images
- Contrast (Enhanced) (AAA) requires a higher contrast ratio of at least 7:1 for the visual presentation of text and images
:pencil2:
- Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- Ensuring that information conveyed by color differences is also available in text
- 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)
- 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
:star:
- Audio-only and Video-only (Prerecorded) (A)
- Captions (Prerecorded) (A)
- Audio Description or Media Alternative (Prerecorded video) (A)
- Captions (Live) (A)
- Audio Description (Prerecorded video) (AA)
- Extended Audio Description (Prerecorded video) (AAA)
- Media Alternative (Prerecorded) (AAA)
- Audio-only (Live) (AAA)
- Low or No Background Audio (Prerecorded) (AAA)
:pencil2:
- 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
- Mixing audio files so that non-speech sounds are at least 20 decibels lower than the speech audio content
- Text-to-speech (speech synthesis)
:star:
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
:pencil2:
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
-
:pencil2:
- Providing a text alternative that describes the purpose of the CAPTCHA AND 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)
operable
:pencil2:
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)
:star:
- 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
- Link Purpose (Link Only) (AAA) says "a mechanism is available to allow the purpose of each link to be identified from link text alone"
- Focus Visible (AA) requires a visible keyboard focus indicator that shows what component on the web page has focus
:star:
- Multiple Ways (AA) says "more than one way is available to locate a Web page within a set of Web pages"
- Location (AAA) says "information about the user's location within a set of Web pages is available"
- 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)
:pencil2:
- 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)
:star:
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
:pencil2:
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
:star:
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"
:pencil2:
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)
:star:
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"
:pencil2:
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
:star:
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
:pencil2:
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
understandable
:star:
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
:pencil2:
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)
:star:
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"
:pencil2:
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
- Consistent navigation and labeling
:star:
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
:pencil2:
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
:star:
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"
:pencil2:
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
:star:
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"
:pencil2:
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
- Instructions and input assistance
:star:
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"
:pencil2:
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
- Error prevention and recovery for forms
:star:
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"
:pencil2:
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)
-
interfere
activating
spreadsheets
truncated
truncation
horizontal
constraints
dedicated
mechanism
unintuitive
comprehension
permits
violate
provision
prompting
intent
deficiencies
asset
aesthetic
monochrome
yield
Incidental
inactive
hue and saturation
luminance
deficit
character strokes
Incidental
pixelate
formula
Rationale
congenital
acquired
spectral
predominantly
protanopia
violation
acuity
empirical
compensated
Conversion
ambient
modality
visual, auditory or tactile
transcript
simultaneously
parallel
braille
sign language
assembly
caption
orchestra
augments
conformance
cast
portion
resumed
cyber
fidelity
deviations
fringe
vocalization
Text-to-speech (speech synthesis)
intrinsically
edges
defeat
outright
conform
bypass
implied
preserve
substituted
Sighted
preceded
Auditory
chime
serially
glossary
asterisk
adjacent
discern
ambiguous
simultaneously
disoriented