Question

这是我为网络商务网站的标题编写的标记。我不确定它在语义上是否正确 - 尤其是实用程序栏。我应该将role - navigation添加到帐户，愿望清单页面的链接的容器div中，还是应该在nav元素或{{1}内}}？

另外请让我知道我能做些什么来使这个设计（不能改变设计的顺序 - 客户希望这样）对辅助技术更容易接受和友好。

aside

Answer 1

而不是<div role="navigation">只使用<nav>。即使在<nav>中，页面上也可以有多个<header>元素。虽然<nav>通常保留用于主要导航块（实际上，您最多可以在页面上的两个或三个），但我认为这些都符合您的示例。

考虑将链接放在列表中，因为它会向屏幕阅读器用户宣布项目数。

此外，我怀疑您的visuallyhidden课程可以隐藏除{screen}之外的所有用户<h2>。与aria-labelledby配对会导致它被宣布两次。拥有<h2>也可以在屏幕阅读器中的标题导航中创建不必要的停止。考虑完全转储<h2>并改为使用aria-label。这样您就不需要在视觉上隐藏它，您仍然可以为屏幕阅读器用户提供上下文。

此时，您可能还希望对主导航执行此操作（或不执行此操作，具体取决于用户测试及其制作页面的详细程度）。

所以，稍微调整你的例子：

<header>
 <nav aria-label="Account and store pages" class="utility-nav">
   <ul class="align-right">
    <li><a href="#">my account</a></li>
    <li><a href="#">find a store</a></li>
    <li><a href="#">credit center</a></li>
    <li><a href="#">track order</a></li>
    <li><a href="#">wishlist</a></li>
   </ul>
 </nav>  <!-- utility bar -->

 […]

 <nav aria-label="Primary navigation" id="top-nav">
  <ul>
   <li><a href="#">Women</a></li>
   <li><a href="#">Men</a></li>
   <li><a href="#">Juniors</a></li>
   <li><a href="#">Baby</a></li>
 <!-- etc -->
  </ul>        
 </nav>
</header>

如果可以，请考虑下载free screen reader NVDA（如果您的雇主有现金，则捐赠）并通过您构建的页面运行。

如何在电子商务网站中语义标记实用工具栏和主导航？

1 个答案: