1.3.1 Info and Relationships

Summary

Structure and relationships conveyed visually must also be available in the markup. A div styled to look like a heading is just a paragraph to a screen reader. In practice this means using real heading, list, table, and label elements.

Common failures

• Faking headings with `<div class="title">`, so screen reader heading navigation finds nothing.
• Using tables for layout, or omitting `<th>` and `scope` in a real data table.

Corresponding KWCAG 2.2 items

• 7.3.1 Linear Structure of Content
• 7.3.2 Table Structure
• 7.4.1 Labels Provided

Related study units

• Semantic HTML and Accessibility
• Data Tables and Structured Content
• Form and Input Accessibility