It’s frustrating, right? Now imagine trying to navigate that same form with a screen reader—without clear structure or labels, it’s practically impossible.
Info and Relationships ensures that all the essential elements on a webpage, from form labels to headings and lists, are properly coded so that everyone can access the information and understand how it all fits together.
Who this impacts
- People using screen readers: They rely on the relationships between elements, like form labels and data tables, being properly coded to understand the content.
- People with cognitive impairments: Clear structure helps make content easier to follow and understand.
- Everyone: We all benefit from well-organized content that’s easy to understand and navigate.
How to meet Info and Relationships
- Use semantic HTML: Proper use of headings (<h1>, <h2>, etc.), lists (<ul>, <ol>), and tables (<table>, <th>, <td>) helps assistive technologies understand the structure of the content.
- Form labels and inputs: Make sure every form element has a descriptive label. Use the <label> element to associate labels with form fields, or use ARIA attributes (aria-label or aria-labelledby) for more complex interactions.
- Group related content: Use containers like <fieldset> and <legend> to group related form fields, making it clear how content is organized.
- Relationships between elements: Ensure that relationships, such as a heading to a paragraph, or form field to a label, are properly coded. For example, avoid using purely visual formatting to indicate relationships (like bold text for headings), as assistive technologies won’t interpret these correctly.
Practical examples
- Forms: You’ve built a registration form for an event. Each form field needs a visible label and an associated code label to ensure screen reader users can tell what information to input. Don’t forget indicators for required fields!
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName">
- Tables: You’ve created a schedule for the week. Make sure to use the correct HTML structure to differentiate headers (<th>) from data cells (<td>), so that screen readers can understand the table’s layout.
The scope attribute matters. Screen readers speak header information that changes as the user navigates the table. So in this example, when screen reader users move to left or right along a row, they will hear the day of the week (the column header) followed by the appointment (if any). They will hear the time interval as they move up or down within the same column. Try it yourself to see how it works.
<table border=1>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th scope="row">8:00-9:00</th>
<td>Meet with Sam</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">9:00-10:00</th>
<td></td>
<td></td>
<td>Doctor Williams</td>
<td>Sam again</td>
<td>Leave for San Antonio</td>
</tr>
</table>
- Headings: When writing an article, use proper heading levels to break up content and indicate hierarchy. For example, use an <h1> for the main title, <h2> for sections, and <h3> for subsections.
Exceptions
There aren’t many exceptions for 1.3.1 since it’s critical for organizing information. However, decorative elements or visual styling (such as bolding a word for emphasis) do not need to have semantic meaning in the code. The key here is that meaningful content and structure are conveyed properly.
Top Tips
- Use HTML elements properly: Make sure content is built using the correct semantic elements. Don’t just style text to “look like” headings—use the actual heading tags!
- Test with a screen reader: Try navigating your website with a screen reader to see how the content is interpreted. This will help you spot any relationships or structures that aren’t being conveyed properly.
- Check forms carefully: Ensure that every input field has an associated label and that required fields are clearly marked for all users, including those using assistive technologies.