Context Shifts and Cognitive Load

Kevin Hien

8 min read | Feb 1, 2024

"The only consistent thing in life is change."

Heraclitus

The quote above by Heraclitus perfectly encapsulates the ever-evolving nature of our world. However, a change of context can challenge a user's sense of focus, agency, interface, and meaning. In the space of user experience (UX) design, understanding and addressing these challenges is crucial to creating inclusive and accessible digital experiences.

The term "context shift” refers to a situation where users are required to shift their focus between different tasks within a web page or app. This can be particularly difficult for neurodivergent individuals such as those with ADHD, autism, or other conditions impacting memory and attention. Often cognitive disabilities can co-occur with visual, auditory, and dexterity impairments, each adding a potential barrier if experiences are not designed with inclusivity in mind. For these users especially, context shifts can make it harder to adapt to new environments or to understand the purpose and flow of a digital experience.

The success criteria of WCAG 3.2.2 emphasizes that changing the setting of any user interface component should not automatically cause a change of context unless the user has been informed of the behavior beforehand. Similarly in WCAG 3.2.1 highlights the importance of ensuring that when any user interface component receives focus, it does not trigger a change of context.

To enable users to navigate context shifts more seamlessly, it's essential to always provide users with control over changes of context. This can be achieved by setting expectations at the beginning of a process or describing any upcoming changes to the user. It's crucial for designers to integrate these considerations early in the design process during the wireframe stage, rather than treating them as an afterthought in later stages. By incorporating accessibility principles from the outset, also known as "shifting left," designers can develop interfaces that are inclusive and intuitive for all users.

Utilizing a design system like Bolt is one strategy for promoting inclusive design. Bolt provides a variety of features and tools to help incorporate accessibility throughout the product lifecycle. The following examples demonstrate best practices for handling context shifts, as well as a few Bolt features that can help facilitate those principles.

1. Set clear and consistent expectations
2. Provide form guidance
3. Include a caption or summary for tables
4. Use accessibility annotations
5. Utilize assistive technology

Users should be informed about any upcoming changes or transitions in the interface. For example, in our Bolt design system, we can utilize a modal to set expectations for the user. This feature can provide guidance and explanations when a change of context is about to occur.

<bolt-modal 
  type="warning" 
  heading="Session expire warning" 
  primarybutton="Stay logged in" 
  secondarybutton="Log out"
>
  <p>Your session is about to expire. You will be logged out in [timeRemaining] seconds.</p>
</bolt-modal>

There are multiple ways to provide guidance for users to better understand the page. One method is by using instructional text, which can be added to a text field to briefly guide users on how to interact with the field and inform them about the required information.

<bolt-textfield 
  instructionaltext="Use this format: MM/DD/YYYY" 
  label="Date of birth"
></bolt-textfield>

Another approach is to implement Bolt's contextual help within form fields. This method offers brief guidance by assisting users in understanding how their input will alter or update a context in another section. This assists individuals with cognitive disabilities by clarifying the field's purpose and functionality. This component is intended to display brief content, so longer content should not be used with this component.

<bolt-textfield 
  arialabel="New contribution has tooltip" 
  inputsize="8"
></bolt-textfield>

<bolt-contextual-help heading="Contribution Impact">
  <p>The new contribution amount entered will affect the paycheck amount.</p>
</bolt-contextual-help>

These forms of guidance can assist individuals with cognitive disabilities in understanding the purpose and functionality of different elements. A form field and other elements on a screen can also be highlighted via keyboard focus to guide attention and navigate content using a keyboard or one’s voice.

When displaying data within a table, table captions or summaries help users of assistive technology understand the table's content and structure.

A table caption serves as a header for a table, it provides a brief explanation or title for the entire table. It typically appears above or below the table and it helps users with visual impairments or cognitive disabilities to understand the general content or purpose of the table without needing to review its entire contents. Particularly for users utilizing "table mode," captions are essential for making sense of tables. They are implemented using the <caption> HTML tag and can be visually hidden using CSS.

<div class="bolt-table bolt-table-vibrantBlue">
  <table>
    <caption class="sr-only">Table of manage your contribution.</caption>
    <thead>
      <tr>
        <th>Money source</th>
        <th>Contribution from paycheck</th>
        <th>New contribution</th>
        <th>Estimated paycheck impact</th>
      </tr>
    </thead>
    ....
  </table>
</div>

The table summary (<summary>) provides a comprehensive explanation of the table's structure, data, and relationships, offering insights that may not be readily apparent from the table alone. It serves to clarify the organization of the table and offers additional context, especially in cases where changes of context are expected or where data relationships may be less obvious.

<div class="bolt-table bolt-table-vibrantBlue">
  <table>
    <summary class="sr-only">This table displays information related to salary contributions and their impact on estimated paychecks. It includes columns for salary reduction, contribution from the last paycheck, new contribution, and estimated paycheck impact. The table is structured to facilitate easy comparison of contribution amounts and their corresponding impact on paycheck amounts.
</summary>
    <thead>
      <tr>
        <th>Money source</th>
        <th>Contribution from paycheck</th>
        <th>New contribution</th>
        <th>Estimated paycheck impact</th>
      </tr>
    </thead>
    ....
  </table>
</div>

And below is the .sr-only CSS style to hide the <caption>/<summary> visually, while allowing it to be be read by a screen reader.

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Add Figma accessibility annotations in your wireframe to ensure that accessibility considerations (such as changes of context) are effectively communicated to developers. The purpose of Bolt's accessibility annotations library is to facilitate seamless collaboration and to make sure that everyone is on the same page regarding accessibility considerations.

Users with cognitive disabilities depend on assistive technology to understand page layout. Particularly on changes happening within the interface, such as the appearance of new elements, the rearrangement of existing ones, or updates when a task is completed (successfully or unsuccessfully).

Screen readers, which are assistive technology tools, depend on semantic HTML tags to provide an audio representation of the visual interface for users. Bolt's components integrate necessary details to support accessibility, but it's crucial for designers and developers to prioritize accessibility from the early stage of product development.

Change of context can present challenges for some users, particularly those with disabilities or impairments. However, by incorporating accessibility principles from the wireframe stage, utilizing design systems like Bolt, and effectively communicating with developers through accessibility annotations, we can ensure that our interfaces are inclusive and accessible to all. Furthermore, as AI continues to advance, it holds tremendous potential to further enhance accessibility and create seamless transitions that empower users to navigate digital experiences with ease. Let us embrace change while prioritizing accessibility for a more inclusive digital world.