Operable

Contents

  1. Keyboard accessible
  2. Enough time
  3. Seizures and physical reactions
  4. Navigable
  5. Input modalities

2.1 Keyboard accessible

Make all functionality available from a keyboard.

Not everybody is able to use a mouse. Many people rely on keyboard navigation to access online content. These criteria ensure that your content is accessible for people who use the keyboard, but this often also translates into voice-recognition software users.

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.

Learn how to navigate with a keyboard instead of a mouse.

2.1.2 No keyboard trap (Level A)

If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.

Keyboard traps make your webpage unusable for people who navigate by keyboard. Find out what they are and how to test for them.

No keyboard trap

2.1.4 Character key shortcuts (Level A)

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 use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc)
Active only on focus
The keyboard shortcut for a user interface component is only active when that component has focus.

Learn about character key shortcuts

2.2 Enough time

Provide users enough time to read and use content.

2.2.1 Timing adjustable (Level A)

For each time limit that is set by the content, at least one of the following is true:
Turn off:
The user is allowed to turn off the time limit before encountering it
Adjust:
The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting
Extend:
The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, "press the space bar"), and the user is allowed to extend the time limit at least ten times
Real-time Exception:
The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible
Essential Exception:
The time limit is essential and extending it would invalidate the activity
20 Hour Exception:
The time limit is longer than 20 hours.

Learn about timing adjustable

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; and
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.

Find out more about Pause, stop, hide.

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.

I'm probably not going to ever write a post about this. I never use any kind of flashing, blinking or flickering content. It drives me crazy! It triggers my migraines and I wish it was just banned altogether. My advice would be to avoid it unless you are in the movie industry and are creating a film full of special effects.

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

2.4.1 Bypass blocks (Level A)

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

If you use the tab key to navigate a webpage, it can take many keystrokes to get past all the menus and navigation items and into the main part of the page. A bypass block allows the user to skip past repeated items on a page and dive straight into the main content.

Find out how to create a bypass block.

2.4.2 Page titled (Level A)

Web pages have titles that describe topic or purpose.

Page titles are important in any context. Can you imagine a book with no title? There are different ways of ensuring that your work has a title, depending on the application. Select from the list below:

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.

Navigating by keyboard really relies on the focus order being logical. Find out how to test and what to be careful about.

2.4.4. Link purpose (in context) (Level A)

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.

Hyperlinks are used in many different contexts. Choose from the list below:

2.4.5 Multiple ways (Level AA)

More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.

Learn how to provide multiple ways to navigate

2.4.6 Headings and labels (Level AA)

Headings and labels describe topic or purpose.

Learn how to write meaningful headings and labels

2.4.7 Focus visible (Level AA)

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

Learn how to make your focus indicator visible

2.4.11 Focus not obscured (minimum) (Level AA) (new)

When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.

As this is a new WCAG 2.2 criterion, it may change or be removed when WCAG 2.2 is published. However, this is now looking less than likely, so I thought it was worth including.

Learn about focus not obscured

2.5 Input modalities

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

2.5.1 Pointer gestures (Level A)

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.

Learn about pointer gestures

2.5.2 Pointer cancellation (Level A)

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.

Learn about pointer cancellation

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.

Learn about label in name

2.5.4 Motion actuation (Level A)

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.

2.5.7 Dragging movements (Level AA) (new)

All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.

2.5.8 Target size (minimum) (Level AA) (new)

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, 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.

Learn how to meet 2.5.8 Target size (minimum)

Clicky