• Identify non-text content:

• • Determine all the relevant elements (i.e. images, graphics, objects, etc.).

• Provide text alternatives:

• • Implement a description for each element equivalent to the meaning of the non-text content (e.g., using the alt-attribute).

• Supplementary long descriptions:

• • If the alternative text is not sufficient, offer a detailed description and reference it in the alternative text.

• Mark decorative content:

• • Use empty alt-attributes for pure decorative contents and graphics or otherwise hide them from screenreaders.

• CAPTCHAs:

• • Avoid graphical CAPTCHAs or replace them with accessible alternatives.

• Prerecorded audio and video content

• • Audio: Provide text transcripts for all recorded audio media.
  • Video: For recorded video content, text transcripts or audio descriptions must be provided.

• Subtitles

• • Recorded Videos: Synchronized subtitles are available.
  • Live-Audio: Synchronized subtitles are available.

• Audio description and media alternatives

• • Audio (e.g. podcasts): Must include descriptive text transcripts.
  • Video: Should include descriptive text or audio descriptions; recorded videos also need additional audio descriptions for visual content not covered by the standard descriptions.

• Info and Relationships

• • Headings: Use correct markup (h1 to h6) so the structure can be programmatically determined.
  • Lists: Properly format enumerations as lists (ul, ol, dl).

• Forms

• • Ensure the grouping of related blocks of information.
  • Logical linking of labels and associated input fields.

• Data Tables

• • Use markup correctly (column, row, and table headings, summaries).
  • Make them readable in a linear manner and do not use them for layout purposes.

• Text Management

• • Special text (e.g., quotations, references) must be correctly formatted (e.g., using

    and ).

• Meaningful Sequence

• • Ensure logical order for screenreaders even without CSS.
  • Avoid spacing via empty table cells.
  • Use CSS instead of spaces for visual spacing.
  • Avoid confusion caused by content positioning with CSS.

• Sensory Characteristics

• • Do not use instructions based solely on visual or auditory cues (e.g. "press the green button on the left").

• Orientation

• • Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

• Identify Input Purpose

• • The purpose of each input field collecting information about the user can be programmatically determined when:
  • • The input field serves a purpose identified in the Input Purposes for user interface components section; and
    • The content is implemented using technologies with support for identifying the expected meaning for form input data.

The goal is to present content in different ways without losing any information or structure.

• Use of Color

• • Information cannot be conveyed solely by color.
  • Ensure a contrast ratio of at least 3:1 when color is used to distinguish elements.

• Audio Controls

• • If audio plays automatically for longer than 3 seconds, a stop button must be provided.

• Contrast (Minimum)

• • Regular Text: Minimum contrast of 4.5:1.
  • Large/Bold Text: Minimum contrast of 3:1.
  • Applies to all text, input borders, informative graphics (excluding logos/decorative graphics).

• Changing Text Size

• • Use relative CSS units (% or em) for font sizes to allow zoom or text resizing.

• Images of Text Content

• • Use real text instead of text in images.
  • Exceptions: Scalable/logically important content like logos/brand names with alt/title attributes.

• Reflow*

• • Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
  • • Vertical scrolling content at a width equivalent to 320 CSS pixels;
    • Horizontal scrolling content at a height equivalent to 256 CSS pixels.

• Non-text Contrast

• • The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
  • • User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
    • Graphical Objects:Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

• Text Spacing**

• • In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
  • • Line height (line spacing) to at least 1.5 times the font size.
    • Spacing following paragraphs to at least 2 times the font size.
    • Letter spacing (tracking) to at least 0.12 times the font size.
    • Word spacing to at least 0.16 times the font size.

• Content on Hover or Focus***

• • Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
  • • Dismissible: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content.
    • Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing.
    • Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

The goal is for users to have no problems seeing and hearing content, including the separation between foreground and background.

^*EXCEPTION: Parts of the content which require two-dimensional layout for usage or meaning.

^*NOTE:

• 320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom.
• Examples of content which requires two-dimensional layout are images required for understanding (such as maps and diagrams), video, games, presentations, data tables (not individual cells), and interfaces where it is necessary to keep toolbars in view while manipulating content. It is acceptable to provide two-dimensional scrolling for such parts of the content.

^**EXCEPTION: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.

^***EXCEPTION: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.

^***NOTE:

• Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML title attribute.
• Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.

• Keyboard Accessibility

• • All page functions, elements, form fields, controls, and buttons must be reachable and operable via keyboard.
  • No time limit should exist for individual keystrokes.

• Avoid Keyboard Traps

• • Focus must not be trapped on any element.
  • All elements must be reachable and escapable using keyboard.
  • Users should be informed when non-standard keys are needed.

• Character Key Shortcuts

• • If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:
  • • Turn off: A mechanism is available to turn the shortcut off.
    • Remap: A mechanism is available to remap the shortcut to include one or more non-printable keyboard keys (e.g., Ctrl, Alt).
    • Active only on focus: The keyboard shortcut for a user interface component is only active when that component has focus.

• Adjustable Timing

• • Default: No time limit on content.
  • If time limits exist, users must be able to disable or adjust them before interacting.

• Pausing, Stopping, Hiding

• • For auto-moving, blinking, scrolling, or updating content >5s, provide a mechanism to pause, stop or hide.
  • Auto-updating content must offer options to disable, hide, or control update frequency.

• Identify flashing/blinking elements

• • No element may blink more than 3 times per second.
  • Ensure flash is below intensity threshold (as per W3C).

• Frequency

• • Max 3 flashes within 1 second in a contiguous area.

• Area

• • Flashing area must be less than 341x256 CSS pixels (~87,296px²).

• Brightness changes

• • SDR: Change ≥ 20cd/m² if dark state <160cd/m².
  • HDR: Michelson contrast ≥ 1/17.

• Automated Tools

• • Use automated tools to test flashing frequency and intensity.

• Bypass blocks

• • Provide skip links to bypass repetitive content blocks.
  • Group repeating blocks or label them clearly.

• Page titles

• • Each page must have a descriptive <title> tag indicating purpose or topic.

• Logical focus order

• • The order of navigation and content links must be logical and intuitive.

• Link purpose in context

• • Link texts must be understandable in context.
  • Indicate format/context changes in link or surrounding text.

• Additional navigation methods

• • Provide at least one alternative navigation method (e.g. search, sitemap).

• Headings and labels

• • Use meaningful headings to structure content.
  • Forms require descriptive and associated labels.
  • Image maps must have clearly identifiable active regions and instructions.

• Visible Focus

• • Elements that receive focus are visibly highlighted when navigated to via keyboard.
  • Skip links should become visible when focused.

• Pointer Gestures*

• • All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.

• Pointer Cancellation**

• • For functionality that can be operated using a single pointer, at least one of the following is true:
  • • No Down-Event: The down-event of the pointer is not used to execute any part of the function.
    • Abort or Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion.
    • Up Reversal: The up-event reverses any outcome of the preceding down-event.
    • Essential: Completing the function on the down-event is essential.

• Label in Name***

• • For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

• Motion Actuation

• • Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:
  • • Supported Interface: The motion is used to operate functionality through an accessibility supported interface.
    • Essential: The motion is essential for the function and doing so would invalidate the activity.

The goal is to make it easier for users to operate functionality through various inputs beyond the keyboard.

^*NOTE: This requirement applies to web content that interprets pointer actions (i.e. this does not apply to actions that are required to operate the user agent or assistive technology).

^**NOTE:

• Functions that emulate a keyboard or numeric keypad key press are considered essential.
• This requirement applies to web content that interprets pointer actions (i.e. this does not apply to actions that are required to operate the user agent or assistive technology).

^***NOTE: A best practice is to have the text of the label at the start of the name.

• Language of the Page

• • Every web page must have correct language declarations (e.g., <html lang=”en”>).

• Language of Parts

• • Use lang attribute for foreign language sections or words that could cause confusion.

• On Focus

• • Do not trigger content changes when elements receive focus.

• On Input

• • Do not change content after input unless clearly announced beforehand.

• Consistent Navigation

• • Keep navigation elements consistently positioned and labeled throughout.

• Consistent Identification

• • Elements with the same function must appear and behave identically.

• Consistent Help

• • Help features (contact info, live help, self-help, automated help) should appear consistently across related pages.

• Error Identification

• • Clearly indicate errors and name the field causing the issue.

• Labels/Instructions

• • Provide clear and descriptive labels for all expected inputs.

• Error Suggestion

• • Suggest specific corrections for input errors.

• Error Prevention (Legal/Financial Data)

• • Allow review, correction, and confirmation of sensitive entries before submission.

• Parsing

• • Use a standards-compliant and error-free markup language (HTML/XHTML).

• Name, Role, Value

• • Ensure custom components are accessible through proper use of markup.

• Status Messages:

• • In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

The overarching goal is to maximise compatibility with current and future user agents, including assistive technologies.