Website Accessibility Guide

Making Your HubSpot Website WCAG 2.1 Compliant

1.3.1 Info and Relationships

MCS Accessibility Team

MCS Accessibility Team
Last Updated March 25, 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. 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

1.3.1 Info and Relationships

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
Principle: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Guideline: Adaptable
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is partially resolved with accessiBe or HubSpot but requires some manual intervention.

Understanding 1.3.1 Info and Relationships 

"Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text."

This success criteria intends to communicate the relationship of elements on a page by more than just visual cues. "Programmatically determined" simply means technically declared. 

For example, if you want to organize an article into sections, it is best to use heading tags for the titles of each, as opposed to just manually stylizing those section titles by increasing the font size and bolding the text. This way, they are both visually and technically indicated rather than only visually. This is "programmatically" stating the relationship of elements on the page, specifically the sections of an article. See also 2.4.6 Headings and Labels.

Using bold, italic, underline or color to indicate important information is another way we often convey information visually but not programmatically, resulting in a loss when consumed through a screen reader. 

Structure and relationships apply to other common elements you find on a web page, such as:

  • Bulleted lists and how the list items relate to each other
  • Tables and how the columns and rows relate to each other
  • Forms fields and labels and how they relate to each other

 

How accessiBe Helps

accessiBe utilizes artificial intelligence to determine what some common elements on a page are, and applies Accessible Rich Internet Applications (ARIA) roles where it can. For example, accessiBe is able to determine what list item on a page is the site's navigation, and appropriately declare roles, relationships and states, helping screen readers explore the navigation fully. 

How HubSpot Helps

When it comes to forms, HubSpot automatically applies input types such as type="email" and type="tel"—helping indicate the purpose of fields. Required fields are also automatically indicated to screen readers in addition to visually displaying an asterisk. When a required field is not completed, an alert is immediately displayed visually and for screen readers to deliver.

Recommended Solutions

Use Standard HTML Best Practices

Much of this success criteria is resolved when HTML elements are used correctly according to their meaning, not solely because of the way they appear. "Using the appropriate semantic elements will make sure the structure is available to the user agent," states Web Content Accessibility Guidelines (WCAG).

  • <h> tags are used in a logical order for the reader, not just because of the way they appear.
  • Bullets or icons for lists communicate the relationship between each list item, as long as the proper list and list item tags are utilized.
  • Tables use table heading, row and data tags properly to show the relationships to each other.

If a programmatic way of communicating information or relationships is not available it can be communicated via text. For example, if a form has sections and you cannot indicate on the input fields that the groups are related, use text to convey the group is about to begin.

Warnings

Tab & Accordion Content

For tabular and accordion content, it is likely the labels are clickable links and content can be accessed with a screen reader. It is possible the relationship between the tabs and content is not automatically communicated. If this is the case, it is recommended information is organized for tabs and accordions in table format using ARIA table roles.

Display: None

It is common for designers building on the HubSpot platform to use the placeholder text option instead of labels on forms, simply because they like the way it looks. This results in the form field name being displayed inside the field, rather than above it.

To achieve this, they populate the placeholder section on the HubSpot form and delete the label value.

Form-Field-Settings-in-HubSpot-Form-Builder

Everything is going as planned, until they set that field to required, leaving the form with a floating asterisk where the label would be.

Email-Form-Field-Example-showing-floating-asterisk

Frustrated, designers typically just run to the CSS file and add some code-hiding labels for that form, altogether.

.form#hsForm_35c327da_8144 label {
display: none;
}

While this will achieve what the designer is going for visually, it is completely compromising the information screen readers can access. Elements that are hidden from sight with display:none are hidden completely, programmatically as well. 

The more accessible way of hiding the label is by leaving the label value in the HubSpot form builder populated and applying the following CSS style instead:

.form#hsForm_35c327da_8144 label  {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}

This hides it from view, while leaving the data available for screen readers to pick up. See also 3.3.2 Labels or Instructions.

 

For more information, please visit the official W3C article: Understanding 1.3.1 Info and Relationships


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