| layout | title | description | categories | |
|---|---|---|---|---|
post |
Quick Tip: Aria Landmark Roles and HTML5 Implicit Mapping
|
Use ARIA Landmark Roles to help assistive devices navigate the markup. |
|
ARIA Landmark Roles help assistive device users navigate your site (example video by Leone Watson on YouTube). Important roles to be aware of are:
- banner – Typically the “header” of your page that includes the name of the site
- search – For the search form (how to implement)
- main – This would designate the main content area on your site
- navigation – Use on any navigation list, typically on the nav element
- contentinfo – Typically the "footer" of your page that contains information about the parent document such as copyrights and links to privacy statements
To add a role to an element, simply add the "role" as an attribute:
<header role="banner" class="site-header">
So, why do you see this warning when you validate your html?
Warning: The banner role is unnecessary for element header.
From line 60, column 1712; to line 60, column 1758
/a></div> <header class="header fixed-pos" role="banner"><div c
You see the warning (consider fixing/changing) because in HTML5, several of the landmark roles are implicit via the native structural elements.
HTML5 Implicit Mappings
| Landmark Role | HTML5 Structural Element |
|---|---|
| banner (if not within an article or section element) | <header> |
| main | <main> (only use one per page) |
| navigation | <nav> |
| contentinfo | <footer> |
| article | <article> |
| complementary | <aside> |
| region | <section> |
The good news is most modern desktop browsers (except IE) support this mapping. However, iOS Safari does not. OUCH! For now, it’s probably best to implement the landmark roles and ignore these warnings.