1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Define Landmark Regions of a web page using ARIA roles

    javascriptJavaScript
    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 <div> elements with aria roles. In the past, the recommendation was to use both but now we should only use one or the other.

    The following are ARIA roles for landmark regions:

    • banner
    • complementary
    • contentinfo
    • form
    • main
    • navigation
    • search
    • application

    References