桌面和移动导航的HTML5标记和角色_Html_Accessibility_Semantic Markup_Wai Aria

桌面和移动导航的HTML5标记和角色

html

桌面和移动导航的HTML5标记和角色,html,accessibility,semantic-markup,wai-aria,Html,Accessibility,Semantic Markup,Wai Aria,我正在组织我的网页，以获得最佳语义和可访问性实践。我有桌面导航和移动导航。有两个导航标签和它的角色在语义上可以吗这是我的结构： <!DOCTYPE html> <html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}"> <head> </head> <body class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}"> <sect

我正在组织我的网页，以获得最佳语义和可访问性实践。我有桌面导航和移动导航。有两个导航标签和它的角色在语义上可以吗

这是我的结构：

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

从语义上讲，可以使用导航角色两次。但是，为了区分元素，也可以使用

aria labelledby

。看

如果导航是相同的，考虑使用插件，这样信息就不必重复了。