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.
| 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.