Making Your HubSpot Website WCAG 2.1 Compliant

4.1.3 Status Messages

MCS Accessibility Team

MCS Accessibility Team
Last Updated November 09, 2019

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. All suggestions in this guide are in conjunction with the accessiBe solution and require an active license. For more information on the accessiBe platform and pricing, you can learn more here.

LEVELAA
Success Criteria

4.1.3 Status Messages

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
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

  • This criteria is not resolved with accessiBe or HubSpot and requires manual management.

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 annouced to the user.

How accessiBe Helps

AccessiBe doesn't assist with incorporating the correct ARIA labels. It would be up to the developer to make sure that any status messages be coded correctly.

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>

Related: See 3.3.1 on Error Identification 

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>


Warning

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

What to expect if you download this checklist

Video: What to Expect If You Download this Checklist

Checklist Download

Questions?

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

Recent Morey Creative Studios Blog Articles