2 Operable
User interface components and navigation must be operable.
2.1 Keyboard Accessible
Make all functionality available from a keyboard.
2.1.1 Keyboard
Conformance level: A
Ensure all functionality is operable through a keyboard interface.
2.1.2 No Keyboard Trap
Conformance level: A
Ensure keyboard focus is not trapped in any part of the content.
2.1.3 Keyboard (No Exception)
Conformance level: AAA
Ensure all functionality is operable through a keyboard without exception.
2.1.4 Character Key Shortcuts
Conformance level: A
Ensure that single-character key shortcuts can be turned off or remapped to use non-printable key combinations (such as Ctrl or Alt + key). Additionally, provide a way to disable these shortcuts.
2.2 Enough Time
Provide users enough time to read and use content.
2.2.1 Timing Adjustable
Conformance level: A
Provide users with enough time to read and use content.
2.2.2 Pause, Stop, Hide
Conformance level: A
Provide mechanisms to pause, stop, or hide moving, blinking, or scrolling content.
2.2.3 No Timing
Conformance level: AAA
Ensure content is accessible without time constraints.
2.2.4 Interruptions
Conformance level: AAA
Provide mechanisms to postpone or suppress interruptions.
2.2.5 Re-authenticating
Conformance level: AAA
Allow users to re-authenticate without losing data.
2.2.6 Timeouts
Conformance level: AAA
Ensure that users are warned about timeouts, especially when data will be lost due to inactivity, and give them the option to extend the session or the ability to save their work.
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
Conformance level: A
Do not include content that flashes more than three times in one second.
The flash size should not be too large. The flashing area should occupy less than 25% of any 10-degree visual field on the screen.
Red flashing is more likely to cause seizures. Especially when combined with high contrast.
2.3.2 Three Flashes
Conformance level: AAA
Avoid content that flashes more than three times in one second.
2.3.3 Animation from Interactions
Conformance level: AAA
Provide a mechanism to disable non-essential animations triggered by interactions.
2.4 Navigable
Provide ways to help users navigate, find content, and determine where they are.
2.4.1 Bypass Blocks
Conformance level: A
Provide a mechanism to bypass repetitive blocks of content.
2.4.2 Page Titled
Conformance level: A
Ensure each web page has a descriptive and informative title.
2.4.3 Focus Order
Conformance level: A
Ensure the focus order is logical and intuitive.
2.4.4 Link Purpose (In Context)
Conformance level: A
Ensure the link text describes the purpose of the link.
2.4.6 Headings and Labels
Conformance level: AA
Ensure headings and labels are descriptive.
2.4.7 Focus Visible
Conformance level: AA
Ensure keyboard focus is visible.
2.4.8 Location
Conformance level: AAA
Provide information about the user's location within a set of web pages.
2.4.9 Link Purpose (Link Only)
Conformance level: AAA
Ensure the purpose of each link can be determined from the link text alone.
2.4.10 Section Headings
Conformance level: AAA
Use section headings to organize content.
2.4.11 Focus Not Obscured (Minimum)
Conformance level: AA
Ensure when an item gets keyboard focus, it is at least partially visible.
2.4.12 Focus Not Obscured (Enhanced)
Conformance level: AAA
Ensure when an item gets keyboard focus, it is fully visible.
2.4.13 Focus Appearance
Conformance level: AAA
Use a focus indicator of sufficient size and contrast.
2.5 Input Modalities
Make it easier for users to operate functionality through various inputs beyond keyboard.
2.5.1 Pointer Gestures
Conformance level: A
Ensure functionality triggered by multipoint or path-based gestures can also be operated with a single pointer.
2.5.2 Pointer Cancellation
Conformance level: A
Ensure users can easily cancel unintended actions triggered by pointer inputs.
2.5.3 Label in Name
Conformance level: A
Ensure labels include the text that is visible on the screen.
2.5.4 Motion Actuation
Conformance level: A
Provide a way to operate functionality without requiring motion.
2.5.5 Target Size (Enhanced)
Conformance level: AAA
Ensure the size of the target for pointer inputs is at least 44 by 44 CSS pixels.
2.5.6 Concurrent Input Mechanisms
Conformance level: AAA
Ensure that functionality can be operated using different input methods concurrently.
2.5.7 Dragging Movements
Conformance level: AA
For any action that involves dragging, provide a simple pointer alternative.
2.5.8 Target Size (Minimum)
Conformance level: AA
Ensure targets meet a minimum size or have sufficient spacing around them.
The easiest way is to have the targets be at least 24x24 pixels. That way you don't have to calculate anything. And the targets will be easier to activate.
For any under 24x24 pixel targets, ensure there is enough white space around them to make them at least 24x24 pixels when the white space is counted in. But remember that white space is not clickable, so it doesn't help as much as the target size.