1.3.1 Info and Relationships

Visual presentation cannot be the only way structure is communicated. If something looks like a heading, it must be marked up as a heading. If items are in a list, they must use list markup. If a table shows relationships between data, it must use proper table markup with headers.

Screen readers and other assistive technologies rely on the underlying HTML structure to communicate meaning. A large bold line of text is not a heading unless it uses the correct heading tags. A group of items is not a list unless it uses list elements.

This also covers form fields: required fields marked only with a red asterisk that has no text explanation will fail for users who cannot see colour.

Use semantic HTML throughout. Use h1 through h6 for headings in a logical hierarchy. Use ul and ol for lists. Use table, th, and scope for data tables.

For required form fields, do not rely on colour alone. Include the word Required in the label or use an asterisk explained with text.

For any custom component that behaves like a known UI pattern, use ARIA roles to communicate what it is to assistive technology.

• Text styled to look like a heading with CSS but using a div or p element with no heading markup
• Data table with no th elements or scope attributes
• Form fields where required status is shown only through colour
• Visual grouping of related content with no corresponding semantic markup

Using ARIA does not replace semantic HTML. Use the correct HTML element first. Only add ARIA where native HTML cannot express the meaning. An aria-label on a div is not a substitute for using a button element.