Operable
Web content should be designed to ensure interface forms, controls, and navigation are functional for all users, regardless of ability.
People will operate, or use, content in different ways. For example, individuals who have physical disabilities preventing them from using a mouse may opt to use alternative input methods such as a keyboard or voice recognition instead of a mouse or trackpad.
Guideline 2.1 – Keyboard Accessible
Ensure all features and functions of a website can be accessed and used solely through keyboard navigation, without relying on a mouse or other pointing device.
2.1.1 – Keyboard
Ensure all functionality may be accessed without the use of a mouse. Here are a few elements which should be double-checked for accessibility:
- Forms
- Submission buttons
- Action buttons
- Navigation menus and submenus
- Sidebar content
- Embedded content
- Audio and video players
2.1.2 – No Keyboard Trap
To ensure full keyboard accessibility, all parts of a website should be navigable without the need for a mouse. Users should be able to move away from any element using only the keyboard.
Sometimes, the website's functionality may constrain users to a specific section of the content, for example, modals. It's crucial to ensure users are aware of how to exit this state and shift their focus to other areas.
2.1.4 – Character Key Shortcuts
It is recommended to avoid using keyboard shortcuts altogether unless you can test them on a wide range of devices, platforms, and assistive technologies to ensure no unintended conflicts arise.
However, if a keyboard shortcut is implemented, it should meet at least one of the following conditions:
- A mechanism should be available to turn the shortcut off.
- A mechanism should be available to remap the shortcut to include one or more non-printable keyboard keys (e.g., Ctrl, Alt).
- The keyboard shortcut should only be active when the component has focus.
Guideline 2.2 – Enough Time
Ensure users have sufficient time to read and interact with the content without feeling hurried or rushed.
2.2.1 – Adjustable Time Limit
To ensure equal access for all users, a website must provide at least one of the following options when implementing any time limits:
- Allow the user to turn off the time limit before encountering it.
- Allow the user to adjust the time limit before encountering it to a range at least ten times the length of the default setting.
- Warn the user before the time expires and provide at least 20 seconds to extend the time limit with a simple action (such as pressing the space bar) and allow the user to extend the time limit at least ten times.
Exceptions to time limits include the following:
- Real-time Exception: If the time limit is an essential component of a real-time event, such as an auction, and there is no alternative to the time limit, it may be necessary to have the time limit in place.
- Essential Exception: If the time limit is an essential part of an activity, and extending the time limit would render the activity invalid, the time limit may be necessary.
- 20-Hour Exception: If the time limit is longer than 20 hours, it may be exempt from the guidelines on time limits.
2.2.2 – Pause, Stop, Hide
Some users may experience seizures or other adverse reactions to flashing content, and auto-updating content can be distracting and interfere with a user's ability to read other content on the page.
All moving, blinking, scrolling or auto-updating content which begins automatically, persists for more than five seconds, and is presented simultaneously with other content, must provide users with the option to pause, stop, or hide it, unless it is an essential part of an activity.
Auto-updating content should also allow the user to control the update frequency. For instance, a Twitter feed.
Guideline 2.3 – Seizures and Physical Reactions
Design content in a manner which does not cause seizures or physical reactions.
2.3.1 – Three Flashes or Below Threshold
To avoid causing seizures or distractions, ensure nothing on your website or application flashes or blinks more than three times in one second. Note blinking can be considered flashing if it occurs at a rate faster than three times per second.
Guideline 2.4 – Navigable
Include features to assist users in navigating your website or application, locating specific content, and identifying their location within the site.
2.4.1 – Bypass Blocks
To aid users in quickly accessing the main content of your website, add a "skip-to-content" link in the top left corner. This allows users to bypass the header, which often features site-wide branding and navigation.
The link doesn't have to be visible until it receives keyboard focus, but ensure it's the first focusable element on the page.
Linking "skip-to-content" to the primary heading on the page, rather than its containing block, is considered a best practice. The reasoning is the containing block may have interactive elements which could potentially cause focus-related issues.
<a class="skip-to-content" href="#h1">Skip to content</a>.skip-to-content {
left: 0.5rem;
padding: 0.5rem 1rem;
position: absolute;
transform: translate3d(0, -5rem, 0);
transition: 0.3s ease-out;
transition-property: transform;
z-index: 10;
}
.skip-to-content:focus {
transform: translate3d(0, 0, 0);
}
@media print {
.skip-to-content {
display: none;
}
}
2.4.2 – Page Titled
Your website's page titles should be unique, and descriptive, and provide users with an accurate idea of the content or purpose of the page.
It is recommended to put the most important keywords at the beginning of the title, as this helps search engines and users quickly identify the topic of the page. For example:
<title>Page title – section name – company name</title>2.4.3 – Focus Order
Ensure the tab order of your web page content follows a logical flow when users navigate using the keyboard.
2.4.4 – Link Purpose (In Context)
Make your links user-friendly via descriptive and meaningful text which accurately describes the linked page content.
Avoid long URLs or generic or ambiguous phrases like “click here” or “more info”, and opt for concise, clear language that gives users a clear idea of what to expect.
Image link alt text should describe the linked page content, not just the image itself.
Link text should make sense when taken away from its page context, as it may be read by screen readers or used in other situations. While the
2.4.5 – Multiple Ways
To improve user experience and make it easy for users to find the information they need, ensure your website provides multiple ways to locate a specific page unless it arises from a process or step.
Features to help achieve this include:
- A sitemap which gives an overview of the website structure and available pages.
- Search functionality which enables users to find specific pages by entering keywords.
- A related pages section which suggests relevant pages that users may find of interest.
By incorporating these features, you can enhance the accessibility and usability of your website, making it easier for users to navigate and find the information they need.
2.4.6 – Headings and Labels
Ensure your content headings and interactive element labels are descriptive and easy to understand, indicating the content or function of the element.
The headings and labels should convey the information that users can expect to find or the input required in the form field. It will help users quickly identify and locate the information needed and provide a better user experience.
Write clear, descriptive headings for content and labels for form fields and other interactive elements.
The key here is that headings and labels are clear and descriptive, so a user knows what content follows or what input a form field expects.
2.4.7 – Focus Visible
When an interactive element (link, button, form field, selectable element, etc.) receives focus, a visual indicator shows so the user can easily see what element they are currently on.
Use a solid 2px minimum border with a minimum contrast of 3:1 against the 2px of background it covers.
I'd also advise ensuring there's a 3:1 colour contrast between the border and along both the inside and outside edges. An offset can help with this. For example:
:is(a[href], button, summary, [tabindex], input, select, textarea, [contenteditable], [document]) {
outline: 2px solid transparent;
outline-offset: 2px;
}
:is(a[href], button, summary, [tabindex], input, select, textarea, [contenteditable], [document]):focus {
outline-color: blue;
}
@supports selector(:focus-visible) {
:is(a[href], button, summary, [tabindex], input, select, textarea, [contenteditable], [document]):focus:not(:focus-visible) {
outline: none;
}
}
:focus-visible {
outline-color: blue;
outline-offset: 2px;
}Guideline 2.5 – Input Modalities
Ensure users can operate website functionality by using a wide range of input methods beyond just the keyboard to improve accessibility and usability.
2.5.1 – Pointer Gestures
To improve accessibility, and usability, offer simple options for touchscreen interactions.
Avoid using multi-point gestures like “pinching” to operate a web page unless essential. Instead, provide single-pointer inputs that can replace complex finger movements.
By avoiding multi-point gestures, you can eliminate barriers to users with physical or cognitive disabilities which hinder their ability to use your website or application.
2.5.2 – Pointer Cancellation
Make it easy for users to avoid unintended clicks or touches by providing a way to cancel pointer input. It is critical for users with disabilities who may have difficulty controlling their movements.
For example, users can cancel the activation of a link by sliding away from it after touching or clicking.
When using JavaScript, avoid using a down event to trigger a function. Instead, use a click or touch event to ensure activation only occurs when the user intends. The exception is functions which emulate a keyboard or numeric keypad where keypresses are considered essential.
2.5.3 – Label in Name
Ensure the words that visually label a component are also the words associated programmatically, such as when using an ARIA label or an alt text.
Most controls have a visible text label and a programmatic name. When the text in the label matches or is contained within the programmatic name, it makes it easier for users who rely on speech recognition applications or screen readers to navigate the page. They can speak the visible text labels of components like menus, links, and buttons and get where they need to go.
If a component doesn't have a visible text label, this doesn't apply.
Best practice: If an ARIA label provides additional information, be sure the visible text comes first inside the label.
2.5.4 – Motion Actuation
If your app or website includes features which activate by motion, provide an alternative, more-simple method. In addition, users should be allowed the option to disable the motion activation altogether.