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 available.
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 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.
Everything is going as planned, until they set that field to required, leaving the form with a floating asterisk where the label would be.
Frustrated, designers typically just run to the CSS file and add some code-hiding labels for that form, altogether.
.hs_blog_default_hubspot_blog_subscription 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:
.hs_blog_default_hubspot_blog_subscription 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.
