HTML 5 Landmarks and equivalent ARIA Landmark Roles

WAI-ARIA roles provide more semantic meaning to content making webpages more accessbile. ARIA landmark roles provide a way to turn bare <divs> into HTML 5 landmarks. This can be useful in systems where the <divs> can’t be turned into real HTML 5 landmarks for whatever reason.

Comparison of HTML 5 Landmarks and equivalent ARIA Landmark Roles
HTML 5 Landmark Equivalent ARIA Landmark Roles more information
<main> <div role="main"> info about the ARIA main role
<nav> <div role="navigation"> info about the ARIA navigation role
<header> <div role="banner"> info about the ARIA banner role
<footer> <div role="contentinfo"> info about the ARIA content info role
<section> <div role="region" aria-label="Example"> info about the ARIA region role
<aside> <div role="complementary"> info about the ARIA complementary role
<form> <div role="form" aria-label="Contact information"> info about the ARIA form role

Find about more about ARIA (Accessible Rich Internet Applications markup) in the Custom JavaScript/ARIA Widgets Buckeye Learn course.