Operable
User interface components and navigation must be operable.
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
Correct
A link that can be focused by using tab. The focus wont move until the user presses tab again.
LinkWrong
Once this link is focused it will display some text below but the focus will be removed.
LinkThe link above has been focused but is not possible to interact with. This text will disappear in 10 seconds.
2. Focus moving after a certain time
Correct
A link that can be focused by using tab. The focus wont move until the user presses tab again.
Link3. Event handling on another element to act as link
Wrong
The "link" below is in fact a span element disguising as an anchor element. This link wont be recognized by assistive technology.
This link is fake!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
Correct
A flashing sale sign that can be paused and resumed.
SALE
Wrong
A flashing sale sign that can't be paused in anyway.
SALE
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
Correct
A flashing text that flashes a total of twice per second.
2 flashes per second.
Wrong
A flashing text that flashes a total of five times per second.
5 flashes per second.
2.3.2: Three Flashes (Level AAA)
Web pages do not contain anything that flashes more than three times in any one second period.
Because of the flashing text in the "wrong" example above this rule automatically fails.
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.
To demonstrate this violation, the web page lacks a title element.
To further demonstrate this violation, the page perceivable will have a non-descriptive title.
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.
The navigation menu at the start of this page uses tabindex in an order that does not preserve meaning. When using tab the focus will start at "Home" then move to "Understandable" then "Perceivable" and lastly "Operable".
Preferably tabindex should never have a higher value than 0 since it can disrupt the logical order of tabbable elements.