Making Your HubSpot Website WCAG 2.1 Compliant

4.1.3 Status Messages

MCS Accessibility Team

MCS Accessibility Team
Last Updated July 23, 2020

The following directions are part of a full step-by-step guide to making a HubSpot website WCAG 2.1 AA compliant. These recommendations are intended for websites managed on the HubSpot CMS but can be adapted for other content management systems.

LEVELAA
Principle: Robust
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
Guideline: Compatible
Maximize compatibility with current and future user agents, including assistive technologies.

In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

View Official WCAG 2.1 Compliance Techniques

Understanding

This criteria ensures that people with low vision or blind who are using assistive technologies are presented with status messages that aren't in focus are done so in a way that doesn't interrupt their flow while browsing the website. This benefits the user when they are performing an action such as using the search function on a website. Notifying the user that a search is being process and the number of results being served is helpful for the individual.

There are three types of situations where this can apply to users:
  1. A status message that shows the results of an action, or the state of said action
    • For example, when a user performs a search query, notifying the user on the progress, and how many results are served when completed.
  2. A status message that shows a suggestion, or some sort of error message
    • For example on form submissions when a field is missed or filled out incorrectly.
  3. A status message that shows information on the progress of a process
    • For example when someone is using a chat system, any new chats should be announced to the user.

Recommended Solutions

  • For situation one ensuring that the ARIA role "status" is used when displaying results, status or some sort of update:

    <div role="status">8 results returned.</div>

    <div role="status">Search is processing...</div>

  • For situation two ensuring that the ARIA role "alert" is used correctly on any suggestions or error messages:

    <ul role="alert"> <li>
    <label class="hs-error-msg"> Please complete this required field.</label </li>
    </ul>
  • For situation three ensuring that the ARIA role "log" is used when tracking chats:


    <div id="chatRegion" role="log" aria-labelledby="chatHeading">

    <h4 id="chatHeading">Chat History</h4>
    <ul id="conversation">
    <li>The latest chat message</li>
    </ul>
    </div>

Warnings

List of results obtained from a search query are not considered a "status message update" and don't need to be  covered by this Success Criterion.

However, brief text messages displayed about the completion or status of the search query, such as "Searching...", "8 results returned" or "No results returned" would be considered status updates if they do not take focus.

For more information, please visit the official W3C article: Understanding 4.1.3 Status Messages


Download the WCAG 2.1 Compliance Checklist

Checklist Download

Questions?

Let us know if we can help you address this specific WCAG Recommendation.