A help message below the membership code of a form
Image description: A website titled, "Confirm your membership." There are 2 text fields below. The name is filled in with, "Pink Nugget III." The membership code is highlighted and has a help message that says, "Found on page 2 of your welcome packet."

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Contextual help, which provides support for what the user is currently interacting with, is accessible to people with cognitive, reading, and learning disabilities.

Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.

Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.

Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.

In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.

Many websites and apps have a help center that you can read. Contextual help is slightly different in that it provides help that’s specific to what you’re interacting with in context (for example, it could explain how to fill out a text input). This is accessible to people who need additional support in understanding what to do.

This references WCAG criterion 3.3.5 Context-Sensitive Help (Level AAA).

Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.

How to Implement This

There are a few different ways to approach contextual help. The techniques include: inline instructions, tooltips, embedded help center, and embedded chat.

Keep in mind that tooltips may not be the best option. According to Adam Silver, tooltips are difficult to interact with and could potentially run into issues on different screen sizes. Additionally, revealing content on hover isn’t a very accessible interaction.

Inline Instructions

Inline instructions appear next to the input. They are most effective if they’re short, clear, and concise.

For example, these inline instructions help explain the system requirements for creating a new password:

Password text inputs with inline instructions below.
Image description: 2 text inputs. The one labeled “New Password” has inline help that says, “Must be at least 8 characters.” For “Confirm Password,” the help says, “Passwords must match.”

‍

If the instructions need to be longer in order to be supportive, the inline instruction can be a link that opens a modal dialog or new page with the full instructions. For example:

A text input of a Group ID with an inline link that opens to a modal dialog.
Image description: A text input labeled “Group ID.” Below, there’s an inline link that says, “Where can I find my Group ID?” which opens a modal dialog that explains, “Look on the back of your membership card for your Group ID. It is a 6 digit code.” Below is an illustration of the card with the ID circled in red.

‍

Embedded Help Center

The help center, often known as the help guide or support, is a full collection of the support documentation.

Here are some examples of help centers:


The help center can be embedded on the page and made more contextual by linking to specific pages that are relevant to what is on the page.

Google products are a great example of contextual embedded help. They surface specific help articles about the product that you are currently working on in the help menu, for example, for google slides:


Google's embedded help center for google slides.
Image description: A screenshot of the help menu, which is hovered over the “Slides Help” menu item. This opens to a help menu that shows a list of popular help resources that are related to slides.

‍

Interesting Further Reading

How to Test This

Manual Test
Semi-Automated Test
Automated Test

Review the website/app for the presence of any context-sensitive help and support.

Credits

No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.