Reading Order & Structure (WCAG 1.3.1)

What is it?

WCAG Success Criterion 1.3.1 (Info and Relationships) requires that information, structure, and relationships conveyed through visual presentation can be programmatically determined or available in text. This means visual structure — headings, lists, tables, form labels — must be reflected in the underlying HTML using semantic elements, not just visual styling.

Why it matters

Screen readers linearize the page — they read content from top to bottom in DOM order. If the visual layout uses CSS to reorder content (e.g., CSS Grid reordering, absolute positioning, visual-only headings), screen readers will experience the content in a different, potentially nonsensical order. Semantic HTML also enables screen reader users to navigate by landmark, heading, list, or form field — essential for efficiency in long documents.

Best Practices

• Use a single H1 per page for the main topic. Use H2 for major sections, H3 for subsections — never skip heading levels (H1 → H3 with no H2).
• Use HTML landmark elements: <header>, <nav>, <main>, <aside>, <footer>. These allow screen reader users to jump directly to content regions.
• Use <ul>/<ol>/<li> for lists. Screen readers announce "list of X items" which helps users understand content structure.
• Use <table> with <th>, <caption>, scope attributes for tabular data. Do not use tables for visual layout.
• Use <label> elements associated with every form input — not placeholder text, not visual-only positioning.
• Ensure CSS order matches logical reading order in the DOM. Avoid using CSS order property or absolute positioning to visually reorder elements that should be read in a different sequence.
• Use <section>, <article>, <aside> to communicate content relationships — these add semantic meaning that plain <div> containers do not.
• Use <figure> and <figcaption> for images with captions — this programmatically associates the caption with the image.

Common Mistakes

• Visual headings styled with CSS but implemented as <div class="heading"> — screen readers cannot identify them as headings.
• Skipping heading levels: H1 → H3 → H5 — breaks the logical document outline.
• Multiple H1 elements on a single page.
• Using tables for visual column layout — screen readers interpret these as data tables, causing confusion.
• CSS order/flex reordering that places DOM content in a different order than visual content.
• Form fields with no programmatic label association — screen readers cannot announce the field purpose.
• Navigation menus implemented as <div> + styled <span> elements instead of <nav> + <ul> + <li> + <a>.
• Using <br> tags to create visual spacing instead of proper block-level elements.

Checklist

Research & Theory

Real-World Examples