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. In addition to explaining the WCAG Success Criteria and how to address them, this guide also describes how the AudioEye Managed solution may address each issue.

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 partially resolved and/or detected with AudioEye Managed but may require some manual intervention and/or collaboration with AudioEye.

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.

How AudioEye Helps

AudioEye will alert Managed customers when 4.1.3 violations are detected and can take action with client approval. However, for instances where Managed customers do have full control to remediate the source issue, AudioEye will collaborate with accessibility stakeholders to instruct them on what specific changes are required, why the changes are important, and how the changes can be implemented.

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.

Recent Morey Creative Studios Blog Articles