Landmarks and Landmark Regions

Figure 1 Example of a webpage consisting of landmarks like header, main, aside and footer

Landmarks are used to provide structure and navigation to a webpage for ease of access to assistive technology users. Landmarks are elements that identify and define the different sections or regions of a web page. Landmarks can be specified using ARIA or Native HTML approach

Note: It is recommended that Native HTML approach be used over ARIA as it has accessibility out of the box.

  • Use HTML elements, such as <header>, <nav>, <main>, <aside>, <footer>, <form> and <section> to provide landmarks.
  • ARIA equivalent roles to Native HTML elements.
    HTML ARIA
    <header> role="header"
    <main> role="main"
    <footer> role="contentinfo"
    <aside> role="complementary"
    <form> role="form"
    <section> role="region"
    N/A role="search"
  • DO NOT use excess of landmarks on a webpage.
  • Landmarks SHOULD be specified with a unique label in case multiple landmarks of the same kind are used on the webpage.
    • Landmark regions CAN be given a label or a descriptive name using the aria-label or aria-labelledby attribute, which can assist screen readers in announcing the purpose of the landmark.
    • When aria-labelledby is used, ensure that landmarks have unique IDs so that screen readers CAN navigate the page easily.

NOTE:

  • New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
  • Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.