Making Your HubSpot Website WCAG 2.1 Compliant

3.2.3 Consistent Navigation

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

3.2.3 Consistent Navigation

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
Principle: Understandable
Information and the operation of user interface must be understandable.
Guideline: Predictable
Make Web pages appear and operate in predictable ways.

Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is consistently resolved with AudioEye Managed.

Understanding 3.2.3 Consistent Navigation

Criteria 3.2.3 states that a repeated navigation on a site must by default remain in a consistent order wherever it is present, unless adjusted by the user.

To ensure all users can navigate a site effectively and with ease of use, the navigation must remain consistent from page to page. So, for example, if the Contact page is the last item on your navigation, it must always remain the last item. 

Sub-navigation and page navigation are permitted under this criteria, but they must remain consistent as well.

This criteria helps individuals with, "cognitive limitations, users with low vision, users with intellectual disabilities, and also those who are blind," it explains.

How HubSpot Helps

This is resolved naturally with HubSpot provided you are using the same navigation managed by its menu tool. You can then use these menus in global groups, such as your website header, to ensure consistency across your entire site.

Screenshot of Advanced Menus Tool in HubSpot

 

In a HubSpot portal, if you scroll to the settings gear > website > navigation, you have the ability to set up standard menus to use across the site.

How AudioEye Helps

Within the AudioEye Accessibility Toolbar, users may engage an Accessible Site Menu, which presents a normalized visual layout that is keyboard friendly and encompasses the links made available from the various menus included within the page (emulating a site map). The menu format follows the Adobe Accessible Menu framework.

Screenshot of AudioEye Menu Tool open on FCC website

Accessible menus are also presented as they are naturally encountered by keyboard and screen reader users as they peruse the DOM. For example, as a user begins to tab their way through the site header, prior to encountering the first main navigation item, an option is presented to the keyboard user alerting them to the availability of the Accessible Site Menu.

Screenshot of the FCC Website with accessible menu button showing

Additionally, AudioEye will alert Managed customers when 3.2.3 violations are detected and can take action with customer 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.

For more information, please visit the official W3C article: Understanding 3.2.3 Consistent Navigation


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