Headings (<h1> through <h6>) should be used to mark up the titles of each section. Section titles that are made large or bold using CSS will not have any special meaning to screen reader users.

Using only one <h1> tag per page is considered best practice. Other headings should create a logical document outline with no skipped levels. This can be tricky to achieve in components that may be inserted anywhere in a page.

Landmarks are a subset of ARIA roles that correspond to HTML5 document structure tags (<main>, <nav>, <aside>, <header>, and <footer>). These help screen reader users navigate the page layout. Each tag has a corresponding ARIA role that can be used on <div> and other older tags to mimic HTML5 structure. In modern browsers, it is not necessary to include redundant role attributes.

Everything visible on the page should be included in a landmark. There should be one main landmark. Most other landmarks can be enclosed within other landmark regions, but it’s best practice to use only one banner (<header>) and contentinfo (<footer>) region.

When multiple landmarks have the same role, you can use ARIA labels to give them unique and descriptive names. Without labels, <nav> elements used for the main navigation, breadcrumbs, and pagination might all appear as “navigation” in the landmarks menu. Navigation menus should not use the ARIA menu role, which is intended for operating system menus.

With the generic “region” role, it is possible to create custom landmark regions. The region should have an ARIA label that describes its purpose. See Building the Accessible Name and Description.

• Landmarks and where to put them, Kilian Valkhof
• Landmarks checklist, Deque University