Page Structure

Landmarks

Landmark regions, also called ARIA landmarks, help screen reader users navigate to different sections of a page and create a logical outline of the page’s layout.

Key Landmarks:

  • <header> – Introductory content or site branding
  • <nav> – Main navigation links
  • <main> – The primary content of the page
  • <aside> – Complementary content (e.g. related links, ads)
  • <footer> – Site-wide or section-specific footer content
  • <form> – Grouping of form controls

Readability & Headings

Proper use of headings creates a logical outline that benefits all users and is vital for screen reader navigation.

Best Practices:

  • Use heading tags (<h1> to <h6>) to communicate content structure.
  • Do not skip heading levels. For example, don’t go from <h2> to <h4>.
  • There should only be one <h1> per page, describing the main topic.
  • Use headings in a nested, hierarchical order.

Text Relationships and Groupings:

Use semantic HTML to convey meaning and relationships between content elements.

Examples:

  • Use <p> for paragraphs
  • Use <ul>/<ol> and <li> for lists
  • Use <section> or <article> to group related content
  • Use <label> with for attributes or wrapping inputs to associate form labels

Navigation:

Accessible navigation helps users move through the site easily, regardless of whether they are using a keyboard, mouse, screen reader, or other device.

Key Guidelines:

  • Use <nav> and landmark roles
  • Clearly indicate the current page or active menu item
  • Ensure keyboard operability (tab order, focus states)
  • Avoid complex hover-only dropdowns without keyboard support
  • Add skip links

Related WCAG 2.1 Success Criteria

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

Headings and labels describe topic or purpose.