Website Accessibility Guide

Making Your HubSpot Website WCAG 2.1 Compliant

4.1.2 Name, Role, Value

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.

LEVELA
Success Criteria

4.1.2 Name, Role, Value

  • 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.

For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

Note 1: This success criterion is primarily for Web authors who develop or script their own user interface components. For example, standard HTML controls already meet this success criterion when used according to specification.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is not required for WCAG 2.1 AA compliance.

Understanding 4.1.2 Name, Role, Value

"If custom controls are created, or interface elements are programmed (in code or script) to have a different role and/or function than usual, then additional measures need to be taken to ensure that the controls provide important information to assistive technologies..."


This criterion is primarily aimed at web developers who script their own custom interface elements. Vanilla HTML controls will meet this standard by default. (If you're using standard HTML elements to develop app or webpage interfaces, you can stop reading right here!)

The criterion's purpose is to ensure that your user will be able to easily interact with your controls when using assistive technologies such as screen readers or speech recognition software.

Assistive technology must be able to understand what your control elements do and how they change when used, including:

  • the name of the element. In some cases, this is also the element's label.
  • what the element does. For example, does it expand a collapsible menu?
  • state changes. In particular, the user must know when the element is in focus.

 

By providing information on the role, state, and value information on all your custom user interface components, you'll ensure your interface is compatible with assistive technology.

There are many different ways you can include this information. Some developers insert markup language including aria-labels. Others might pull in accessibility APIs, such as the the Microsoft Active Accessibility (MSAA) API

 

How accessiBe or HubSpot Helps

TBD.

 

Recommended Solutions

As you develop your custom programming, think about accessibility from the very beginning of your project. Identify how you want to ensure the name, role, and value of each element is included (either markup or an accessibility API). If you want to create an entirely new type of user interface component, you'll want to know that too, so you can code in your own accessibility provisions yourself.

Then, once you've developed your interface, you'll test it by:

  1. visiting your web page using an assistive technology such as a screen reader
  2. checking that every interface component contains a name and role
  3. changing the value on each applicable component, and confirm that your tech is alerted to the value change (i.e. click an element to bring it into focus and make sure your screen reader caught the change)

For more information, please visit the official W3C article: Understanding 4.1.2 Name, Role, Value


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