1×
Become a member
to unlock all features

Create an egghead account to access 5000+ tutorials and resources from expert developers.

Create account
Autoplay

    Define Landmark Regions of a web page using HTML5 sectioning elements

    reactReact
    >=16.10.2

    Landmark regions are used by screen readers to make it easier for users to navigate the content on the page by defining the structure of the page. Tools like the Rotor in VoiceOver rely on landmark regions to provide users with the ability to skip directly to the desired section of the page. We can do this either using HTML5 landmark elements or

    elements with aria roles. In the past, the recommendation was to use both but now we should only use one or the other. We should prefer HTML5 to ARIA roles when possible.

    The following are HTML5 elements for landmark regions:

    • article
    • aside
    • header
    • footer
    • main
    • nav
    • section

    References