User Needs for Content - WCAG 2.1 AA
As a screen reader user, I need an alternative description of images, so that I can hear what they mean.
Need is met when
- Alt text is added to non-decorative images that aren't described in surrounding text, or;
- An empty alt text attribute is added to decorative images, so that assistive technologies are told that it does not have a text alternative.
Evidence of need
WCAG 2.0 - 1.1.1 Non-text Content
HTML elements
<image> <svg>
Responsibility
Content editor
As a user with a hearing impairment, I need to read an audio transcript, so I can understand what is being said.
Need is met when
Transcripts of audio are provided
Evidence of need
WCAG 2.0 - 1.2.1 Audio-only and Video Only (Pre-recorded)
HTML elements
<audio>
Responsibility
Content editor
As a user with a hearing impairment, I need to read captions of video, so I can understand what is being said.
Need is met when
Captions are added to video
Evidence of need
WCAG 2.0 - 1.2.2 Captions (Pre-recorded), 1.2.4 Captions (live)
HTML elements
<video>, videos on YouTube, Vimeo, etc.
Responsibility
Content editor
As a user with dyslexia, I need to get a visual sense of the page structure, so that I am not overwhelmed by text.
Need is met when
Lists are used to break up large paragraphs
Evidence of need
WCAG 2.0 - 1.3.1 Info and relationships
HTML elements
<h1> - <h6> <ol> <ul>
Responsibility
Developer
As a screen reader user, I need table headings so I know the row and column that data belows to.
Need is met when
Table headings are used
Evidence of need
WCAG 2.0 - 1.3.1 Info and relationships
HTML elements
<table> <th> <td>
Responsibility
Developer
As a screen reader user, I need to tab and arrow in a logical order, so I can understand the structure of the page.
Need is met when
The reading and navigation code order is logical
Evidence of need
WCAG 2.0 - 1.3.2 Meaningful Sequence
HTML elements
CSS
Responsibility
Developer
As a screen reader user, I need information in addition to shape and location, so that I can follow instructions.
Need is met when
Instructions aren't reliant on size, shape, visual location or sound
Evidence of need
WCAG 2.0 - 1.3.3 Sensory Characteristics
HTML elements
Text
Responsibility
Content editor
As a user with a mobility impairment, I need portrait and landscape orientation, so that I don't have to rotate my device.
Need is met when
Content displays in both portrait or landscape mode according to the orientation of the device.
Evidence of need
WCAG 2.1 - 1.3.4 Orientation
HTML elements
CSS
Responsibility
Visual designer
As a user with dyslexia, I need identification of input field purpose, so that technology can automatically personalize my forms.
Need is met when
Suitabe form inputs have autocomplete fields.
Evidence of need
WCAG 2.1 - 1.3.5 Identify Input Purpose
HTML elements
<input autocomplete="">
Responsibility
Developer
As a user who is color blind, I need more than color difference, so I can understand information.
Need is met when
Color alone isn't used to indicate action, response or to identify visual elements.
Evidence of need
WCAG 2.0 - 1.4.1 User of Color
HTML elements
CSS
Responsibility
Designer / Style Guide
As a screen reader user, I need to be able to stop, pause or mute audio, so I can hear my screen reader.
Need is met when
Users are allowed to stop, pause or mute audio
Evidence of need
WCAG 2.0 - 1.4.2 Audio Control
HTML elements
<audio> <video>
Responsibility
UX / Interaction designer
As a user with low vision, I need to have sufficient contrast between text and the background, so I can read the text.
Need is met when
Sufficient contrast between text and background colors is provided
Evidence of need
WCAG 2.0 - 1.4.3 Contrast (Minimum)
HTML elements
CSS
Responsibility
Designer / Style Guide
As a user with low vision, I need to increase text size by up to 200%, so I can read without a screen magnifier.
Need is met when
Text resizing is allowed
Evidence of need
WCAG 2.0 - 1.4.4 Resize Text
HTML elements
<p>
Responsibility
UX / Interaction designer
As a user with low vision, I need text, rather than images of text, so that I can customize the font size.
Need is met when
Images of text are avoided
Evidence of need
WCAG 2.0 - 1.4.5 Images of Text
HTML elements
<imageo>
Responsibility
Content editor
As a user with low vision, I need content that reflows when scaled, so that scrolling in more than one direction is not necessary.
Need is met when
Content only scrolls in one direction when viewed at 400%
Evidence of need
WCAG 2.1 - 1.4.10 Reflow
HTML elements
CSS
Responsibility
UX / Interaction designer
As a user with low vision, I need components and objects to have a 3:1 contrast ratio, so I can identify them.
Need is met when
Interface components and graphical objects to have a 3:1 contrast ratio against adjacent colors
Evidence of need
WCAG 2.1 - 1.4.11 Non-text Contrast
HTML elements
CSS
Responsibility
Graphic designer
As a user with dyslexia, I need to be able to set paragraph spacing, line height and word spacing, so I can read text.
Need is met when
Line height and paragraph, word and letter spacing can be increased without loss of functionality
Evidence of need
WCAG 2.1 - 1.4.12 Text Spacing
HTML elements
CSS
Responsibility
UX / Interaction designer
As a user with low vision or cognitive difficulties, I need predictable hover and focus states, so I can interact with content.
Need is met when
Additional content is dismissable, hoverable and persistent
Evidence of need
WCAG 2.1 - 1.4.13 Content on Hover or Focus
HTML elements
CSS
Responsibility
UX / Interaction designer
As a user who cannot use a mouse, I need to be able to use a keyboard, so that I can navigate the page.
Need is met when
The page is navigable by keyboard alone
Evidence of need
WCAG 2.0 - 2.1.1 Keyboard
HTML elements
Keyboard
Responsibility
UX / Interaction designer
As a user who cannot use a mouse, I need to move in and out of components with a keyboard, so I don't get trapped.
Need is met when
The keyboard does not get trapped within a component
Evidence of need
WCAG 2.0 - 2.1.2 No Keyboard Trap
HTML elements
Keyboard
Responsibility
UX / Interaction designer
As a user with dyslexia, I need to be able to turn off single key shortcuts, so I can use speech input without triggering commands.
Need is met when
Keyboard shortcuts can be turned off, remapped or are only available on focus
Evidence of need
WCAG 2.0 - 2.1.4 Charcter Key Shortcuts
HTML elements
Keyboard
Responsibility
Develooper
As a user with a mobility impairment, I need to be able to adjust time limits, so I can complete tasks.
Need is met when
Users can turn off or extend time limits
Evidence of need
WCAG 2.0 - 2.2.1 Timing Adjustable
HTML elements
Timing
Responsibility
UX / Interaction designer
As a user with an attention deficit disorder, I need to be able to pause, stop or animations, so that I am not distracted.
Need is met when
Animations can be paused
Evidence of need
WCAG 2.0 - 2.2.2 Pause, Stop, Hide
HTML elements
Timing
Responsibility
UX / Interaction designer
As a user with a photosensitive seizure disorder, I need to avoid three flashes in a second, so I do not have a seizure.
Need is met when
Content does not flash
Evidence of need
WCAG 2.0 - 2.3.1 Three flashes or below threshold
HTML elements
Timing
Responsibility
UX / Interaction designer
As a screen reader user, I need to skip blocks of navigation content, so I can get to the main content.
Need is met when
Skip to content links are present
Evidence of need
WCAG 2.0 - 2.4.1 Bypass Blocks
HTML elements
<a> <div role="banner"> <div role="main">
Responsibility
UX / Interaction designer
As a screen reader user, I need a meaningful page title, so that I know what part of a web site I am on.
Need is met when
A meaningful page title is provided
Evidence of need
WCAG 2.0 - 2.4.2 Page Titled
HTML elements
<title>
Responsibility
Content editor
As a screen reader user, I need to navigate links and forms in a logical order, so I can form a mental model of the page.
Need is met when
The navigation order of links and forms is logical
Evidence of need
WCAG 2.0 - 2.4.3 Focus Order
HTML elements
tabindex
Responsibility
UX / Interaction designer
As a screen reader user, I need link text that describes the destination page, so that I can navigate using links.
Need is met when
The link title matches the page title of the destination page
Evidence of need
WCAG 2.0 - 2.4.4 Link Purpose
HTML elements
<a>
Responsibility
Content editor
As a user with a cognitive impairment, I need an index, sitemap or search, so I can navigate in multiple ways.
Need is met when
A list of related pages, an index, a sitemap or a search is provided
Evidence of need
WCAG 2.0 - 2.4.5 Multiple Ways
HTML elements
Index, sitemap, search
Responsibility
UX / Interaction designer
As a screen reader user, I need informative headings, so that I get an overview of page content
Need is met when
The headings alone give the user a good idea of the page content
Evidence of need
WCAG 2.0 - 2.4.6 Headings and labels
HTML elements
<h1> <h2> <h3> <h4> <h5> <h6>
Responsibility
Content editor
As a screen reader user, I need a description of form input fields, so that I know what content to enter.
Need is met when
Labels, including required format, have been provided for input fields
Evidence of need
WCAG 2.0 - 2.4.6 Headings and labels
HTML elements
<label> <input> <fieldset> <legend>
Responsibility
Content editor
As a keyboard user, I need a keyboard focus indicator, so I know which element has keyboard focus.
Need is met when
An indication of keyboard focus is given
Evidence of need
WCAG 2.0 - 2.4.7 Focus Visible
HTML elements
CSS
Responsibility
Designer / Style Guide
As a user with a mobility impairment, I need support for single point gestures, so that I can operate content.
Need is met when
Single point gestures are offered in addition to multipart gestures
Evidence of need
WCAG 2.1 - 2.5.1 Pointer Gestures
HTML elements
Buttons, sliders, arrows
Responsibility
UX / Interaction Designer
As a user with a mobility impairment, I need activation on release rather than press, so that I can avoid accidental input.
Need is met when
Actions are triggered on up events rather than down events
Evidence of need
WCAG 2.1 - 2.5.2 Pointer Cancellation
HTML, iOS, Android elements
Buttons, sliders, drag and drop
Responsibility
Developer
As a user with dyslexia, I need visible labels to match accessible names, so that I can navigate via speech input.
Need is met when
Visible text of menus, links and buttons matches the accessible name
Evidence of need
WCAG 2.1 - 2.5.3 Label in Name
HTML elements
Menus, links, buttons
Responsibility
Developer
As a user with a mobility impairment, I need user interface controls, so that I can operate my device without motion.
Need is met when
Functions actuated by moving a device can be disabled and accessed via interface controls
Evidence of need
WCAG 2.1 - 2.5.4 Motion Actuation
iOS, Android elements
Tilt, shake, gesture
Responsibility
UX / Interaction designer
As a screen reader user, I need to identify the language of the page, so my screen reader can speak with the right accent.
Need is met when
The lang attribute to identify the overall language of the page
Evidence of need
WCAG 2.0 - 3.1.1 Language of page
HTML elements
<html>
Responsibility
Developer
As a screen reader user, I need to identify changes in page language, so my screen reader uses the right accent.
Need is met when
The lang attribute is used to identify language changes in specific parts the page
Evidence of need
WCAG 2.0 - 3.1.2 Language of parts
HTML elements
<lang>
Responsibility
Developer
As a user with a disability, I need components that don't trigger changes on focus, so that the page is predictable.
Need is met when
Forms don't submit and pop-up windows don't open when elements receive focus
Evidence of need
WCAG 2.0 - 3.2.1 On Focus
HTML elements
<a> <form>
Responsibility
UX / Interaction designer
As a user with a disability, I need input fields that don't trigger automatic changes, so I can avoid confusion.
Need is met when
Input fields don't change the user interface automatically
Evidence of need
WCAG 2.0 - 3.2.2 On Input
HTML elements
<input>
Responsibility
UX / Interaction designer
As a user of a screen magnifier, I need consistent ordering of navigation, so I can locate repeated content.
Need is met when
Navigation is consistent
Evidence of need
WCAG 2.0 - 3.2.3 Consistent Navigation
HTML elements
Page templates
Responsibility
Designer / Style Guide
As a screen reader user, I need components that are identified consistently, so I can identify repeat functionality.
Need is met when
Components that have the same functionality are identified consistently
Evidence of need
WCAG 2.0 - 3.2.4 Consistent Identification
HTML elements
Page templates
Responsibility
Designer / Style Guide
As a screen reader user, I need to identify required form fields and formats, so I can enter the correct information.
Need is met when
Required input formats are identified and error messages are clearly displayed
Evidence of need
WCAG 2.0 - 3.3.1 Error Identification
HTML elements
<label> <input> <fieldset> <legend>
Responsibility
Developer
As a screen reader user, I need to hear the labels of form input fields so I can enter the correct information.
Need is met when
Forms use fieldsets, legends and labels
Evidence of need
WCAG 2.0 - 3.3.2 Labels or instructions
HTML elements
<label> <input> <fieldset> <legend>
Responsibility
Developer
As a user with a disability, I need suggestions on how to fix form input errors, so I can easily correct mistakes.
Need is met when
Input errors are clearly identified
Evidence of need
WCAG 2.0 - 3.3.3 Error Suggestion
HTML elements
<form>
Responsibility
Developer
As a user with a disability, I need to confirm, check or reverse legal and financial data, so I can avoid serious errors.
Need is met when
Users are allowed to confirm, correct or reverse changes to legal and financial data
Evidence of need
WCAG 2.0 - 3.3.4 Error Prevention (Legal Financial Data)
HTML elements
<form>
Responsibility
Developer
As a screen reader user, I need to access valid web pages, so my reader can parse the whole page.
Need is met when
Validation errors are avoided
Evidence of need
WCAG 2.0 - 4.1.1 Parsing
HTML elements
All
Responsibility
Developer
As a screen reader user, I need page elements with names, roles and values, so my reader can tell me what they are.
Need is met when
Valid markup is used
Evidence of need
WCAG 2.0 - 4.1.2 Name, Role, Value
HTML elements
All
Responsibility
Developer
As a screen reader user, I need to be informed of changes to content, so that I know what has been updated.
Need is met when
Screen reader provides announces new content after inputting information or clicking a button
Evidence of need
WCAG 2.1 - 4.1.3 Status Messages
HTML elements
Menus, links, buttons
Responsibility
Developer