電子商取引のウェブサイトにユーティリティバーとメインナビゲーションを意味的にマークアップする方法は？

Question

これは、Webコマースサイトのヘッダー用に作成したマークアップです。それが意味論的に正しいのかどうかはわかりません - 特にユーティリティーバー。ウィッシュリストページ、アカウントへのリンクのコンテナdivにnavigationまたはそれはまたnav要素またはaside内でなければならない - 私はroleを追加すべきか？支援技術に対してよりアクセス可能と優しい -

はまた、（クライアントがこのようにそれを望んでいる設計の順序を変更することはできません）私は、この設計をするために何ができるかをお知らせください。

<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>を使用しています。 <header>の場合でも、ページに<nav>個の要素が複数あることは問題ありません。 <nav>は、一般的にナビゲーションの主要なブロック（実際にはページ上で2〜3点を最大にする）に予約されていますが、私はこれらの両方があなたの例に当てはまると思います。

はそれがスクリーンリーダーのユーザーにアイテムの数を発表して、リスト内のあなたのリンクを置くことを検討してください。

また、visuallyhiddenクラスは、画面リーダー以外のすべてのユーザーから<h2>を非表示にすると思われます。 aria-labelledbyとペアにすると、2回発表されます。 <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をダウンロード（とあなたの雇用者が現金を持っている場合は寄付）とビルドページを通してそれを実行することを検討することができます。