Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<a href="#example-main">Skip to main content</a>
<main tabindex="-1" id="example-main">
  <h1>About main content</h1>
  <p>The main content of the page belongs here.</p>
  <p><a href="#">Focus moves here next</a></p>
</main>
Skip to main content

About main content

The main content of the page belongs here.

Focus moves here next

When you can’t use semantic HTML

This custom main element requires extra attributes.

<div role="main" tabindex="-1" id="example-main"> 
  <h1>About our company</h1>
  <p>The main content of the page belongs here.</p>
</div>

Developer notes

Name

  • Typically doesn’t have a name other than its role.

Role

  • Identifies itself as a main landmark
  • If a non-semantic element must be used (like a <div>) use role="main".

Group

  • Should contain the main content of the page.

Focus

  • Can be targeted with a skip link, but isn’t focusable with the tab key
  • Use tabindex="-1" to make the main targetable with a skip link.