Custom landmarks
Elements like headers, footers, and navigation are built into HTML as they’re common to most websites, but sometimes something more individual is called for.
Some examples of custom landmarks are:
- Filter panels for product listings
- Calls to action
- ‘About the author’ box-outs on blog articles
Custom landmarks are created using the <section> element. They can also be created by using role="region", though the two methods are not quite interchangeable.
Sections should be given an accessible name via aria-labelledby or aria-label.
Labelling with a heading
These sections are labelled by their heading, using aria-labelledby.