WCAG Master Guide: Predictable

In most instances, when you enter a URL and start browsing a site’s content, you have a good idea of what to expect and how certain elements such as buttons will function. This is not the case for all users. 

Predictable standards are a key part of the Website Content Accessibility Guidelines (WCAG) and need to be taken into account when remediating your website. 

Predictable Guidelines Explained

The purpose of WCAG’s predictable guidelines is to ensure users with disabilities are presented with predictable content across a site and that functional and interactive components work as predicted, too.

When browsing a site with assistive technology such as a screen reader, it’s not always possible for someone to form a clear overview of a web page. This is because text is read out in a stream of synthetic speech. To prevent a frustrating experience, steps need to be taken to show relationships between different sections of a page or content in the most predictable way possible. 

A predictable layout also benefits users with cognitive limitations. When page components are not consistent, it can create a confusing experience. By placing repetitive components in the same relative order across all web pages, it makes it easier for a user to focus on what they need to. 

The same applies to site visitors with mobility issues. The less time someone needs to spend trying to determine how to interact with a page and find the content they need, the better their experience will be. 

WCAG Predictable Success Criteria

Here are the predictable success criteria you would need to meet in order to achieve Level A or higher.

On Focus

Whenever a component on your site or within a document that is able to trigger an event receives focus, it shouldn’t initiate a change of context. Some examples of a change in context include:

• A new window opens when a user focuses on a link.
• A form is automatically submitted when a button receives focus.
• A video pops up and plays when the focus is placed on a “Watch Video” button.

Give users the option to activate a change of context instead of it happening automatically through focus. 

On Input

If you choose to change the setting of a user interface component on your site, it shouldn’t cause a change of context unless a user is advised of this change.

The purpose of this requirement is to ensure that when a user enters data or selects a form control, the effects are predictable 

For example, let’s say a user needs to enter several contact numbers into a form. One part of the field is for the area code and the other is for the remainder of the contact number. If your form will jump to the second number field after they enter the area code, they should be

advised of this at the start of the form.  

Consistent Navigation

Your site’s navigation should be consistent across all pages, including any sub-menu items. This will ensure that users will find the menu item they need in the same place across every page on your site. 

Consistent Identification

Any components on your site that have the same functionality across all web pages should also be identified consistently. 

Website visitors rely on function familiarity when navigating a site. If identical functions have different labels or accessible names, it can make your site more difficult to use. 

For example, if the document icon on your site indicates a document can be downloaded, this icon should have the same functionality throughout your site. The alternative text for this icon should also be “download” or something similar throughout your site. 

Predictable Best Practices

To help you meet Level AA, the ideal WCAG compliance level, here are a few best practices you can apply when it comes to predictability. 

1. Only open links in a new window when necessary. Only open links in a new window if it’s completely necessary as this change of context can create a confusing experience for some users. If it cannot be avoided, users should be notified that this change will occur.
2. Test your site against keyboard controls. A user should have the option to opt out of a selection without there being a change of context. For example, a user that tabs down to an item on a dropdown menu should be able to hit escape to move away from the dropdown menu without jumping to a new screen accidentally. 
3. Provide users with more control. Disabled site users may accidentally select the wrong value or element on a page. To prevent the wrong action from occurring, give users the option to confirm their choice before there’s a change of context. 
4. Keep your layout predictable. Any elements on your site that will appear on every page should always be in the same place and in the same order. For example, the search field should always be last on a menu and your menu items should be in the same order across your site. 

Frequently Asked Questions