Landmarks and roles

Landmarks give structure to your page. It's is also used to navigate and understand a page quickly.

• <header role="banner">
• <nav>
• <main>
• <aside>
• <footer role="contentinfo">
• <form>
• <form role="search">

• <nav role="navigation">
• <main role="main">
• <aside role="complementary">

• <nav aria-label="Main navigation"> or even <nav aria-label="Main">
• <nav aria-label="Cocial media links">
• <aside role="Contact information">
• <aside aria-label="Related posts">
• <section aria-label="In the news">

Test with the Apple VoiceOver roter in Safari or with the Landmarks browers addon for FireFox/CHome/Opera

Look at the landmark structure of for example

• GOV.UK
• WordCamp Central
• BBC
• Wikipedia

Resources

• ARIA Landmarks in the WPA11y Handbook
• Landmark Roles specifications

Back to start page