ARIA Landmark Roles help assistive device users navigate your site (example video by Leone Watson on YouTube). Important roles to be aware of are:

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.

Edit on GitHub