Principle 2 - Operable
Guideline 2.1 - Keyboard Accessible
Make all functionality available from a keyboard.
2.1.1 - Keyboard - Level A
All sites must be usable with just a keyboard.
Do not use Javascript mouse-only code (mouseover, mousedown, etc.).
2.1.2 - No Keyboard Trap - Level A
Do not hide focus with focus {outline: none;}.
2.1.4 - Character Key Shortcuts - Level A
Don’t add additional keyboard shortcuts to websites.
Guideline 2.2 - Enough Time
Provide users enough time to read and use content.
2.2.1 - Timing Adjustable - Level A
When there is a time limit, allow for several situations to extend the time.
2.2.2 - Pause, Stop, Hide - Level A
Content such as carousels cannot auto-advance, unless they have a keyboard accessible pause.
Guideline 2.4 - Navigable
Provide ways to help users navigate, find content, and determine where they are.
2.4.1 - Bypass Blocks - Level A
Always include a skip to content link.
2.4.2 - Page Titled - Level A
All pages need meaningful, descriptive page titles.
2.4.3 - Focus Order - Level A
Make the DOM order match visual order when possible.
When hiding navigation, use text-indent, not display:none.
2.4.4 - Link Purpose (In Context) - Level A
Link text should not be the spelled-out URL, “Click here”, or similar. Instead, use meaningful link text.
2.4.5 - Multiple Ways - Level AA
Allow pages to be found via navigation, search, page links, etc.
2.4.6 - Headings and labels - Level AA
Use heading tags on navigation and content.
2.4.7 - Focus Visible - Level AA
All elements that have keyboard focus must have the focus indicator visible.
2.4.11 - Focus Not Obscured (Minimum) - Level AA
When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.
Guideline 2.5 - Input Modalities
Make it easier for users to operate functionality through various inputs beyond keyboard.
2.5.1 - Pointer Gestures - Level A
Don’t rely on multipoint inputs (Dragging with two fingers, etc.).
2.5.2 - Pointer Cancellation - Level A
Single pointer interactions, such as drag and drop functionality, must be able to be cancelled.
2.5.3 - Label in Name - Level A
Use aria-label, or a sufficient sr-only class to provide context to otherwise simple links.
For example: <a href="">Learn more<span class="sr-only"> about web accessibility</span></a>.
2.5.4 - Motion Actuation - Level A
Don’t rely on device-specific inputs (Shake to undo, Motion-activated sliders, etc.).
2.5.7 - Dragging Movements - Level AA
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
The size of the target for pointer inputs is at least 24 by 24 CSS pixels.