Become a member
to unlock all features

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

Create account

    Define Landmark Regions of a web page using ARIA roles


    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