Question

我正在组织我的网页以获得最佳语义和可访问性练习。我有桌面导航和移动导航。具有两个导航标签及其角色在语义上是否可以？

这是我的结构：

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

Answer 1

两次使用导航角色在语义上是可以的。但是，要区分元素，也可以使用aria-labelledby。请参阅Using ARIA Landmarks to identify regions of a page。

如果导航相同，请考虑使用Responsive Nav之类的插件，这样就不会不必要地重复这些信息。

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

1 个答案: