Skip to content

Cognitive Accessibility Design Pattern: Make the Relationship Clear Between Controls and the Content They Affect

User Need

I need to know how to use all the controls and the effects of each action.

What to Do

The relationship between controls and affected content should be completely clear and unambiguous.

This can be achieved through:

  • visually grouping controls with the content they relate to,
  • including controls within the region they affect,
  • using clear dividers or white space between regions in a page that may have separate controls or a scroll bar,
  • avoiding multiple or nested scrolling areas.

How it Helps

If a control on a page operates only on part of the page, it can be hard to tell what it will affect and what it will not. Users may try the wrong control. Many users will try again, and discover the correct control or scrollbar. However, many people with cognitive or learning disabilities may not be able to work out what to do. Others will feel cognitive overload, and stop as a result. They may assume the application is broken, or that it is too complicated for them. For these users, the application will not be usable.

Clear borders and groupings on the page can help indicate what element the control effects. Having a border or other visual cue around the controls and the relevant section can help make it more understandable. Check with user testing that users with cognitive and learning disabilities find all the page relationships clear and quickly know how to use the controls. Testing is essential when the controls cannot be in the area they affect.

For example, consider a user living with dementia trying to work out which scrollbar to use for embedded scrollable regions. When they try the wrong scrollbar, they do not get the effect they desire and their content may seem to disappear.

More Details

  • Separate Interactive Elements. For example: Do not have two scroll bars close together. Some users may find it difficult to determine which one to use with a particular section of content. Instead:
    • use clear visual layout and placement of the scroll bars,
    • break the content into two separate pages, or
    • consider removing unnecessary information from the page.
  • Associate elements and their controls. Place interactive elements like scroll bars and buttons close to the content they can impact. Keep interactive elements further from content to which they do not apply. (This makes it easier to identify which elements will impact each section of content.)
  • Use dividers. Examples of clear dividers include high contrast borders or white space. A change in background color can be a clear divider if the contrast is strong enough.
  • Help the user see the right control. Use large clear buttons and scroll bars.

Examples

Use:

  1. Controls clearly associated with the section they control. Place the control inside the section, and have clear borders around the section. Label the controls to match the section heading. For example:
    • On a library site, a search box for the whole site is located in the upper right of the site’s main navigation. A second search box searches the library catalog. It is located within a section with a clear border, different background color, and a heading “Library Catalog”. The go button reads “search catalog”.
    • A page needs a scrollbar for one section. The scrollbar look like it is inside the section.

Avoid:

  1. Multiple scrollable sections where it is unclear which scrollbar to use for each section.
  2. Controls for one section that look like they might affect the whole page or another section. For example: The search box relates to one area of a page, and not for another area. It is unclear which area the search is for.
  3. Multiple nested scrolling regions.

User Stories and Personas

User Story

Personas

Glossary

Back to Top