Accessibility Guidelines

Good design means usable and accessible design. When you build a product, you should include as many users as possible.

Adopting accessibility standards will make your product better for everyone. Our guidelines are based on WCAG 2.2

Perceivable

1.1.1

Provide a Text Alternative for Non-Text Content

Non-text Content
Design & Development
Level A

Make sure that all non-text content, such as images, videos, and audio, has a text alternative. This helps people who cannot see or hear the content to understand and interact with it.

Acceptance criteria

  • All Non-Text Content: Must have a text alternative that serves the same purpose.
  • Controls and Input: If the non-text content is a control (e.g., a button) or accepts user input, it must have a name describing its purpose.
  • Time-Based Media: For audio or video content, the text alternative should at least identify the content.
  • Sensory Content: For content meant to create a sensory experience, provide a descriptive identification.
  • CAPTCHA: Provide text alternatives describing the CAPTCHA’s purpose and offer different types of CAPTCHA for various sensory perceptions.
  • Decoration and Formatting: If the content is decorative or used for formatting, it should be implemented in a way that assistive technology can ignore it.
1.2.1

Provide Alternatives for Prerecorded Audio-Only and Video-Only Content

Audio-only and Video-only (Prerecorded)
Design
Level A

Ensure that prerecorded audio-only and prerecorded video-only content has a text alternative so that people who cannot hear or see the content can still understand it.

Acceptance criteria

Prerecorded Audio-Only: Provide a text alternative that conveys the same information as the audio.

Prerecorded Video-Only: Provide either a text alternative or an audio description that conveys the same information as the video.

1.2.2

Provide Captions for Prerecorded Media

Captions (Prerecorded)
Design
Level A

Ensure that all prerecorded videos include captions so that people who are deaf or hard of hearing can understand the audio content.

Acceptance criteria

Captions Required: Provide captions for all prerecorded video content that includes audio.

1.2.3

Provide Audio Description or Media Alternative for Prerecorded Videos

Audio Description or Media Alternative (Prerecorded)
Design
Level A

Ensure that prerecorded videos include audio descriptions or a media alternative so that people who are blind or cannot understand the visual content can access the information.

Acceptance criteria

Audio Description: Provide an audio track that describes the visual content of the video.

Media Alternative: Offer an alternative form of media that conveys the same information as the video.

Exceptions: An audio description or media alternative is not required if the video is a media alternative for text and is clearly labeled as such.

1.2.4

Provide Captions for Live Audio Content

Captions (Live)
Design
Level AA

Ensure that all live audio content in videos includes captions so that people who are deaf or hard of hearing can follow along in real time.

Acceptance criteria

Live Captions: Provide real-time captions for all live audio content in synchronized media.

Scope: Captions should be available for all live audio broadcasts, including webcasts and live streams.

1.2.5

Provide Audio Description for Prerecorded Videos

Audio Description (Prerecorded)
Design
Level AA

Ensure that all prerecorded videos include an audio description that provides a spoken description of the visual content, so that people who are blind or have low vision can understand the visual aspects of the video.

Acceptance criteria

Audio Description Required: Provide an audio description for all prerecorded video content.

Synchronized Media: The audio description should be synchronized with the video, describing visual elements and actions as they occur.

1.2.6

Provide Sign Language Interpretation for Prerecorded Videos

Sign Language (Prerecorded)
Design
Level AAA

Ensure that all prerecorded videos include sign language interpretation for audio content, so that people who are deaf or hard of hearing can access the content in their preferred mode of communication.

Acceptance criteria

Sign Language Interpretation Required: Provide a sign language interpretation for all prerecorded audio content in synchronized media.

Scope: Sign language interpretation should be available for all prerecorded audio in time-based media.

1.2.7

Provide Extended Audio Description for Prerecorded Videos

Extended Audio Description (Prerecorded)
Design
Level AAA

Ensure that prerecorded videos include extended audio descriptions that offer detailed spoken descriptions of visual content, especially when standard audio descriptions are not sufficient.

Acceptance criteria

Extended Audio Description Required: Provide extended audio descriptions for prerecorded videos where regular pauses in the audio are insufficient to describe the visual content adequately.

Alternative Version: Offer an alternative version of the video that includes extended audio descriptions. This version should temporarily pause the main audio (and video) to allow detailed descriptions to be provided between dialogue.

1.2.8

Provide Media Alternatives for Prerecorded Videos

Media Alternative (Prerecorded)
Design
Level AAA

Provide a text-based alternative for all prerecorded video content to ensure that people who are deaf-blind or prefer reading can access the information at their own pace.

Acceptance criteria

Text Alternative Required: Offer a text equivalent for all prerecorded synchronized media and prerecorded video-only content.

Scope: The text alternative must be different from captions or a transcript and should fully convey the information presented in the video.

1.2.9

Provide Text Alternatives for Live Audio-Only Content

Audio-only (Live)
Design
Level AAA

Ensure that live audio-only content includes a text-based alternative so that people who are deaf or hard of hearing can access the information in real time.

Acceptance criteria

Text Alternative Required: Provide a text equivalent for all live audio-only content.

Scope: The text alternative should deliver the same information as the live audio, making it accessible for individuals who cannot hear or understand the audio.

1.3.1

Information structure stays the same without styling

Info and Relationships
Development
Level A

Use appropriate coding techniques to clearly define and reinforce the structure and relationships of content. This allows people using assistive technologies to understand the information, regardless of how it is styled visually.

Acceptance criteria

Programmatic Structure: Use the correct HTML elements (e.g., headings, lists, tables) to define the content’s structure and relationships.

Consistent Meaning: Ensure that the meaning and relationships of content are preserved even when visual styling changes.

Assistive Technology: Screen readers and other assistive technologies should be able to determine the content’s structure and relationships accurately without relying on visual presentation.

1.3.2

Content stays in the right order to keep context without styling

Meaningful Sequence
Development
Level A

Ensure that the order in which content is presented is meaningful and correctly maintained, so that users, including those using assistive technologies, can understand the content as intended.

Acceptance criteria

Correct Reading Sequence: The sequence in which content is presented should reflect its logical and meaningful order.

Programmatic Determination: The correct reading order can be programmatically determined and should be preserved even when visual styling changes.

Assistive Technology: Screen readers and other assistive technologies should present content in the intended order, regardless of how it is styled or arranged visually.

1.3.3

Don’t rely on color, shape, size or location

Sensory Characteristics
Design
Level A

Ensure that instructions for interacting with content do not rely solely on sensory characteristics (like color, shape, or sound) but provide clear, non-visual descriptions.

Acceptance criteria

Descriptive Instructions: Provide instructions for using controls and components based on their function or name, not just on their visual or sensory attributes.

Non-Visual Guidance: Instructions should be understandable without relying on sensory characteristics such as color, shape, size, position, or sound.

1.3.4

Support Multiple Device Orientations

Orientation
Design & Development
Level AA

Ensure that content can be accessed and used in both portrait and landscape orientations. This allows users to interact with the content regardless of how their device is positioned.

Acceptance criteria

Flexible Orientation: Content should not be restricted to a single display orientation (portrait or landscape) unless a specific orientation is essential for functionality.

Orientation Adaptability: The content should remain accessible and functional when the device is rotated between portrait and landscape orientations.

1.3.5

Clearly explain the input you need

Identify Input Purpose
Development
Level AA

Clearly indicate the purpose of each input field in forms to help users understand what information is required, especially for those with cognitive disabilities.

Acceptance criteria

Programmatic Identification: Ensure that the purpose of each input field can be programmatically determined using appropriate HTML elements or attributes.

Field Types and Labels: Use clear labels and input types that specify what information is expected and enable features like autocomplete when appropriate.

1.3.6

Identify the Purpose of User Interface Components

Identify Purpose
Development
Level AAA

Clearly define the purpose of all controls, icons, and key regions on a page using code. This helps users understand their function, especially those with cognitive disabilities who might find it challenging to interpret controls based on names alone.

Acceptance criteria

Programmatic Identification: Ensure that the purpose of user interface components, icons, and regions can be programmatically determined using appropriate code or attributes.

Clear Meaning: Use ARIA roles, landmarks, or other markup techniques to describe the purpose and function of key elements on the page.

1.4.1

Don’t use color alone to inform

Use of Color
Design
Level A

Do not rely solely on color to convey information, indicate actions, or distinguish visual elements. Use additional methods, such as text, shapes, or patterns, to ensure that all users can understand the information.

Acceptance criteria

Multimodal Communication: Use more than just color to convey information, indicate actions, or differentiate elements.

Complementary Methods: Provide additional cues, such as text labels, patterns, or shapes, to ensure that information is accessible to those who may have color vision deficiencies or other visual impairments.

1.4.10

Reflow content to avoid scrolling in 2 directions

Reflow
Design & Development
Level AA

Ensure that content can be enlarged without requiring scrolling in both directions. This means text should reflow within the viewport, making it accessible to users who need larger text.

Acceptance criteria

Vertical Scrolling: Content must fit within a width of 320 CSS pixels without horizontal scrolling.

Horizontal Scrolling: Content must fit within a height of 256 CSS pixels without vertical scrolling.

Exceptions: Content requiring two-dimensional scrolling, like maps, diagrams, presentations, data tables, and games, is not subject to this requirement.

1.4.11

Non-text elements have a contrast of at least 3:1

Non-text Contrast
Design
Level AA

Ensure that important visual information, like user interface components and graphical objects, has sufficient contrast against its background. This helps users with low vision distinguish key elements.

Acceptance criteria

Contrast Ratio: Visual elements must have a contrast ratio of at least 3:1 against adjacent colors.

User Interface Components: Contrast is required for elements necessary for understanding the interface, excluding inactive components or those whose appearance is not controlled by the author.

Graphical Objects: Contrast is required for parts of graphics essential for understanding the content, except when specific presentation is crucial to convey information.

1.4.12

Text spacing

Text Spacing
Design & Development
Level AA

Ensure that text maintains readability when users adjust text spacing settings, including line height, paragraph spacing, letter spacing, and word spacing. This flexibility helps users with different reading needs.

Acceptance criteria

Line Height: At least 1.5 times the font size.

Paragraph Spacing: At least 2 times the font size.

Letter Spacing: At least 0.12 times the font size.

Word Spacing: At least 0.16 times the font size.

No Loss of Content: Content or functionality must not be lost when users adjust these settings.

1.4.13

Focus and hover content stay visible and is easy to dismiss

Content on Hover or Focus
Development
Level AA

Ensure that content triggered by hover or focus is predictable, dismissible, and does not disappear unexpectedly, to improve accessibility and usability.

Acceptance criteria

Dismissible: Users can dismiss additional content without changing hover or focus, unless it’s an input error or doesn’t obscure or replace other content.

Hoverable: Additional content triggered by hover remains visible if the pointer moves over it.

Persistent: Content remains visible until the trigger is removed, the user dismisses it, or the content is no longer valid.

1.4.2

Pause, stop or mute autoplaying audio

Audio Control
Design & Development
Level A

Ensure that users can manage audio content on a page so that it does not disrupt their experience. This includes providing controls to pause, stop, or adjust the volume of audio that plays automatically.

Acceptance criteria

Control Mechanism: If audio plays automatically for more than 3 seconds, provide a control mechanism to pause or stop the audio.

Volume Control: Alternatively, provide a way to adjust the audio volume independently from the system volume.

1.4.3

Text should have a high contrast

Contrast (Minimum)
Design
Level AA

Make sure that text and images of text have enough contrast with their background so that they are readable by everyone, including those with visual impairments.

Acceptance criteria

Contrast Ratio: Text and images of text must have a minimum contrast ratio of 4.5:1 against their background.

Large Text: For large text (18px or larger), the contrast ratio should be at least 3:1.

Incidental Text: Text or images of text that are purely decorative, part of inactive user interface components, or not visible do not need to meet contrast requirements.

Logotypes: Text that is part of a logo or brand name is exempt from contrast ratio requirements.

1.4.4

Allow Text to Be Resized

Resize Text
Design & Development
Level AA

Ensure that text on your website can be resized up to 200% without losing any content or functionality. This helps users who need larger text to read comfortably.

Acceptance criteria

Resizing Capability: Text can be resized up to 200% from its original size without the need for assistive technology.

Content and Functionality: When text is resized, all content and functionality must remain accessible and usable.

1.4.5

Use Text Instead of Images of Text

Images of Text
Design
Level AA

Whenever possible, use actual text rather than images of text. This allows users to adjust how the text is presented according to their needs.

Acceptance criteria

Text vs. Images: Use text to convey information instead of using images of text, unless:

Customizable: The image of text can be customized to meet user requirements.

Essential: The specific presentation of the text is crucial to conveying the intended information (e.g., logotypes or brand names).

1.4.6

Enhanced minimum contrast of 7:1

Contrast (Enhanced)
Design
Level AAA

Provide strong contrast between text and its background to ensure readability for users who need higher contrast levels.

Acceptance criteria

Contrast Ratio: Text and images of text must have a contrast ratio of at least 7:1 against their background.

Large Text: Large-scale text (18px or larger) must have a contrast ratio of at least 4.5:1.

Incidental Text: Text or images of text that are decorative, part of inactive UI components, not visible, or part of a picture with significant other visual content are exempt from contrast requirements.

Logotypes: Text within logos or brand names does not need to meet the enhanced contrast ratio.

1.4.7

Minimize Background Audio for Speech Content

Low or No Background Audio
Design
Level AAA

Ensure that prerecorded audio primarily containing speech is clear and not disrupted by background sounds.

Acceptance criteria

For prerecorded audio-only content that features primarily speech (excluding audio CAPTCHAs, audio logos, or musical vocalizations), one of the following must apply:

No Background: The audio does not contain any background sounds.

Turn Off: Background sounds can be turned off by the user.

20 dB Lower: Background sounds are at least 20 decibels lower than the foreground speech, except for brief, occasional sounds lasting only 1-2 seconds.

1.4.8

Visual presentation of text

Visual Presentation
Design
Level AAA

Allow users to adjust text appearance to meet their preferences or needs for better readability and accessibility.

Acceptance criteria

For blocks of text, one or more of the following must be possible:

Color Customization: Users can select foreground and background colors.

Width Limitation: Text width is limited to no more than 80 characters or glyphs per line (40 characters for CJK languages).

Text Alignment: Text is not justified (aligned to both left and right margins).

Line and Paragraph Spacing:

• Line spacing (leading) is at least 1.5 times the font size within paragraphs.

• Paragraph spacing is at least 1.5 times larger than the line spacing.

Text Resizing: Text can be resized up to 200% without requiring horizontal scrolling.

1.4.9

Images of text are only used for decoration or when necessary

Images of Text (No Exception)
Design
Level AAA

Ensure users can adjust text presentation by avoiding images of text unless essential for style or decoration. Use text whenever possible for content, as images cannot be resized or reformatted, limiting accessibility.

Acceptance criteria

Use Images of Text only when:

Decorative: The text is used purely for decoration and does not convey critical information.

Essential Presentation: The specific presentation of text is essential for conveying meaning (e.g., logotypes or certain branding elements).

Operable

2.1.1

A keyboard can be used to interact with the interface

Keyboard
Development
Level A

All functionalities must be operable using a keyboard without requiring specific timing for keystrokes, except for functions that inherently depend on user movement paths.

Acceptance criteria

Keyboard Accessibility: All features must be accessible through keyboard navigation.

No Timing Restrictions: Keyboard actions should not require specific timing or sequences unless the function inherently needs user movement paths.

2.1.2

You can remove focus from any element with your keyboard

No Keyboard Trap
Development
Level A

Ensure that users can navigate away from any component using only the keyboard, and provide guidance if non-standard methods are required.

Acceptance criteria

Keyboard Navigation: Users must be able to move focus away from any component using only the keyboard.

Guidance for Non-Standard Methods: If non-standard keyboard methods are needed to exit a component, users should be informed.

2.1.3

A keyboard can be used to interact with the interface without exceptions

Keyboard (No Exception)
Development
Level AAA

Ensure that every action available with a mouse can also be performed using a keyboard, without needing specific timings for keystrokes.

Acceptance criteria

Keyboard Operation: All functionalities must be operable using a keyboard.

No Timing Requirements: Functions should not require specific timing or sequences of keystrokes.

2.1.4

Single key shortcuts can be turned off or remapped

Character Key Shortcuts
Development
Level A

Ensure that keyboard shortcuts using only letters, numbers, or symbols can be either turned off, remapped, or are only active when the relevant component is focused.

Acceptance criteria

Turn Off: Provide a mechanism to disable the shortcut.

Remap: Allow remapping the shortcut to include non-printable keys (e.g., Ctrl, Alt).

Active on Focus: Ensure shortcuts are active only when the relevant component has focus.

2.2.1

Time limits can be turned off or extended

Timing Adjustable
Design & Development
Level A

Allow users to manage time limits by turning them off, adjusting them, or extending them when needed. This helps accommodate varying needs for completing tasks.

Acceptance criteria

Turn Off: Users can turn off the time limit before it starts.

Adjust: Users can adjust the time limit to be at least ten times the default setting.

Extend: Users are warned before time expires, given at least 20 seconds to extend the time limit with a simple action, and can extend it at least ten times.

Exceptions: Time limits that are essential for real-time events, longer than 20 hours, or are crucial for the activity are exempt.

2.2.2

Animating or auto-updating content can be paused, stopped or hidden

Pause, Stop, Hide
Design & Development
Level A

Allow users to pause, stop, or hide content that moves, blinks, scrolls, or auto-updates to avoid distractions and interruptions.

Acceptance criteria

Moving, Blinking, Scrolling: Provide a way to pause, stop, or hide content that moves, blinks, or scrolls automatically for more than 5 seconds when presented with other content.

Auto-Updating: Provide a way to pause, stop, hide, or control the update frequency of auto-updating content that starts automatically when presented with other content.

2.2.3

No Unnecessary Time Limits

No Timing
Design
Level AAA

Avoid using time limits for tasks and interactions, unless required for non-interactive media or real-time events.

Acceptance criteria

• No time limits are imposed for tasks or interactions, except for synchronized media (e.g., video) or real-time events.

2.2.4

Postpone or stop interruptions

Interruptions
Design & Development
Level AAA

Allow users to postpone or suppress interruptions, except for emergencies, to avoid disruptions.

Acceptance criteria

• Users can delay or turn off interruptions, except in emergencies.

2.2.5

Preserve Data on Re-authentication

Re-authenticating
Development
Level AAA

Ensure that users do not lose their activity or data when their session expires and they need to re-authenticate. This helps users who may require more time to complete their tasks.

Acceptance criteria

• Users can continue their activity and retain their data after re-authenticating if their session expires.

2.2.6

Inform Users of Session Timeouts

Timeouts
Development
Level AAA

Notify users about the duration of inactivity before they risk losing data, unless data is preserved for more than 20 hours of inactivity. This ensures users are aware of how long they have to complete actions.‍

Acceptance criteria

• Users are warned about the duration of inactivity that could lead to data loss, unless data is preserved for more than 20 hours.

2.3.1

Don’t flash content for more than 3x per second

Three Flashes or Below Threshold
Design
Level A

Ensure content does not flash more than three times per second to prevent seizures and other health issues. Avoid using saturated red colors and high contrast in flashing content.

Acceptance criteria

• Content does not flash more than three times per second.

• Flashes must be below the general flash and red flash thresholds.

2.3.2

Don’t flash content for more than 3x per second (No exceptions)

Three Flashes
Design
Level AAA

Ensure content does not flash more than three times per second to prevent triggering seizures or other health issues, protecting users who are sensitive to rapid flashing.

Acceptance criteria

• Content flashes no more than three times per second.

2.3.3

Animation started by a user interaction can be turned off

Animation from Interactions
Design & Development
Level AAA

Allow users to disable or minimize motion and animations triggered by their interactions, based on their preferences. This helps prevent motion-induced discomfort and ensures a more comfortable experience for those sensitive to motion effects.

Acceptance criteria

  • Users can disable animations triggered by interactions unless the animation is essential for functionality or conveying information.
2.4.1

Bypass Repetitive Content

Bypass Blocks
Development
Level A

Provide mechanisms to skip repeated content blocks for easier keyboard navigation. This helps users, especially those relying on keyboard navigation, to move efficiently through pages without having to tab through repetitive elements like headers and navigation menus.

Acceptance criteria

Users can skip repetitive content blocks that appear on multiple pages.

2.4.10

Section headers are used to organize content

Section Headings
Development
Level AAA

Provide headings to clearly delineate different sections of content. This helps users, especially those with cognitive or visual disabilities, to navigate and understand the structure of the content.

Acceptance criteria

• Headings are used to separate and organize content into distinct sections.

• Headings can be titles or other forms of content labels.

2.4.11

Ensure users can see which item currently has keyboard focus

Focus Not Obscured (Minimum)
Development
Level AA

When a user interface component receives keyboard focus, it must be at least partially visible on the screen. This ensures that users who rely on keyboard navigation can see and interact with the focused element, even if other content is on the page.

Acceptance criteria

• Any element that receives keyboard focus must not be completely obscured by other content or off-screen.

• If content can be moved or repositioned by the user, ensure the initial position of the focusable component is not hidden.

2.4.12

The entire focused item is fully visible on the screen

Focus Not Obscured (Enhanced)
Development
Level AAA

When a user interface component receives keyboard focus, it must be completely visible without any part of it being obscured by other content or off-screen. This allows users who rely on keyboard navigation to see the entirety of the focused element and interact with it effectively.

Acceptance criteria

• No part of the component that receives keyboard focus should be covered by other content or be out of view.

• Ensure that the component is fully visible within the viewport, without requiring the user to scroll or adjust the view to see it.

2.4.13

Keyboard focus indicator is easily visible and distinguishable

Focus Appearance
Design
Level AAA

When an element receives keyboard focus, the focus indicator must be clearly visible. This makes it easier for users to locate and interact with the focused element, especially those with visual impairments or older adults.

Acceptance criteria

• The focus indicator is at least as wide as a 2 CSS pixel thick border of the unfocused component.

• The focus indicator has a contrast ratio of at least 3:1 between its focused and unfocused states.

2.4.2

Each web page has a meaningful title

Page Titled
Development
Level A

Ensure each web page has a descriptive title that clearly indicates its topic or purpose. This helps users identify and differentiate between pages, improving navigation and usability.

Acceptance criteria

Web pages must have titles that clearly describe the content or purpose of the page.

2.4.3

Keyboard users navigate content in a logical and meaningful order

Focus Order
Development
Level A

Ensure that when navigating a web page using a keyboard, focusable elements (like links, buttons, and form fields) receive focus in a sequence that makes sense and maintains the intended meaning and functionality of the page. This helps users understand and interact with the content efficiently.

Acceptance criteria

Focusable components must follow a logical order that preserves the intended meaning and functionality during keyboard navigation.

2.4.4

Users understand the function and destination of each link

Link Purpose (In Context)
Design
Level A

Ensure that the purpose of each link is clear from its text or the surrounding context, so users know what to expect when they activate it. This clarity helps users with visual or cognitive disabilities navigate and interact with content more effectively.

Acceptance criteria

The purpose of each link is understandable from its text or from the context provided by nearby content.

2.4.5

Users can access content through multiple methods

Multiple Ways
Design
Level AA

Provide at least two different ways for users to navigate to the same content within a set of web pages. This ensures that users who have different navigation preferences or disabilities can still reach the desired information.

Acceptance criteria

At least two methods are available to locate a web page within a set of pages, unless the page is a necessary step in a process or results from a specific action.

2.4.6

Content is clearly described using headings and labels

Headings and Labels
Design
Level AA

Ensure that all headings and labels effectively convey the topic or purpose of the content they describe. This helps users, particularly those with cognitive or visual disabilities, understand and navigate the page more easily.

Acceptance criteria

Headings and labels accurately describe the content or functionality they represent.

2.4.7

Clear which element is focused when navigating via keyboard

Focus Visible
Design
Level AA

Ensure that every interactive element on the page provides a visible indicator when it receives keyboard focus. This helps keyboard users, especially those with visual impairments, identify and interact with the currently focused element.

Acceptance criteria

All keyboard-focusable elements display a visible indicator when in focus.

2.4.8

You always know where you are within an app or website

Location
Design
Level AAA

Provide clear indicators, such as breadcrumbs, site maps, or other navigation aids, to show users their location within a set of web pages. This helps users understand their context and navigate more effectively, especially those with cognitive disabilities.

Acceptance criteria

Users can always identify their current location within the site’s structure through visible navigational aids.

2.4.9

The purpose or destination of a link is clear

Link Purpose (Link Only)
Design
Level AAA

Ensure that each link has descriptive text that clearly indicates where the link will lead or what action it will perform. This helps all users, particularly those using assistive technologies, understand link purposes without needing additional context.

Acceptance criteria

The purpose of each link can be determined from the link text alone. The text should be clear and informative, avoiding ambiguity.

2.5.1

All touch interactions can be performed with a single finger

Pointer Gestures
Development
Level A

Functionality that requires complex or multi-touch gestures should also be operable with a single touch or pointer gesture. This ensures that users who cannot perform multi-point or path-based gestures have access to all functions. This requirement applies to web content but does not extend to actions necessary for the operation of the user agent or assistive technology.

Acceptance criteria

• Any function that is activated by multi-touch or path-based gestures must also be operable with a single touch or pointer gesture, unless the complex gesture is essential to the functionality.

2.5.2

Reduce accidental activation of controls by mouse or touch interactions

Pointer Cancellation
Development
Level A

For actions that are triggered by a single pointer, ensure that users can easily cancel or undo unintended actions. This is important for preventing mistakes and ensuring that users can recover from accidental inputs. Functions should not rely solely on the initial pointer press to execute actions.

Acceptance criteria

For functionality operated by a single pointer, at least one of the following must be true:

No Down-Event: The action is not executed until the pointer is released.

Abort or Undo: The function is completed on the up-event, and users have a way to cancel the action before completion or undo it afterward.

Up Reversal: The up-event reverses any outcome of the preceding down-event.

Essential: The function requires completion on the down-event due to its nature (e.g., emulating a keyboard key press).

2.5.3

Visible labels should match the accessibility name

Label in Name
Design & Development
Level A

Ensure that the text or images of text used for visual labels on controls match the accessibility name provided in the code. This alignment is crucial for users who rely on speech recognition or screen readers, as these tools use the accessibility name to interact with controls.

Acceptance criteria

For user interface components with visual labels (text or images of text):

• The name in the code must include the text presented visually.

• Ideally, the text of the label should appear at the beginning of the accessibility name.

2.5.4

Ensure content does not rely solely on device movement

Motion Actuation
Design & Development
Level A

Functionality that relies on device motion should also be operable through other user interface components. Allow users to disable motion-based controls to avoid accidental activation, except in specific cases where motion is essential for the function.

Acceptance criteria

• Functionality operable by device motion must also be operable through a non-motion-based interface.

• Users must be able to disable motion-based interactions to prevent accidental activation, unless:

Supported Interface: The motion-based functionality is supported by an accessible interface.

Essential: The motion-based functionality is crucial and cannot be replaced by another method without affecting the activity’s purpose.

2.5.5

Target size is at least 44x44 pixels

Target Size (Enhanced)
Design & Development
Level AAA

Make custom interactive targets (such as buttons and links) at least 44 by 44 CSS pixels to accommodate users who have difficulty tapping small objects.

Acceptance criteria

• Interactive targets must be at least 44 by 44 CSS pixels in size.

2.5.6

Support Multiple Input Methods

Concurrent Input Mechanisms
Development
Level AAA

Allow users to use various input methods simultaneously and do not restrict them to just one type of input. This ensures everyone can interact with content using the input method that suits them best, whether it’s a mouse, keyboard, touch screen, voice commands, or assistive devices.

Acceptance criteria

• Users can switch between different input methods (like mouse, keyboard, touch, or voice) without restrictions.

• Input methods should not be limited unless it is necessary for security reasons, to follow user settings, or if the restriction is essential for specific functionality.

2.5.7

Provide Alternatives to Dragging Movements

Dragging Movements
Design & Development
Level AA

Ensure that any functionality that requires dragging can also be performed using a simpler, single-point action. This helps users who cannot drag items or perform complex movements.

Acceptance criteria

  • All features that involve dragging can be operated using a simple pointer action without dragging.
  • Dragging should only be used if it is essential for the function or if it is determined by the user agent and cannot be changed by the content author.
2.5.8

Ensure Minimum Target Size for Interactive Controls

Target Size (Minimum)
Design & Development
Level AA

Make sure that all interactive controls (like buttons and links) are large enough or spaced adequately so that they are easy to activate, even for users with physical impairments who may struggle with small or closely placed targets.

Acceptance criteria

• Targets must be at least 24 by 24 CSS pixels.

• If targets are smaller than 24 by 24 pixels, they should be spaced so that they do not overlap when a 24-pixel diameter circle is centered on each.

• Alternatives are provided if targets are smaller than the minimum size.

Understandable

3.1.1

Set Default Language for Web Pages

Language of Page
Development
Level A

Ensure that the primary language of each web page is clearly defined so that assistive technology can present the content in the correct language.

Acceptance criteria

• The default human language of the page is specified in the code.

3.1.2

Text in another language is correctly indicated

Language of Parts
Development
Level AA

Clearly identify when sections of text within a web page are in a language different from the default language, so assistive technology can present the information correctly.

Acceptance criteria

• The language of each passage or phrase within the content is specified, except for proper names, technical terms, indeterminate words, and adopted vernacular phrases.

3.1.3

Provide Definitions for Unusual Words

Unusual Words
Design
Level AAA

Ensure that definitions or explanations are available for technical terms, jargon, or unusual words used in content to help users understand them better.

Acceptance criteria

• A clear mechanism is provided to access definitions for words or phrases that are used in an unusual way, including technical jargon, idioms, or specialized terms.

3.1.4

Provide Expansions for Abbreviations

Abbreviations
Design
Level AAA

Ensure that users can easily find the full meaning of abbreviations used on a page.

Acceptance criteria

A clear method is available to view the expanded form or full meaning of any abbreviations used in the content.

3.1.5

Use easy to understand language

Reading Level
Design
Level AAA

Ensure that content is accessible to users with lower reading skills by offering simplified versions or alternative formats.

Acceptance criteria

• When text exceeds the reading level of lower secondary education (approximately 9 years of schooling), provide an alternative version that is easier to understand.

• Alternatively, offer supplemental content such as audio, illustrations, or a summary that conveys the same information in a simpler form.

3.1.6

Provide the pronunciation of words to clarify the meaning

Pronunciation
Design
Level AAA

Ensure users can understand how to pronounce words when their meaning is unclear from context alone.

Acceptance criteria

• Provide a clear mechanism for users to learn the pronunciation of words when it is necessary to understand their meaning.

3.2.1

Maintain Context on Focus

On Focus
Development
Level A

Ensure that navigating to or focusing on an element does not unexpectedly change the user’s current context.

Acceptance criteria

When a user interface element gains focus, the context or page does not change unexpectedly.

3.2.2

Input doesn’t change elements

On Input
Development
Level A

Ensure that changing settings or inputting data into user interface components does not unexpectedly alter the context or navigation.

Acceptance criteria

• Changes to a user interface component should not automatically result in a context change unless the user has been informed beforehand.

3.2.3

Consistent Navigation

Consistent Navigation
Design & Development
Level AA

Ensure that navigation elements that repeat across multiple pages maintain the same order and placement to facilitate predictable user interaction.

Acceptance criteria

• Navigation elements that appear on multiple pages should have a consistent order and location unless the user explicitly changes it.

3.2.4

Elements should be consistently named and used

Consistent Identification
Development
Level AA

Ensure that elements with the same function are identified consistently across all pages to make interactions predictable.

Acceptance criteria

• Components with identical functions should have consistent labels, icons, and accessibility attributes across all pages.

3.2.5

Only perform changes after a user interaction

Change on Request
Development
Level AAA

Allow users to control when major changes to content or context occur, ensuring changes are not automatic.

Acceptance criteria

• Major content or context changes should only occur in response to a user action or request.

• Provide a mechanism to turn off automatic changes if they are triggered by user actions.

3.2.6

Consistent Help

Consistent Help
Design
Level A

Ensure help and support options are consistently located across multiple pages to make them easier to find.

Acceptance criteria

• Help mechanisms (such as contact details, self-help options, and automated contact methods) should be in the same position on every page where they appear.

• The order of these help mechanisms relative to other page content should remain consistent unless the user initiates a change.

3.3.1

Errors are clearly explained

Error Identification
Design
Level A

Ensure that when errors occur, they are clearly identified and explained to users.

Acceptance criteria

• When an error is detected in user input, the affected item must be highlighted or indicated.

• A descriptive error message must be provided to explain what went wrong and how to correct it.

3.3.2

Clear labels or instructions for input

Labels or Instructions
Design
Level A

Ensure that all input fields or areas requiring user interaction have clear labels or instructions.

Acceptance criteria

• Every input field, dropdown, or interactive element must have a descriptive label or instruction indicating what information is required.

• Instructions should be provided where the purpose of the input or action is not immediately clear.

3.3.3

Give suggestions to fix errors

Error Suggestion
Design & Development
Level AA

When users make an error, offer suggestions on how to correct it to help them resolve issues quickly.

Acceptance criteria

• When an error is detected, provide specific suggestions on how to fix the issue.

• Suggestions should be clear, actionable, and relevant to the error encountered.

• Avoid providing suggestions if it compromises security or the purpose of the content.

3.3.4

Prevention Errors for Critical Actions

Error Prevention (Legal, Financial, Data)
Development
Level AA

Ensure users have the ability to review, correct, or reverse important actions to prevent errors in legal, financial, or data-related submissions.

Acceptance criteria

For actions that involve legal commitments, financial transactions, or data changes, implement at least one of the following measures:

Reversible: Allow users to undo or reverse their actions.

Checked: Validate user input for errors and provide options to correct them.

Confirmed: Provide a mechanism to review, confirm, and correct information before finalizing the submission.

3.3.5

Context-Sensitive Help is Available

Help
Design
Level AAA

Provide users with accessible and relevant help based on their current task to assist them in completing their actions accurately.

Acceptance criteria

• Context-sensitive help is available for users while they are performing tasks, offering relevant information or guidance.

3.3.6

Prevent errors for all user input

Error Prevention (All)
Development
Level AAA

Ensure users have the ability to review, correct, and undo their submissions to prevent mistakes and ensure accurate information entry.

Acceptance criteria

At least one of the following mechanisms must be available for pages where users submit information:

Reversible: Submissions can be undone.

Checked: Data entered by the user is validated for errors, and users can correct these errors.

Confirmed: Users can review and confirm their information before finalizing the submission.

3.3.7

Redundant Entry

Redundant Entry
Development
Level A

Prevent users from having to re-enter the same information multiple times within a single session to make multi-step processes easier to complete.

Acceptance criteria

Information that has already been provided should be:

Auto-Populated: Automatically filled in when needed again.

Available for Selection: Presented to the user as an option to select from previously entered data.

3.3.8

Accessible Authentication Methods

Accessible Authentication (Minimum)
Design & Development
Level AA

Ensure that authentication processes do not rely on cognitive tasks, like solving puzzles or remembering complex information, to make login easier for everyone.

Acceptance criteria

Authentication processes must not require users to solve puzzles, remember passwords, or transcribe codes unless:

Alternative Method: An alternative authentication method is provided that does not rely on cognitive tasks.

Assistance Mechanism: There is a mechanism to assist users in completing the cognitive task.

Object Recognition: The cognitive task involves recognizing objects.

Personal Content: The task involves identifying non-text content that the user has previously provided.

3.3.9

Enhanced Accessible Authentication

Accessible Authentication (Enhanced)
Development
Level AAA

Ensure authentication processes avoid requiring users to recognize objects or media, making it easier for those with cognitive disabilities.

Acceptance criteria

  • Authentication methods must not require users to recognize objects, images, or non-text media.

If cognitive function tests (CAPTCHA's for example) are used, they must be accompanied by:

  • Alternative Method: An alternative authentication method that does not rely on cognitive tasks.
  • Assistance Mechanism: A mechanism to assist users in completing any cognitive tasks if used.

Robust

4.1.2

Correctly set the role, name and value of elements

Name, Role, Value
Development
Level A

Ensure that all user interface components, such as form elements and links, have correct names, roles, and states that can be detected by assistive technologies, and notify users of any changes.

Acceptance criteria

Name and Role: All user interface components must have a clear and correct name and role that can be programmatically determined.

States and Values: User-set states, properties, and values must be programmatically accessible and update notifications must be provided.

Notification: Assistive technologies should receive updates when component states or values change.

4.1.3

Notify Users of Status Changes

Status Messages
Development
Level AA

Ensure that important status messages are communicated to users through assistive technologies even when they do not receive focus, so all users are aware of content updates.

Acceptance criteria

Programmatically Determined: Status messages must be programmatically detectable through roles or properties.

Assistive Technology Notification: Status updates should be announced to users by assistive technologies without requiring focus to be shifted.

1.1.1

Provide a Text Alternative for Non-Text Content

Non-text Content
Design & Development
Perceivable

Make sure that all non-text content, such as images, videos, and audio, has a text alternative. This helps people who cannot see or hear the content to understand and interact with it.

Acceptance criteria

  • All Non-Text Content: Must have a text alternative that serves the same purpose.
  • Controls and Input: If the non-text content is a control (e.g., a button) or accepts user input, it must have a name describing its purpose.
  • Time-Based Media: For audio or video content, the text alternative should at least identify the content.
  • Sensory Content: For content meant to create a sensory experience, provide a descriptive identification.
  • CAPTCHA: Provide text alternatives describing the CAPTCHA’s purpose and offer different types of CAPTCHA for various sensory perceptions.
  • Decoration and Formatting: If the content is decorative or used for formatting, it should be implemented in a way that assistive technology can ignore it.
1.2.1

Provide Alternatives for Prerecorded Audio-Only and Video-Only Content

Audio-only and Video-only (Prerecorded)
Design
Perceivable

Ensure that prerecorded audio-only and prerecorded video-only content has a text alternative so that people who cannot hear or see the content can still understand it.

Acceptance criteria

Prerecorded Audio-Only: Provide a text alternative that conveys the same information as the audio.

Prerecorded Video-Only: Provide either a text alternative or an audio description that conveys the same information as the video.

1.2.2

Provide Captions for Prerecorded Media

Captions (Prerecorded)
Design
Perceivable

Ensure that all prerecorded videos include captions so that people who are deaf or hard of hearing can understand the audio content.

Acceptance criteria

Captions Required: Provide captions for all prerecorded video content that includes audio.

1.2.3

Provide Audio Description or Media Alternative for Prerecorded Videos

Audio Description or Media Alternative (Prerecorded)
Design
Perceivable

Ensure that prerecorded videos include audio descriptions or a media alternative so that people who are blind or cannot understand the visual content can access the information.

Acceptance criteria

Audio Description: Provide an audio track that describes the visual content of the video.

Media Alternative: Offer an alternative form of media that conveys the same information as the video.

Exceptions: An audio description or media alternative is not required if the video is a media alternative for text and is clearly labeled as such.

1.3.1

Information structure stays the same without styling

Info and Relationships
Development
Perceivable

Use appropriate coding techniques to clearly define and reinforce the structure and relationships of content. This allows people using assistive technologies to understand the information, regardless of how it is styled visually.

Acceptance criteria

Programmatic Structure: Use the correct HTML elements (e.g., headings, lists, tables) to define the content’s structure and relationships.

Consistent Meaning: Ensure that the meaning and relationships of content are preserved even when visual styling changes.

Assistive Technology: Screen readers and other assistive technologies should be able to determine the content’s structure and relationships accurately without relying on visual presentation.

1.3.2

Content stays in the right order to keep context without styling

Meaningful Sequence
Development
Perceivable

Ensure that the order in which content is presented is meaningful and correctly maintained, so that users, including those using assistive technologies, can understand the content as intended.

Acceptance criteria

Correct Reading Sequence: The sequence in which content is presented should reflect its logical and meaningful order.

Programmatic Determination: The correct reading order can be programmatically determined and should be preserved even when visual styling changes.

Assistive Technology: Screen readers and other assistive technologies should present content in the intended order, regardless of how it is styled or arranged visually.

1.3.3

Don’t rely on color, shape, size or location

Sensory Characteristics
Design
Perceivable

Ensure that instructions for interacting with content do not rely solely on sensory characteristics (like color, shape, or sound) but provide clear, non-visual descriptions.

Acceptance criteria

Descriptive Instructions: Provide instructions for using controls and components based on their function or name, not just on their visual or sensory attributes.

Non-Visual Guidance: Instructions should be understandable without relying on sensory characteristics such as color, shape, size, position, or sound.

1.4.1

Don’t use color alone to inform

Use of Color
Design
Perceivable

Do not rely solely on color to convey information, indicate actions, or distinguish visual elements. Use additional methods, such as text, shapes, or patterns, to ensure that all users can understand the information.

Acceptance criteria

Multimodal Communication: Use more than just color to convey information, indicate actions, or differentiate elements.

Complementary Methods: Provide additional cues, such as text labels, patterns, or shapes, to ensure that information is accessible to those who may have color vision deficiencies or other visual impairments.

1.4.2

Pause, stop or mute autoplaying audio

Audio Control
Design & Development
Perceivable

Ensure that users can manage audio content on a page so that it does not disrupt their experience. This includes providing controls to pause, stop, or adjust the volume of audio that plays automatically.

Acceptance criteria

Control Mechanism: If audio plays automatically for more than 3 seconds, provide a control mechanism to pause or stop the audio.

Volume Control: Alternatively, provide a way to adjust the audio volume independently from the system volume.

2.1.1

A keyboard can be used to interact with the interface

Keyboard
Development
Operable

All functionalities must be operable using a keyboard without requiring specific timing for keystrokes, except for functions that inherently depend on user movement paths.

Acceptance criteria

Keyboard Accessibility: All features must be accessible through keyboard navigation.

No Timing Restrictions: Keyboard actions should not require specific timing or sequences unless the function inherently needs user movement paths.

2.1.2

You can remove focus from any element with your keyboard

No Keyboard Trap
Development
Operable

Ensure that users can navigate away from any component using only the keyboard, and provide guidance if non-standard methods are required.

Acceptance criteria

Keyboard Navigation: Users must be able to move focus away from any component using only the keyboard.

Guidance for Non-Standard Methods: If non-standard keyboard methods are needed to exit a component, users should be informed.

2.1.4

Single key shortcuts can be turned off or remapped

Character Key Shortcuts
Development
Operable

Ensure that keyboard shortcuts using only letters, numbers, or symbols can be either turned off, remapped, or are only active when the relevant component is focused.

Acceptance criteria

Turn Off: Provide a mechanism to disable the shortcut.

Remap: Allow remapping the shortcut to include non-printable keys (e.g., Ctrl, Alt).

Active on Focus: Ensure shortcuts are active only when the relevant component has focus.

2.2.1

Time limits can be turned off or extended

Timing Adjustable
Design & Development
Operable

Allow users to manage time limits by turning them off, adjusting them, or extending them when needed. This helps accommodate varying needs for completing tasks.

Acceptance criteria

Turn Off: Users can turn off the time limit before it starts.

Adjust: Users can adjust the time limit to be at least ten times the default setting.

Extend: Users are warned before time expires, given at least 20 seconds to extend the time limit with a simple action, and can extend it at least ten times.

Exceptions: Time limits that are essential for real-time events, longer than 20 hours, or are crucial for the activity are exempt.

2.2.2

Animating or auto-updating content can be paused, stopped or hidden

Pause, Stop, Hide
Design & Development
Operable

Allow users to pause, stop, or hide content that moves, blinks, scrolls, or auto-updates to avoid distractions and interruptions.

Acceptance criteria

Moving, Blinking, Scrolling: Provide a way to pause, stop, or hide content that moves, blinks, or scrolls automatically for more than 5 seconds when presented with other content.

Auto-Updating: Provide a way to pause, stop, hide, or control the update frequency of auto-updating content that starts automatically when presented with other content.

2.3.1

Don’t flash content for more than 3x per second

Three Flashes or Below Threshold
Design
Operable

Ensure content does not flash more than three times per second to prevent seizures and other health issues. Avoid using saturated red colors and high contrast in flashing content.

Acceptance criteria

• Content does not flash more than three times per second.

• Flashes must be below the general flash and red flash thresholds.

2.4.1

Bypass Repetitive Content

Bypass Blocks
Development
Operable

Provide mechanisms to skip repeated content blocks for easier keyboard navigation. This helps users, especially those relying on keyboard navigation, to move efficiently through pages without having to tab through repetitive elements like headers and navigation menus.

Acceptance criteria

Users can skip repetitive content blocks that appear on multiple pages.

2.4.2

Each web page has a meaningful title

Page Titled
Development
Operable

Ensure each web page has a descriptive title that clearly indicates its topic or purpose. This helps users identify and differentiate between pages, improving navigation and usability.

Acceptance criteria

Web pages must have titles that clearly describe the content or purpose of the page.

2.4.3

Keyboard users navigate content in a logical and meaningful order

Focus Order
Development
Operable

Ensure that when navigating a web page using a keyboard, focusable elements (like links, buttons, and form fields) receive focus in a sequence that makes sense and maintains the intended meaning and functionality of the page. This helps users understand and interact with the content efficiently.

Acceptance criteria

Focusable components must follow a logical order that preserves the intended meaning and functionality during keyboard navigation.

2.4.4

Users understand the function and destination of each link

Link Purpose (In Context)
Design
Operable

Ensure that the purpose of each link is clear from its text or the surrounding context, so users know what to expect when they activate it. This clarity helps users with visual or cognitive disabilities navigate and interact with content more effectively.

Acceptance criteria

The purpose of each link is understandable from its text or from the context provided by nearby content.

2.5.1

All touch interactions can be performed with a single finger

Pointer Gestures
Development
Operable

Functionality that requires complex or multi-touch gestures should also be operable with a single touch or pointer gesture. This ensures that users who cannot perform multi-point or path-based gestures have access to all functions. This requirement applies to web content but does not extend to actions necessary for the operation of the user agent or assistive technology.

Acceptance criteria

• Any function that is activated by multi-touch or path-based gestures must also be operable with a single touch or pointer gesture, unless the complex gesture is essential to the functionality.

2.5.2

Reduce accidental activation of controls by mouse or touch interactions

Pointer Cancellation
Development
Operable

For actions that are triggered by a single pointer, ensure that users can easily cancel or undo unintended actions. This is important for preventing mistakes and ensuring that users can recover from accidental inputs. Functions should not rely solely on the initial pointer press to execute actions.

Acceptance criteria

For functionality operated by a single pointer, at least one of the following must be true:

No Down-Event: The action is not executed until the pointer is released.

Abort or Undo: The function is completed on the up-event, and users have a way to cancel the action before completion or undo it afterward.

Up Reversal: The up-event reverses any outcome of the preceding down-event.

Essential: The function requires completion on the down-event due to its nature (e.g., emulating a keyboard key press).

2.5.3

Visible labels should match the accessibility name

Label in Name
Design & Development
Operable

Ensure that the text or images of text used for visual labels on controls match the accessibility name provided in the code. This alignment is crucial for users who rely on speech recognition or screen readers, as these tools use the accessibility name to interact with controls.

Acceptance criteria

For user interface components with visual labels (text or images of text):

• The name in the code must include the text presented visually.

• Ideally, the text of the label should appear at the beginning of the accessibility name.

2.5.4

Ensure content does not rely solely on device movement

Motion Actuation
Design & Development
Operable

Functionality that relies on device motion should also be operable through other user interface components. Allow users to disable motion-based controls to avoid accidental activation, except in specific cases where motion is essential for the function.

Acceptance criteria

• Functionality operable by device motion must also be operable through a non-motion-based interface.

• Users must be able to disable motion-based interactions to prevent accidental activation, unless:

Supported Interface: The motion-based functionality is supported by an accessible interface.

Essential: The motion-based functionality is crucial and cannot be replaced by another method without affecting the activity’s purpose.

3.1.1

Set Default Language for Web Pages

Language of Page
Development
Understandable

Ensure that the primary language of each web page is clearly defined so that assistive technology can present the content in the correct language.

Acceptance criteria

• The default human language of the page is specified in the code.

3.2.1

Maintain Context on Focus

On Focus
Development
Understandable

Ensure that navigating to or focusing on an element does not unexpectedly change the user’s current context.

Acceptance criteria

When a user interface element gains focus, the context or page does not change unexpectedly.

3.2.2

Input doesn’t change elements

On Input
Development
Understandable

Ensure that changing settings or inputting data into user interface components does not unexpectedly alter the context or navigation.

Acceptance criteria

• Changes to a user interface component should not automatically result in a context change unless the user has been informed beforehand.

3.2.6

Consistent Help

Consistent Help
Design
Understandable

Ensure help and support options are consistently located across multiple pages to make them easier to find.

Acceptance criteria

• Help mechanisms (such as contact details, self-help options, and automated contact methods) should be in the same position on every page where they appear.

• The order of these help mechanisms relative to other page content should remain consistent unless the user initiates a change.

3.3.1

Errors are clearly explained

Error Identification
Design
Understandable

Ensure that when errors occur, they are clearly identified and explained to users.

Acceptance criteria

• When an error is detected in user input, the affected item must be highlighted or indicated.

• A descriptive error message must be provided to explain what went wrong and how to correct it.

3.3.2

Clear labels or instructions for input

Labels or Instructions
Design
Understandable

Ensure that all input fields or areas requiring user interaction have clear labels or instructions.

Acceptance criteria

• Every input field, dropdown, or interactive element must have a descriptive label or instruction indicating what information is required.

• Instructions should be provided where the purpose of the input or action is not immediately clear.

3.3.7

Redundant Entry

Redundant Entry
Development
Understandable

Prevent users from having to re-enter the same information multiple times within a single session to make multi-step processes easier to complete.

Acceptance criteria

Information that has already been provided should be:

Auto-Populated: Automatically filled in when needed again.

Available for Selection: Presented to the user as an option to select from previously entered data.

4.1.2

Correctly set the role, name and value of elements

Name, Role, Value
Development
Robust

Ensure that all user interface components, such as form elements and links, have correct names, roles, and states that can be detected by assistive technologies, and notify users of any changes.

Acceptance criteria

Name and Role: All user interface components must have a clear and correct name and role that can be programmatically determined.

States and Values: User-set states, properties, and values must be programmatically accessible and update notifications must be provided.

Notification: Assistive technologies should receive updates when component states or values change.

Don't forget to include level A when testing level AA
1.2.4

Provide Captions for Live Audio Content

Captions (Live)
Design
Perceivable

Ensure that all live audio content in videos includes captions so that people who are deaf or hard of hearing can follow along in real time.

Acceptance criteria

Live Captions: Provide real-time captions for all live audio content in synchronized media.

Scope: Captions should be available for all live audio broadcasts, including webcasts and live streams.

1.2.5

Provide Audio Description for Prerecorded Videos

Audio Description (Prerecorded)
Design
Perceivable

Ensure that all prerecorded videos include an audio description that provides a spoken description of the visual content, so that people who are blind or have low vision can understand the visual aspects of the video.

Acceptance criteria

Audio Description Required: Provide an audio description for all prerecorded video content.

Synchronized Media: The audio description should be synchronized with the video, describing visual elements and actions as they occur.

1.3.4

Support Multiple Device Orientations

Orientation
Design & Development
Perceivable

Ensure that content can be accessed and used in both portrait and landscape orientations. This allows users to interact with the content regardless of how their device is positioned.

Acceptance criteria

Flexible Orientation: Content should not be restricted to a single display orientation (portrait or landscape) unless a specific orientation is essential for functionality.

Orientation Adaptability: The content should remain accessible and functional when the device is rotated between portrait and landscape orientations.

1.3.5

Clearly explain the input you need

Identify Input Purpose
Development
Perceivable

Clearly indicate the purpose of each input field in forms to help users understand what information is required, especially for those with cognitive disabilities.

Acceptance criteria

Programmatic Identification: Ensure that the purpose of each input field can be programmatically determined using appropriate HTML elements or attributes.

Field Types and Labels: Use clear labels and input types that specify what information is expected and enable features like autocomplete when appropriate.

1.4.10

Reflow content to avoid scrolling in 2 directions

Reflow
Design & Development
Perceivable

Ensure that content can be enlarged without requiring scrolling in both directions. This means text should reflow within the viewport, making it accessible to users who need larger text.

Acceptance criteria

Vertical Scrolling: Content must fit within a width of 320 CSS pixels without horizontal scrolling.

Horizontal Scrolling: Content must fit within a height of 256 CSS pixels without vertical scrolling.

Exceptions: Content requiring two-dimensional scrolling, like maps, diagrams, presentations, data tables, and games, is not subject to this requirement.

1.4.11

Non-text elements have a contrast of at least 3:1

Non-text Contrast
Design
Perceivable

Ensure that important visual information, like user interface components and graphical objects, has sufficient contrast against its background. This helps users with low vision distinguish key elements.

Acceptance criteria

Contrast Ratio: Visual elements must have a contrast ratio of at least 3:1 against adjacent colors.

User Interface Components: Contrast is required for elements necessary for understanding the interface, excluding inactive components or those whose appearance is not controlled by the author.

Graphical Objects: Contrast is required for parts of graphics essential for understanding the content, except when specific presentation is crucial to convey information.

1.4.12

Text spacing

Text Spacing
Design & Development
Perceivable

Ensure that text maintains readability when users adjust text spacing settings, including line height, paragraph spacing, letter spacing, and word spacing. This flexibility helps users with different reading needs.

Acceptance criteria

Line Height: At least 1.5 times the font size.

Paragraph Spacing: At least 2 times the font size.

Letter Spacing: At least 0.12 times the font size.

Word Spacing: At least 0.16 times the font size.

No Loss of Content: Content or functionality must not be lost when users adjust these settings.

1.4.13

Focus and hover content stay visible and is easy to dismiss

Content on Hover or Focus
Development
Perceivable

Ensure that content triggered by hover or focus is predictable, dismissible, and does not disappear unexpectedly, to improve accessibility and usability.

Acceptance criteria

Dismissible: Users can dismiss additional content without changing hover or focus, unless it’s an input error or doesn’t obscure or replace other content.

Hoverable: Additional content triggered by hover remains visible if the pointer moves over it.

Persistent: Content remains visible until the trigger is removed, the user dismisses it, or the content is no longer valid.

1.4.3

Text should have a high contrast

Contrast (Minimum)
Design
Perceivable

Make sure that text and images of text have enough contrast with their background so that they are readable by everyone, including those with visual impairments.

Acceptance criteria

Contrast Ratio: Text and images of text must have a minimum contrast ratio of 4.5:1 against their background.

Large Text: For large text (18px or larger), the contrast ratio should be at least 3:1.

Incidental Text: Text or images of text that are purely decorative, part of inactive user interface components, or not visible do not need to meet contrast requirements.

Logotypes: Text that is part of a logo or brand name is exempt from contrast ratio requirements.

1.4.4

Allow Text to Be Resized

Resize Text
Design & Development
Perceivable

Ensure that text on your website can be resized up to 200% without losing any content or functionality. This helps users who need larger text to read comfortably.

Acceptance criteria

Resizing Capability: Text can be resized up to 200% from its original size without the need for assistive technology.

Content and Functionality: When text is resized, all content and functionality must remain accessible and usable.

1.4.5

Use Text Instead of Images of Text

Images of Text
Design
Perceivable

Whenever possible, use actual text rather than images of text. This allows users to adjust how the text is presented according to their needs.

Acceptance criteria

Text vs. Images: Use text to convey information instead of using images of text, unless:

Customizable: The image of text can be customized to meet user requirements.

Essential: The specific presentation of the text is crucial to conveying the intended information (e.g., logotypes or brand names).

2.4.11

Ensure users can see which item currently has keyboard focus

Focus Not Obscured (Minimum)
Development
Operable

When a user interface component receives keyboard focus, it must be at least partially visible on the screen. This ensures that users who rely on keyboard navigation can see and interact with the focused element, even if other content is on the page.

Acceptance criteria

• Any element that receives keyboard focus must not be completely obscured by other content or off-screen.

• If content can be moved or repositioned by the user, ensure the initial position of the focusable component is not hidden.

2.4.5

Users can access content through multiple methods

Multiple Ways
Design
Operable

Provide at least two different ways for users to navigate to the same content within a set of web pages. This ensures that users who have different navigation preferences or disabilities can still reach the desired information.

Acceptance criteria

At least two methods are available to locate a web page within a set of pages, unless the page is a necessary step in a process or results from a specific action.

2.4.6

Content is clearly described using headings and labels

Headings and Labels
Design
Operable

Ensure that all headings and labels effectively convey the topic or purpose of the content they describe. This helps users, particularly those with cognitive or visual disabilities, understand and navigate the page more easily.

Acceptance criteria

Headings and labels accurately describe the content or functionality they represent.

2.4.7

Clear which element is focused when navigating via keyboard

Focus Visible
Design
Operable

Ensure that every interactive element on the page provides a visible indicator when it receives keyboard focus. This helps keyboard users, especially those with visual impairments, identify and interact with the currently focused element.

Acceptance criteria

All keyboard-focusable elements display a visible indicator when in focus.

2.5.7

Provide Alternatives to Dragging Movements

Dragging Movements
Design & Development
Operable

Ensure that any functionality that requires dragging can also be performed using a simpler, single-point action. This helps users who cannot drag items or perform complex movements.

Acceptance criteria

  • All features that involve dragging can be operated using a simple pointer action without dragging.
  • Dragging should only be used if it is essential for the function or if it is determined by the user agent and cannot be changed by the content author.
2.5.8

Ensure Minimum Target Size for Interactive Controls

Target Size (Minimum)
Design & Development
Operable

Make sure that all interactive controls (like buttons and links) are large enough or spaced adequately so that they are easy to activate, even for users with physical impairments who may struggle with small or closely placed targets.

Acceptance criteria

• Targets must be at least 24 by 24 CSS pixels.

• If targets are smaller than 24 by 24 pixels, they should be spaced so that they do not overlap when a 24-pixel diameter circle is centered on each.

• Alternatives are provided if targets are smaller than the minimum size.

3.1.2

Text in another language is correctly indicated

Language of Parts
Development
Understandable

Clearly identify when sections of text within a web page are in a language different from the default language, so assistive technology can present the information correctly.

Acceptance criteria

• The language of each passage or phrase within the content is specified, except for proper names, technical terms, indeterminate words, and adopted vernacular phrases.

3.2.3

Consistent Navigation

Consistent Navigation
Design & Development
Understandable

Ensure that navigation elements that repeat across multiple pages maintain the same order and placement to facilitate predictable user interaction.

Acceptance criteria

• Navigation elements that appear on multiple pages should have a consistent order and location unless the user explicitly changes it.

3.2.4

Elements should be consistently named and used

Consistent Identification
Development
Understandable

Ensure that elements with the same function are identified consistently across all pages to make interactions predictable.

Acceptance criteria

• Components with identical functions should have consistent labels, icons, and accessibility attributes across all pages.

3.3.3

Give suggestions to fix errors

Error Suggestion
Design & Development
Understandable

When users make an error, offer suggestions on how to correct it to help them resolve issues quickly.

Acceptance criteria

• When an error is detected, provide specific suggestions on how to fix the issue.

• Suggestions should be clear, actionable, and relevant to the error encountered.

• Avoid providing suggestions if it compromises security or the purpose of the content.

3.3.4

Prevention Errors for Critical Actions

Error Prevention (Legal, Financial, Data)
Development
Understandable

Ensure users have the ability to review, correct, or reverse important actions to prevent errors in legal, financial, or data-related submissions.

Acceptance criteria

For actions that involve legal commitments, financial transactions, or data changes, implement at least one of the following measures:

Reversible: Allow users to undo or reverse their actions.

Checked: Validate user input for errors and provide options to correct them.

Confirmed: Provide a mechanism to review, confirm, and correct information before finalizing the submission.

3.3.8

Accessible Authentication Methods

Accessible Authentication (Minimum)
Design & Development
Understandable

Ensure that authentication processes do not rely on cognitive tasks, like solving puzzles or remembering complex information, to make login easier for everyone.

Acceptance criteria

Authentication processes must not require users to solve puzzles, remember passwords, or transcribe codes unless:

Alternative Method: An alternative authentication method is provided that does not rely on cognitive tasks.

Assistance Mechanism: There is a mechanism to assist users in completing the cognitive task.

Object Recognition: The cognitive task involves recognizing objects.

Personal Content: The task involves identifying non-text content that the user has previously provided.

4.1.3

Notify Users of Status Changes

Status Messages
Development
Robust

Ensure that important status messages are communicated to users through assistive technologies even when they do not receive focus, so all users are aware of content updates.

Acceptance criteria

Programmatically Determined: Status messages must be programmatically detectable through roles or properties.

Assistive Technology Notification: Status updates should be announced to users by assistive technologies without requiring focus to be shifted.

Don't forget to include levels A & AA when testing level AAA
1.2.6

Provide Sign Language Interpretation for Prerecorded Videos

Sign Language (Prerecorded)
Design
Perceivable

Ensure that all prerecorded videos include sign language interpretation for audio content, so that people who are deaf or hard of hearing can access the content in their preferred mode of communication.

Acceptance criteria

Sign Language Interpretation Required: Provide a sign language interpretation for all prerecorded audio content in synchronized media.

Scope: Sign language interpretation should be available for all prerecorded audio in time-based media.

1.2.7

Provide Extended Audio Description for Prerecorded Videos

Extended Audio Description (Prerecorded)
Design
Perceivable

Ensure that prerecorded videos include extended audio descriptions that offer detailed spoken descriptions of visual content, especially when standard audio descriptions are not sufficient.

Acceptance criteria

Extended Audio Description Required: Provide extended audio descriptions for prerecorded videos where regular pauses in the audio are insufficient to describe the visual content adequately.

Alternative Version: Offer an alternative version of the video that includes extended audio descriptions. This version should temporarily pause the main audio (and video) to allow detailed descriptions to be provided between dialogue.

1.2.8

Provide Media Alternatives for Prerecorded Videos

Media Alternative (Prerecorded)
Design
Perceivable

Provide a text-based alternative for all prerecorded video content to ensure that people who are deaf-blind or prefer reading can access the information at their own pace.

Acceptance criteria

Text Alternative Required: Offer a text equivalent for all prerecorded synchronized media and prerecorded video-only content.

Scope: The text alternative must be different from captions or a transcript and should fully convey the information presented in the video.

1.2.9

Provide Text Alternatives for Live Audio-Only Content

Audio-only (Live)
Design
Perceivable

Ensure that live audio-only content includes a text-based alternative so that people who are deaf or hard of hearing can access the information in real time.

Acceptance criteria

Text Alternative Required: Provide a text equivalent for all live audio-only content.

Scope: The text alternative should deliver the same information as the live audio, making it accessible for individuals who cannot hear or understand the audio.

1.3.6

Identify the Purpose of User Interface Components

Identify Purpose
Development
Perceivable

Clearly define the purpose of all controls, icons, and key regions on a page using code. This helps users understand their function, especially those with cognitive disabilities who might find it challenging to interpret controls based on names alone.

Acceptance criteria

Programmatic Identification: Ensure that the purpose of user interface components, icons, and regions can be programmatically determined using appropriate code or attributes.

Clear Meaning: Use ARIA roles, landmarks, or other markup techniques to describe the purpose and function of key elements on the page.

1.4.6

Enhanced minimum contrast of 7:1

Contrast (Enhanced)
Design
Perceivable

Provide strong contrast between text and its background to ensure readability for users who need higher contrast levels.

Acceptance criteria

Contrast Ratio: Text and images of text must have a contrast ratio of at least 7:1 against their background.

Large Text: Large-scale text (18px or larger) must have a contrast ratio of at least 4.5:1.

Incidental Text: Text or images of text that are decorative, part of inactive UI components, not visible, or part of a picture with significant other visual content are exempt from contrast requirements.

Logotypes: Text within logos or brand names does not need to meet the enhanced contrast ratio.

1.4.7

Minimize Background Audio for Speech Content

Low or No Background Audio
Design
Perceivable

Ensure that prerecorded audio primarily containing speech is clear and not disrupted by background sounds.

Acceptance criteria

For prerecorded audio-only content that features primarily speech (excluding audio CAPTCHAs, audio logos, or musical vocalizations), one of the following must apply:

No Background: The audio does not contain any background sounds.

Turn Off: Background sounds can be turned off by the user.

20 dB Lower: Background sounds are at least 20 decibels lower than the foreground speech, except for brief, occasional sounds lasting only 1-2 seconds.

1.4.8

Visual presentation of text

Visual Presentation
Design
Perceivable

Allow users to adjust text appearance to meet their preferences or needs for better readability and accessibility.

Acceptance criteria

For blocks of text, one or more of the following must be possible:

Color Customization: Users can select foreground and background colors.

Width Limitation: Text width is limited to no more than 80 characters or glyphs per line (40 characters for CJK languages).

Text Alignment: Text is not justified (aligned to both left and right margins).

Line and Paragraph Spacing:

• Line spacing (leading) is at least 1.5 times the font size within paragraphs.

• Paragraph spacing is at least 1.5 times larger than the line spacing.

Text Resizing: Text can be resized up to 200% without requiring horizontal scrolling.

1.4.9

Images of text are only used for decoration or when necessary

Images of Text (No Exception)
Design
Perceivable

Ensure users can adjust text presentation by avoiding images of text unless essential for style or decoration. Use text whenever possible for content, as images cannot be resized or reformatted, limiting accessibility.

Acceptance criteria

Use Images of Text only when:

Decorative: The text is used purely for decoration and does not convey critical information.

Essential Presentation: The specific presentation of text is essential for conveying meaning (e.g., logotypes or certain branding elements).

2.1.3

A keyboard can be used to interact with the interface without exceptions

Keyboard (No Exception)
Development
Operable

Ensure that every action available with a mouse can also be performed using a keyboard, without needing specific timings for keystrokes.

Acceptance criteria

Keyboard Operation: All functionalities must be operable using a keyboard.

No Timing Requirements: Functions should not require specific timing or sequences of keystrokes.

2.2.3

No Unnecessary Time Limits

No Timing
Design
Operable

Avoid using time limits for tasks and interactions, unless required for non-interactive media or real-time events.

Acceptance criteria

• No time limits are imposed for tasks or interactions, except for synchronized media (e.g., video) or real-time events.

2.2.4

Postpone or stop interruptions

Interruptions
Design & Development
Operable

Allow users to postpone or suppress interruptions, except for emergencies, to avoid disruptions.

Acceptance criteria

• Users can delay or turn off interruptions, except in emergencies.

2.2.5

Preserve Data on Re-authentication

Re-authenticating
Development
Operable

Ensure that users do not lose their activity or data when their session expires and they need to re-authenticate. This helps users who may require more time to complete their tasks.

Acceptance criteria

• Users can continue their activity and retain their data after re-authenticating if their session expires.

2.2.6

Inform Users of Session Timeouts

Timeouts
Development
Operable

Notify users about the duration of inactivity before they risk losing data, unless data is preserved for more than 20 hours of inactivity. This ensures users are aware of how long they have to complete actions.‍

Acceptance criteria

• Users are warned about the duration of inactivity that could lead to data loss, unless data is preserved for more than 20 hours.

2.3.2

Don’t flash content for more than 3x per second (No exceptions)

Three Flashes
Design
Operable

Ensure content does not flash more than three times per second to prevent triggering seizures or other health issues, protecting users who are sensitive to rapid flashing.

Acceptance criteria

• Content flashes no more than three times per second.

2.3.3

Animation started by a user interaction can be turned off

Animation from Interactions
Design & Development
Operable

Allow users to disable or minimize motion and animations triggered by their interactions, based on their preferences. This helps prevent motion-induced discomfort and ensures a more comfortable experience for those sensitive to motion effects.

Acceptance criteria

  • Users can disable animations triggered by interactions unless the animation is essential for functionality or conveying information.
2.4.10

Section headers are used to organize content

Section Headings
Development
Operable

Provide headings to clearly delineate different sections of content. This helps users, especially those with cognitive or visual disabilities, to navigate and understand the structure of the content.

Acceptance criteria

• Headings are used to separate and organize content into distinct sections.

• Headings can be titles or other forms of content labels.

2.4.12

The entire focused item is fully visible on the screen

Focus Not Obscured (Enhanced)
Development
Operable

When a user interface component receives keyboard focus, it must be completely visible without any part of it being obscured by other content or off-screen. This allows users who rely on keyboard navigation to see the entirety of the focused element and interact with it effectively.

Acceptance criteria

• No part of the component that receives keyboard focus should be covered by other content or be out of view.

• Ensure that the component is fully visible within the viewport, without requiring the user to scroll or adjust the view to see it.

2.4.13

Keyboard focus indicator is easily visible and distinguishable

Focus Appearance
Design
Operable

When an element receives keyboard focus, the focus indicator must be clearly visible. This makes it easier for users to locate and interact with the focused element, especially those with visual impairments or older adults.

Acceptance criteria

• The focus indicator is at least as wide as a 2 CSS pixel thick border of the unfocused component.

• The focus indicator has a contrast ratio of at least 3:1 between its focused and unfocused states.

2.4.8

You always know where you are within an app or website

Location
Design
Operable

Provide clear indicators, such as breadcrumbs, site maps, or other navigation aids, to show users their location within a set of web pages. This helps users understand their context and navigate more effectively, especially those with cognitive disabilities.

Acceptance criteria

Users can always identify their current location within the site’s structure through visible navigational aids.

2.4.9

The purpose or destination of a link is clear

Link Purpose (Link Only)
Design
Operable

Ensure that each link has descriptive text that clearly indicates where the link will lead or what action it will perform. This helps all users, particularly those using assistive technologies, understand link purposes without needing additional context.

Acceptance criteria

The purpose of each link can be determined from the link text alone. The text should be clear and informative, avoiding ambiguity.

2.5.5

Target size is at least 44x44 pixels

Target Size (Enhanced)
Design & Development
Operable

Make custom interactive targets (such as buttons and links) at least 44 by 44 CSS pixels to accommodate users who have difficulty tapping small objects.

Acceptance criteria

• Interactive targets must be at least 44 by 44 CSS pixels in size.

2.5.6

Support Multiple Input Methods

Concurrent Input Mechanisms
Development
Operable

Allow users to use various input methods simultaneously and do not restrict them to just one type of input. This ensures everyone can interact with content using the input method that suits them best, whether it’s a mouse, keyboard, touch screen, voice commands, or assistive devices.

Acceptance criteria

• Users can switch between different input methods (like mouse, keyboard, touch, or voice) without restrictions.

• Input methods should not be limited unless it is necessary for security reasons, to follow user settings, or if the restriction is essential for specific functionality.

3.1.3

Provide Definitions for Unusual Words

Unusual Words
Design
Understandable

Ensure that definitions or explanations are available for technical terms, jargon, or unusual words used in content to help users understand them better.

Acceptance criteria

• A clear mechanism is provided to access definitions for words or phrases that are used in an unusual way, including technical jargon, idioms, or specialized terms.

3.1.4

Provide Expansions for Abbreviations

Abbreviations
Design
Understandable

Ensure that users can easily find the full meaning of abbreviations used on a page.

Acceptance criteria

A clear method is available to view the expanded form or full meaning of any abbreviations used in the content.

3.1.5

Use easy to understand language

Reading Level
Design
Understandable

Ensure that content is accessible to users with lower reading skills by offering simplified versions or alternative formats.

Acceptance criteria

• When text exceeds the reading level of lower secondary education (approximately 9 years of schooling), provide an alternative version that is easier to understand.

• Alternatively, offer supplemental content such as audio, illustrations, or a summary that conveys the same information in a simpler form.

3.1.6

Provide the pronunciation of words to clarify the meaning

Pronunciation
Design
Understandable

Ensure users can understand how to pronounce words when their meaning is unclear from context alone.

Acceptance criteria

• Provide a clear mechanism for users to learn the pronunciation of words when it is necessary to understand their meaning.

3.2.5

Only perform changes after a user interaction

Change on Request
Development
Understandable

Allow users to control when major changes to content or context occur, ensuring changes are not automatic.

Acceptance criteria

• Major content or context changes should only occur in response to a user action or request.

• Provide a mechanism to turn off automatic changes if they are triggered by user actions.

3.3.5

Context-Sensitive Help is Available

Help
Design
Understandable

Provide users with accessible and relevant help based on their current task to assist them in completing their actions accurately.

Acceptance criteria

• Context-sensitive help is available for users while they are performing tasks, offering relevant information or guidance.

3.3.6

Prevent errors for all user input

Error Prevention (All)
Development
Understandable

Ensure users have the ability to review, correct, and undo their submissions to prevent mistakes and ensure accurate information entry.

Acceptance criteria

At least one of the following mechanisms must be available for pages where users submit information:

Reversible: Submissions can be undone.

Checked: Data entered by the user is validated for errors, and users can correct these errors.

Confirmed: Users can review and confirm their information before finalizing the submission.

3.3.9

Enhanced Accessible Authentication

Accessible Authentication (Enhanced)
Development
Understandable

Ensure authentication processes avoid requiring users to recognize objects or media, making it easier for those with cognitive disabilities.

Acceptance criteria

  • Authentication methods must not require users to recognize objects, images, or non-text media.

If cognitive function tests (CAPTCHA's for example) are used, they must be accompanied by:

  • Alternative Method: An alternative authentication method that does not rely on cognitive tasks.
  • Assistance Mechanism: A mechanism to assist users in completing any cognitive tasks if used.