Guideline 2.1: Keyboard Accessible

Make all functionality available from a keyboard.

2.1.1: Keyboard (Level A)

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.

Examples:

1. Focus not visible.

2. Focus moving after a certain time.

3. Event handling on another element to act as link.

4. Device-specific event handlers for links.

Correct

An image that functions as a link. The image changes on hover and focus, making it accessible to both mouse and keyboard users.

Wrong

This image acts like a link using only the mouse. Keyboard users cannot activate it.

Guideline 2.2: Enough Time

Provide users enough time to read and use content.

2.2.2: Pause, Stop, Hide (Level A)

For moving, blinking, scrolling, or auto-updating information, all of the following are true:

• Moving, blinking, scrolling - For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential;
• Auto-updating - For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

Examples:

1. Flashing sign.

Guideline 2.3: Seizures and Physical Reactions

Do not design content in a way that is known to cause seizures or physical reactions.

2.3.1: Three Flashes or Below Threshold (Level A)

Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.

Example:

1. Flashing elements.

2.3.2: Three Flashes (Level AAA)

Web pages do not contain anything that flashes more than three times in any one second period.

Guideline 2.4: Navigable

Provide ways to help users navigate, find content, and determine where they are.

2.4.2: Page Titled (Level A)

Web pages have titles that describe topic or purpose.

2.4.3: Focus Order (Level A)

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

Headings and labels describe topic or purpose.

2.4.7: Focus Visible (Level AA)

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Examples:

1. Hidden Focus.

2. Outline similar to focus.

3. Border similar to focus.

2.4.8: Location (Level AAA)

Information about the user's location within a set of Web pages is available.

2.4.9: Link Purpose (Link Only) (Level AAA)

A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general.

Examples:

1. Non-specific link.

2. Image-only link.

Correct

The link below has its purpose stated in the text.

Wrong

The link below contains only non-text content (an image) and does not have an accessible name.

2.4.13: Focus Appearance (Level AAA)

When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:

• is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
• has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

Exceptions:

• The focus indicator is determined by the user agent and cannot be adjusted by the author, or
• The focus indicator and the indicator's background color are not modified by the author.

Example:

1. Inner Border.

Guideline 2.5: Input Modalities

Make it easier for users to operate functionality through various inputs beyond keyboard.

2.5.3: Label in Name (Level A)

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

Examples:

1. Mismatch of visual and accessible name.

2. Section of the visual name is hidden.

3. Section of the visual name is hidden.

2.5.8: Target Size (Minimum) (Level AA)

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, with also proper margin spacing between multiple touch targets, except where:

• Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
• Equivalent: The function can be achieved through a different control on the same page that meets this criterion;
• Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;
• User agent control: The size of the target is determined by the user agent and is not modified by the author;
• Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.

Examples:

1. Touch-Target sizes.