Users must be able to operate and navigate through the content of your digital product without obstacles.
Keyboard accessible
Allow users to exit a situation (A)
Enable users to easily get out of a situaiton (for example a window) with providing a clear closing option.
Ensure accessibility in shortcuts (A)
Provide users the option to disable or customize shortcuts to suit their needs, allowing them to remap keys to avoid accidental activations. Make shortcuts context-dependent, so they only work when a specific component has focus, and offer clear feedback with undo options for any actions triggered.
Enough time
Extend time-dependant functionalities (A)
Ideally, don't have content or any performance on websites or apps that is time-dependant. But if there's a need to have one (e.g. security tokens), it is important that users see and are aware of the time remaining and that they have an option to extend the time in order to perform.
Include option to turn off automatic updates (A)
If you have content that moves or updates automatically, users need to have an option to pause, hide or stop this automatic movements from happening.
Seizures & physical reactions
Reduce blinking and flashing elements (A)
2.3.1 Three Flashes or Below Threshold
Avoid using flashing elements that may provoke seizures or physical reactions. If you are using flashing elements, then make sure the flash rate is 3 times per second or less. Ensure that flashing objects cover only a small area. If you can, opt for a static content instead a moving, blinking or a flashing one.
Navigable
Skip repetitive content blocks (A)
Have an option to skip repetitive content that repeats itself on every page/screen, so that the users with disabilities who use screen readers will be able to click on it and bypass the repetitive blocks to get to the main content more easily.
Include a page title (A)
Ensure all pages and screens have a title that accurately represents the content of the page/screen user is viewing.
Define focus states and their order (A) (AA)
2.4.3 Focus Order 2.4.7 Focus Visible 2.4.11 Focus Not Obscured
Define focus states for actionable elements and work with developers on the focus order. Users navigating with keyboards or assistive technologies need clear visual cues to understand where they are on the page.
Default focus states from browsers and mobile platforms may not be prominent or compatible with your design. Customize focus styles with distinct outlines or background changes to ensure visibility.
Keep focused elements visible and avoid obstruction by modals, notifications, or toolbars. Ensure adequate spacing, enable scrolling to reveal focused items, and design overlays that take focus without hiding other interactive components.
Ensure that the purpose of a link or a button is clear (A)
2.4.4 Link Purpose (In Context)
Avoid ambiguous links or buttons that don't convey much meaning. Instead, be more descriptive so that the purpose of the button or a link could be understood by the text alone.
Design for diverse navigation methods (AA)
Ensure your mobile app offers multiple ways to access content by implementing a search bar for direct queries, a categorical navigation menu for browsing, and quick-access tiles on the home screen. Additionally, include clear back navigation and support for voice search and accessibility features like customizable font sizes. By providing these varied navigation options, you'll cater to diverse user preferences and abilities, creating a more inclusive user experience.
Group content for better screen reader navigation (AA)
When designing, aim to have distinctive groups of items, where each group has its own heading. If the group doesn't have a visual heading, align with developers on what are the different sections of your design, or mark it in your design file. That way, when using screen readers, users can understand all the different groups and sections of the designed page/screen more easily and decide which section to skip if needed.
Input modalities
Simplify touchscreen gestures (A)
All touchscreen functions should be operated with simple, single-point gestures like taps or clicks, instead of relying on complex, path-based, or multi-touch gestures. This accommodates users who may have difficulty performing precise or multi-finger gestures, such as those using assistive devices like head pointers or speech-controlled inputs. Provide alternatives for actions like pinch-to-zoom or swiping by enabling single-tap or long-press options. Only use path-based gestures when absolutely necessary, and always offer simpler, more accessible methods for interacting with your content to ensure usability for all users.
Align labels and controls (A)
To create accessible designs, ensure that the visible text on buttons, links, and inputs matches the programmatic names used by assistive technologies. Use clear, consistent language for all labels, and position them close to the corresponding controls. Avoid relying solely on placeholder text inside input fields—provide clear, visible labels outside the fields to improve usability for all users.
Create inclusive motion-based interactions (A)
When incorporating motion-based actions, like "Shake to Undo," make sure to offer alternative controls, such as on-screen buttons, for users who can't physically perform the motion. Additionally, include an option to disable motion controls to prevent accidental triggers, especially for users with motor impairments or devices mounted in fixed positions. This ensures all users can interact with your app, regardless of their ability to move the device. Always think of motion-based actions as supplementary, not the only way to control functions.
Avoid drag-only actions for accessibility (AA)
Ensure your interface is accessible by providing alternatives to dragging actions. Don't rely solely on dragging; offer simple, single-pointer options like clicks or taps. This helps users with mobility impairments or specialized devices interact with your design easily.
Ensure touch-target area is big enough (AA) (AAA)
2.5.5 Target Size (Enhanced) 2.5.8 Target Size (Minimum)
When designing buttons or any clickable element, make sure that the touch target area is visible enough for users to be able to understand the element is clickable. Aim to have at least 48px of width and 48px of height. Even if you are creating smaller elements, such as icons, the touch target area should be 48x48px. Ensure clickable elements are separated by 8px of space or more.