1.3.1 Info and Relationships

What does it mean?

Sighted people understand a page through its visual structure: large bold text is a heading, items with bullets form a list, a label next to a field belongs to it. Assistive technology cannot see this. It relies on the underlying code. So headings must be real heading elements, lists must be list elements, data tables need header cells, and form fields need programmatically connected labels.

It also covers grouping, for example radio buttons in a fieldset with a legend, and page regions such as header, navigation, main and footer. If the structure cannot be expressed in code, it must be explained in text.

Who does it help?

• Blind people who navigate by headings, lists and landmarks
• People using speech recognition to move to form fields
• People who use custom styles or reader modes that rely on the structure

Common failures

• Headings made from bold or large text in a div instead of h1 to h6
• Form fields with placeholder text but no connected label
• Data tables built from divs, or tables without th header cells
• Radio button groups without a fieldset and legend describing the question
• Lists of links made with line breaks instead of ul and li

How we test it

• axe-core Automatic: axe-core finds typical violations. A violation is pre-filled as “fails”.
• evidence Evidence: our scanner collects material such as screenshots, lists and measurements.

Test question: Are headings, lists, tables, form groups and landmarks marked up as such (not only styled)?

A person decides every criterion. No criterion ever passes automatically.

How to fix it

<div class="title">Contact us</div>
<input type="email" placeholder="E-mail">

<h2>Contact us</h2>
<label for="email">E-mail</label>
<input type="email" id="email" name="email" autocomplete="email">

The heading is now a real heading and the field has a label that screen readers announce.

Practical tips

• Do not skip heading levels without reason, and use one h1 per page for the main topic.
• Use HTML elements for their meaning, then style them with CSS.

Guides and patterns on this

• Forms that everyone can completeForms are where people buy, book or give up. This guide shows how labels, required fields and error messages need to work for keyboard, screen reader and magnifier users.
• The right alt text in five questionsGood alt text replaces what an image does on the page, not just what it shows. Five questions lead you to the right answer for every image.
• Your first screen reader test in 30 minutesA screen reader shows without mercy whether your page is built properly. This guide lets you test your key pages yourself, with free tools and no prior experience.
• AccordionShow and hide sections, state exposed with aria-expanded.

Official source

Understanding WCAG 2.2 at the W3C: 1.3.1 Info and Relationships