1.3.1: Info and Relationships

What it means

Information, structure, and relationships conveyed by presentation must also be available in code or text. Headings, lists, tables, and form labels should use the right HTML elements so assistive tech can understand them.

Do not rely on colour, size, or position alone to show what belongs together.

How to fix it

• Use heading elements (h1–h6) for real section titles, not styled paragraphs.
• Mark up lists with ul, ol, and li; mark up data tables with th, td, and captions.
• Associate every form field with a visible label using label or aria-labelledby.
• Use fieldset and legend for groups of related radio buttons or checkboxes.

Quick examples

• Good: A pricing table uses th for column headers and scope so screen readers read labels correctly.
• Bad: Bold 18px text is used for headings but coded as plain p tags everywhere.
• Good: Required fields sit inside a fieldset labelled “Contact details”.
• Bad: Radio options are styled in a row but have no group label in the markup.