Code examples
Use semantic HTML
This semantic HTML contains all accessibility features by default.
<a href="#example-main">Skip to main content</a>
<a href="#">Not 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>
About main content
The main content of the page belongs here.
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.
- If a page has multiple
<main>
landmarks, then each should have a unique programmatic label.- Use
aria-label="Content name"
when there is not a visible content label. aria-labelledby="content-id"
can be used when the content label is a visible heading or existing page text.
- Use
Role
- Identifies itself as a main landmark
- If a non-semantic element must be used (like a
<div>
) userole="main"
.
Group
- must contain the main content of the page.
- Ideally appears only once per Web 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.