HTML5 tags and role for both desktop and mobile navigation

StackOverflow https://stackoverflow.com/questions/21211753

Question

I'm organizing my webpage for best semantic and accessibility practice. I have the desktop navigation and the mobile navigation. Is it semantically okay to have two navigation tags with its role?

This is my structure:

<!DOCTYPE html>
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
<head>
</head>
<body class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<section class="social-top">
<a title="Twitter" data-original-title="" href="#6"></a>
<a title="Twitter" data-original-title="" href="#6"></a>
<a title="Twitter" data-original-title="" href="#6"></a>
</section>

<header class="header" role="banner"> 
<!-- Header block -->


<nav class="mainnav" role="navigation">

<!-- Main navigation block for Desktop view -->

</nav>


<nav class="mainnav-mob" role="navigation"> 

<!-- MOBILE Navigation content block --> 

</nav>

</header>

<div id="page-body">
<main role="main">


<!-- site content --> 

</main>
</div>

<footer role="contentinfo"> 
<!-- Footer block -->
</footer>

</body>
</html>
Was it helpful?

Solution

It is semantically OK to use the navigation role twice. However to differentiate between the element perhaps use aria-labelledby as well. See Using ARIA Landmarks to identify regions of a page.

If the navigation is the same consider using a plugin such as Responsive Nav so the information is not unnecessarily repeated.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top