Skip to main content
Web Accessibility Reviews
All Guidelines

UX

Visually grouped blocks of content should be organized by appropriate landmarks.

WCAG 2 criterion 1.3.1 Info and Relationships (A)
Category Best Practice

WCAG 2 criterion

1.3.1 Info and Relationships (Level A)

Tools and requirements

  • WAVE

Test procedure

For all pages on the site, observe how content is organized visually. Groupings of content should be organized together in appropriate landmarks. It is not a failure of WCAG if this is not the case.

Landmark elements to focus on include the following

  • Banner - All of the content which pertains to the site as a whole. (the header content of the site)
    • Usually includes the site logo, site searches, site navigation.
    • In HTML5, a <header> tag automatically identifies a banner landmark.
    • Using ARIA, role="banner" identifies a banner landmark.
  • Complementary - Any content which supports the main content but is relevant as its own section of content.
    • Examples include a list of related articles or a section navigation.
    • In HTML5, an <aside> tag automatically identifies a complementary landmark.
    • Using ARIA, role="complementary" identifies a complementary landmark.
  • Contentinfo - All of the content pertaining to the site at the bottom of the page (the footer of the site)
    • Often includes quick links, copyright statements, accessibility statements, and contact information.
    • In HTML5, a <footer> tag automatically identifies a contentinfo landmark.
    • Using ARIA, role="contentinfo" identifies a contentinfo landmark.
  • Main - The main content of the page.
    • The main content should include any content exclusive to the page the user is on. It should avoid including content repeated on more than one page (aside content, banner content, footer content etc..). We will not consider it a strict failure if not abided to.
    • In HTML5, a <main> tag automatically identifies a main landmark
    • Using ARIA, role="main" identifies a main landmark.
  • Navigation - Any grouping of links used to navigate to different parts of the page or site.
    • In HTML5, a <nav> tag automatically identifies a navigation landmark.
    • Using ARIA role="navigation" identifies a navigation landmark.
  • Region - A distinct section of the content which is important enough that a user may want to directly navigate to it
    • Examples include blocks of Upcoming events, Social Media feeds, or Featured Articles
    • In HTML5, a <section> tag automatically identifies a region landmark.
    • Using ARIA, role="region" identifies a region landmark.
  • Search - Any search form
    • There is no native HTML5 tag to identify a search tag. You must use ARIA
    • Using ARIA, role="search" identifies a search landmark.