3. Understandable
3.2 Predictable (Level A)
Contents
Guideline 3.2 Predictable
Make web pages appear and operate in predictable ways.
What does “predictability” have to do with being understandable?
When reading web pages, people are not only seeing words, they are also “reading” patterns, such as the layout and organization of the page, the position and order of links, and the colour and shape of headers. These patterns orient readers to what information is where, and they help users focus in on the desired content.
Consistent patterns help readers understand content. Unpredictable patterns increase the cognitive effort that readers need to make sense of information.
Presenting information in a predictable order across a site is good design. It simplifies access for all users, and it may make a crucial difference for people with visual, learning, and cognitive disabilities, who may become disoriented when information or controls appear in different places on different pages.
Success Criterion 3.2.1 On Focus
Level A
When any user interface component receives focus, it does not initiate a change of context.
On Focus Explained
When designing a web page, do not confuse users by unexpectedly changing the context when they navigate or explore.
Examples of context changes include:
- Opening a new window
- Moving focus to another component
- Going to a new page
- Significantly rearranging the content of a page
Conforming to SC 3.2.1 minimizes the chance that users will become confused or disoriented when interacting with a web page:
- Pressing the Tab key, which is normally used to jump from one control to another, should not initiate a search
- Pressing the down arrow key while scrolling through a drop-down menu should not open a new window
- Clicking into an edit field should not open a popup
Suggested Reading:
Success Criterion 3.2.2 On Input
Level A
Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behaviour before using the component.
On Input Explained
When designing online forms, ensure that (a) entering data in a text field, (b) checking or unchecking a checkbox, or (c) selecting or deselecting a radio button does not unexpectedly change the context.
Again, examples of context changes include:
- Opening a new window
- Moving focus to another component
- Going to a new page
- Significantly rearranging the content of a page
SC 3.2.2 helps ensure that users can predict what will happen when interacting with form controls. Context changes may confuse users who cannot easily perceive the page or who are distracted by the changes. A context change is appropriate only when the user is notified that the change will happen in response to an action.
Example: A form contains three fields for entering telephone numbers. The first field contains the three-digit area code. The second field contains the first three digits. The third field contains the last four digits. When a user completes entry of the first field, focus automatically moves to the second field. This is a context change. If this behaviour is described at the beginning of the form, the page conforms to SC 3.2.2. If the behaviour is not described, it does not conform.
Suggested Reading:
