Predictable content
WCAG Guideline 3.2 (AA) and success criteria
Learn how to make web pages appear and operate in predictable ways.
Last updated on
Ensure user interface components behave predictably (Level A, 3.2.1)
User interface (UI) components, such as buttons or links, must behave predictably. This means they must not cause unexpected changes in context. For example, suddenly being taken to a different page or having a pop-up appear.
This means when a UI component gets ‘focus’ (meaning it’s selected or highlighted in some way), it shouldn’t cause a change in context without the user performing an action to start that change. For example, if a user clicks on a link, they expect to go to a new page. They would not expect the new page to open by just tabbing to the link using their keyboard unless they took another action like hitting ‘Enter.’
To ensure UI components act as expected:
- Avoid using video or audio that starts when it receives focus
- Provide clear and consistent navigation. Include labels to help users understand where they are and how to get to other areas of the site or application
- Test with a variety of people who use assistive technologies, such as screen readers or keyboard-only navigation. This will help to find any unexpected changes in context that may occur
How to create predictable UI components
- Identify the UI components that can receive focus, such as links, buttons, form fields and dropdown menus. For each focusable element, ensure the focus itself does not trigger any changes that could disorient or confuse people
- When focus is moved to a component, the visual layout and content should remain stable and consistent. Any changes should be triggered by user interaction rather than focus
- Provide clear feedback to users when focus is applied to an element. This can include visual cues, such as highlighting or color changes, as well as textual or auditory feedback to indicate the element is in focus
Provide clear and consistent instructions or labels (Level A, 3.2.2)
When a user interacts with a UI component, such as a form field, button, checkbox or dropdown menu, changing its setting or state should not cause unexpected changes. For example, hitting ‘Enter’ while completing a form shouldn’t submit the form unless the user is on the submit button.
To ensure changes in the UI are predictable and expected, designers should provide clear and consistent instructions or labels. These instructions should inform people about what happens when they interact with the element.
How to provide clear and consistent instructions
- Identify UI components that allow users to change settings or perform actions, such as checkboxes, radio buttons, dropdown menus and sliders. Ensure that changing the setting of a component doesn’t automatically trigger significant changes in content or the UI. Changes should be initiated by user action or clearly communicated in advance
- If changing a component’s setting causes a change of context, provide clear advisories to the user before they interact with it. This can be done through means such as instructions, labels or tooltips
- Give users the ability to control when and how settings are changed. Offer options to confirm or review changes before they take effect and allow for easy undo or reverting of unintended changes
- Whenever a setting is changed, offer clear and immediate feedback to the user. This can be achieved through visual cues, textual notifications or other feedback mechanisms. Confirm the action and indicate any resulting changes
- If a user enters invalid data or misses a required component, provide a clear error message that explains the problem and offers guidance on how to fix it
- Use clear and consistent labels for all form fields and provide concise instructions that describe what the user should enter. For example, ‘Please enter a valid email address.’
- Use clear and consistent language on buttons to accurately describe their purpose or action. For example, ‘Submit application’
- When relevant, include ARIA attributes. For custom UI components that don’t have a native semantic meaning or role, use ARIA attributes to provide information to assistive technology. For example, you can use the ‘role’ attribute to specify the element as a toggle switch and the ‘aria-checked’ attribute to indicate whether it’s currently on or off
Use consistent navigation (Level AA, 3.2.3)
Navigational links or menu items that appear on many pages of a website should be in the same order each time. Consistency helps users find information they need quickly and easily without having to reorient themselves each time they open a new page on the same site.
This guideline also applies to other repeated content, such as:
- Search bars
- Breadcrumbs
- Social media icons
These elements should also be consistently placed on pages to avoid confusion.
Exception to consistent navigation
An example of the user initiating change could be if they selected a different language from a dropdown menu. In this case, the order of the navigation menu may change to reflect the new selection.
How to provide consistent navigation
- Identify the navigational elements or menus that’re repeated across multiple webpages within a set, such as the main navigation menu, breadcrumbs or sidebar menus. Make sure they appear in the same relative order each time they’re repeated. This means that if, for example, your main navigation menu has links in a specific order, the order remains consistent on all pages within the set
- Go through the pages to verify the navigational mechanisms appear consistently throughout
Make sure components look and work the same way across web pages (Level AA, 3.2.4)
Components that have the same function across a website should be identified in a consistent way. For example, if there are many buttons on a website that all lead to the same page, they should have the same label. This helps users understand the purpose and function of each component.
This guideline applies to components such as links, form fields and other interactive elements that perform the same function across many pages.
How to maintain consistent functionality
- Identify components that have the same functionality, such as buttons, form fields or interactive elements. These components should serve a similar purpose or perform a similar action. Once you’ve identified them, make sure they’re labeled or named consistently across the set of webpages
- Ensure the labels or names you assign accurately describe their functionality. Use clear and concise language that’s easy to understand. Avoid ambiguous or generic labels that may cause confusion
- In addition to consistent labeling, maintain visual consistency in the presentation of the components, including styling, placement and appearance
- Go through the pages to verify their labels or names remain the same and that any associated instructions or tooltips are consistent
Place help and support in consistent areas and styles across web pages (Level A, 3.2.6)
Provide help mechanisms like contact details in the same location across multiple pages. This consistency helps users find support when completing a task.
How to maintain consistency in help and support placement
Make sure the following, when provided on multiple pages, occur in the same order:
- Human contact details
- Human contact mechanism
- Self-help option
- Automated contact option (like a chatbot)