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

  1. Alt text is added to non-decorative images that aren't described in surrounding text, or;
  2. 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


Contact Us

For assistance or to report accessibility problems please contact:

Andrew Normand
Web Accessibility Lead
Email: anormand@unimelb.edu.au
Phone: +61 3 9035 4867