WCAG 2.1 Compliance: All You Need to Know

Identify Input Purpose (AA)

Values must be auto-filled in the input field as it will be difficult for people with dexterity issues to type.

Identify Purpose (AAA)

The links, buttons, regions and icons on a website are marked up to enable users to personalize and use their own icons and links.

Timeouts (AAA)

Users are warned of the duration of inactivity to prevent data loss.

Reflow (AA)

Text and other content on a page should reflow without causing any loss of content or functionality.  This criterion has been developed to support users who use zoom on their desktops and is not much applicable on mobile.

Non-Text Contrast (AA)

Buttons, form fields, focus indicators, and selected state indicators should have a contrast ratio of least 3:1 contrast with adjacent colors to allow low-vision users to identify features of controls.

Text Spacing (AA)

This criterion seeks to ensure that there is no loss of content or functionality while increasing the space between lines, words and letters to enable better readability.

Content on Hover or Focus (AA)

This criterion is implemented via the escape key to allow users to dismiss content that blocks other content in a zoomed area. It ensures that the additional content is dismissible with the keyboard without moving focus/hover.

Character Key Shortcuts (A)

This criterion was added to prevent accidental activation of shortcut keys. When key shortcuts are used without modifiers or a turn-off mechanism, speech users could accidentally activate shortcuts while navigating a page.

Label in Name (A)

The aria-label or the coded name for a text should include the content of its visual text label. When the computed name does not match the visible text label, users will not be able to access that control. For example, if you have an input with the visible text label as “Click here”, but the aria-label or the alt-text says, “Click this button”, this success criterion would fail.

Animation from Interactions (AAA)

Users should be able to disable the motion animation triggered by user-interaction on screen.

Pointer Gestures (A)

This criterion is of benefit to users who lack the accuracy, dexterity, or tools to perform complex gestures with precision. It ensures that functionality on a page is operated using a single pointer.

Pointer Cancellation (A)

It prevents mouse interaction from occurring when pressing or when releasing the mouse button, thus accidentally triggering touch or mouse events with unwanted results.

Motion Actuation (A)

When device motion or user motion such as shaking, tilting etc., are used for interaction, an alternative input method should be provided to perform an equivalent action, otherwise, users with motor impairments would be unable to access the functionality on the page.

Target Size (AAA)

The target size for pointer input should be at least 44×44 CSS pixels to improve usability for people with hand tremors, limited dexterity or other limitations.

Concurrent Input Mechanisms (AAA)

This criterion ensures that the authors don’t actively disable input modalities and therefore interfere with the way users are accessing content.

Orientation (Level AA)

Web content should be operable in either orientation, that is, portrait or landscape. This criterion is useful for users with low vision who may change the orientation of a device to increase the width of the reading area or increase the size of content.

Status Messages (AA)

When an action is performed on screen that does not change focus, users must be notified of it with a status message or an announcement.