This page is in progress -
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.
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 with cognitive, reading, and learning disabilities as well as people in situations that might elevate stress and confusion.
This references WCAG criterion 3.3.5 Context-Sensitive Help (Level AAA).
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 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:
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:
Embedded Help Center
The help center, also often known as the help guide or support, is a full collection of all the support documentation available.
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:
Interesting Further Reading
How to Test This
This requires manual testing. Review the website/app for the presence of any context-sensitive help and support.
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.