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

Question

这是我为电子商务网站的页眉编写的标记。我不确定它在语义上是否正确——尤其是实用程序栏。我应该将 role-navigation 添加到帐户、心愿单页面链接的容器 div 中，还是应该在 nav 元素或 [=15] 中=]？

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

<header>

  <div role="navigation" aria-labelledby="utility-nav" class="utility-nav">
    <h2 class="visuallyhidden" id="utility-nav">Account and store pages</h2>
      <div class="align-right">
        <a href="#">my account</a>
        <a href="#">find a store</a>
        <a href="#">credit center</a>
        <a href="#">track order</a>
        <a href="#">wishlist</a>
      </div>
  </div>  <!-- utility bar -->

  <div id="logo-search">

   <!-- logo -->
   <!-- search -->
   <!-- mini cart/shopping bag -->

  </div> <!-- logo, search, shopping bag container -->     

  <nav id="top-nav">
    <a href="#">Women</a>
    <a href="#">Men</a>
    <a href="#">Juniors</a>
    <a href="#">Baby</a>
    <!-- etc -->              
  </nav>  <!-- top nav -->

</header> <!-- header -->

Answer 1

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

考虑将您的链接放在一个列表中，因为它会向屏幕 reader 用户宣布项目的数量。

此外，我怀疑您的 visuallyhidden class 是为了向除屏幕 reader 之外的所有用户隐藏 <h2>。将其与 aria-labelledby 配对会导致它被宣布两次。拥有 <h2> 还可以在屏幕 reader 内的标题导航中创建不必要的停靠点。考虑完全放弃 <h2> 并改用 aria-label。这样你就不需要在视觉上隐藏它，你仍然可以为你的屏幕 reader 用户提供上下文。

此时，您可能还想对主导航执行此操作（或不执行此操作，具体取决于用户测试以及它使页面变得多冗长）。

因此，稍微调整一下您的示例：

<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（如果您的雇主有现金则捐赠）并通过您构建的页面运行它。

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

How to semantically mark up an utility bar and main navigation in a e-commerce website?

html

accessibility

semantic-markup

wai-aria