Ember-skeleton刷新时间[关闭](Ember-skeleton refresh time [closed])

 而不是<div role="navigation">只需使用<nav> 。 即使在<header> ，页面上也可以有多个<nav>元素。 虽然<nav>通常是为主要的导航块保留的（实际上你会在页面上最多只有两三个），但我认为这些都符合你的例子。 
 
 考虑将链接放在列表中，因为它会向屏幕阅读器用户宣布项目数。 
 
 此外，我怀疑你的visuallyhidden隐藏课程是否隐藏除了屏幕阅读器以外的所有用户的<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>
 
 如果可以，请考虑下载免费的屏幕阅读器NVDA （如果您的雇主有现金，则捐赠）并通过您构建的页面运行它。 

Instead of <div role="navigation"> just use <nav>. It is ok to have more than one <nav> element on the page, even in a <header>. While <nav> is generally reserved for major blocks of navigation (meaning realistically you would max out at two or three on a page), I think both of these qualify in your example.
 
Consider putting your links within a list as that announces the number of items to a screen reader user.
 
Also, I suspect your visuallyhidden class is there to hide the <h2> from all users except screen readers. Pairing that with aria-labelledby results in it being announced twice. Having the <h2>can also create unnecessary stops in heading navigation within a screen reader. Consider dumping the <h2> altogether and using aria-label instead. This way you don't need to visually hide it and you can still provide context to your screen reader users.
 
At that point, you might want to also do that to the primary navigation (or not, depending on user testing and how verbose it makes the page).
 
So, to tweak your example a bit:
 
<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>
 
If you can, consider downloading the free screen reader NVDA (and donating if your employer has the cash) and running it through the page you build.