3

私はARIAにまったく慣れていないので、これがばかげた質問であれば優しくしてください。サイドバーが含まれている場合、コンテナ div に「メイン」の役割を与えるのは適切ですか? コンテナ div 内に nav 要素をフロートさせている場合、「メイン」の ARIA ロールをコンテナ div に追加すると、スクリーン リーダーが混乱しますか、それとも問題ありませんか?

ここに画像の説明を入力

さらに説明する HTML の例を次に示します。

<div id="container" role ="main">
    <h1>Content Here</h1>
    <nav id="sidebar">
        <ul>
            <li><a href="foo.com">Foo Item 1</a></li>
            <li><a href="foo.com">Foo Item 2</a></li>
            <li><a href="foo.com">Foo Item 3</a></li>
        </ul>
    </nav>
    <p>More content</p>
</div>
4

2 に答える 2

4

ちょうど尋ねられた質問へのリンクを提供しました。私の答えはそのほとんどをカバーしています。

HTML5 を使用しているため、<main>タグを持つ HTML 5.1 が自動的に使用されます。<div role="main">一部の HTML5 タグにはデフォルトで特定の WAI-ARIA 属性があるため、これを置き換えることができます。

の適切な HTML タグ付け

<div id="container" role ="main">
    <h1>Content Here</h1>
    <nav id="sidebar">
        <ul>
            <li><a href="foo.com">Foo Item 1</a></li>
            <li><a href="foo.com">Foo Item 2</a></li>
            <li><a href="foo.com">Foo Item 3</a></li>
        </ul>
    </nav>
    <p>More content</p>
</div>

だろう

<main>
 <nav role="navigation"> 
  <ul>
   <li><a href="foo.com">Foo Item 1</a></li
   <li><a href="foo.com">Foo Item 2</a></li>
   <li><a href="foo.com">Foo Item 3</a></li>
  </ul>
 </nav>
 <section>
  <h1>Content</h1>
  <p>....</p>
 </section>
</main>

または、ナビゲーションを外側にポップして、<div role=complementary>. このWAI-ARIA ランドマークの例を見てください。

クリスは言った

ナビゲーション スキップ リンク (代替) は通常、扱いにくく、ページのビジュアルを台無しにするか、フォーカスがない限り非表示になるリンクで奇妙なキーボード ナビゲーションを作成します。サイドバーが短い場合、および/またはページのコンテンツに貢献している場合、つまり、ページ内の他のコンテンツの概要を提供することによって、それは許容されることをお勧めします.

スキップ リンクとナビゲーション「メニュー」は 2 つの異なるものです。はい、メイン コンテンツにたどり着く前に、短いナビゲーションまたはフォーカスを取得するもの (リンク、フォーム コントロール、などtabindex='1') しかない場合は、おそらくスキップ リンクなしで回避できます。WAI-ARIA は多くの支援技術によってサポートされていますが、すべてのユーザーに公開されているわけではありません。そのため、スクリーン リーダーを使用してメイン コンテンツに移動するユーザーは、Landmark ナビゲーションまたは別の方法を使用してそこにアクセスできますが、マウスを使用しないユーザー (身体障害者) は、Tab何度も押す必要があります。スキップ リンクは、常に表示するか、フォーカスを得ると表示されるようにする必要があります。

OPのコメントに返信

技術的には、この時点でセマンティクスについて話しているので、その会話はどこにも行きません。本当の違いは小さく、あなたが物事に非常に熱心でない限り、何も壊れません. <aside>内部に要素 4 ( である必要があります) がある<main>ということは、このコンテンツがページのメイン トピック専用であることを意味します。外側は、要素がサイト全体のものであることを意味します。

誰かがそれを誤解する可能性はありますか？そうかもしれませんが、良い言語を使用している場合、これは大きな問題にはなりません。

もし私がそれを外に置いたら、人々はそれを完全に見逃すことができますか? もちろん、これはどのデザインでも可能です。あなたは WAI-ARIA の役割に飛び込むことができますnavigation/complementaryそのようにブラウジングしている人を捕まえるために。見出しの使用は別です。

于 2013-07-13T21:02:15.633 に答える
1

それは、ナビゲーション バーがどの程度「不便」であるか、およびナビゲーション バーの内容が何であるかによって異なります。「メイン」ロールの背後にある意図は、AT に特定のページの「コンテンツ」の開始の目印を提供することにより、ナビゲーション スキップ リンクの必要性を回避することです。ナビゲーション スキップ リンク (代替) は通常、扱いにくく、ページのビジュアルを台無しにするか、フォーカスがない限り非表示になるリンクで奇妙なキーボード ナビゲーションを作成します。サイドバーが短い場合、および/またはページのコンテンツに貢献している場合、つまり、ページ内の他のコンテンツの概要を提供することによって、それは許容されることをお勧めします. ただし、サイドバーに多くのリンクがあり、それらがページの「コンテンツ」の一部と見なされるリンクでない場合は、主な役割をページのコンテンツ セグメントの近くに配置する必要があります。一般に、アクセシビリティは使いやすさの延長であると考えてください。「主な」役割をどこに置くのが最も適切かについては、最善の判断を下してください。特定の役割を正しい目的で使用している限り、質問に対する事実上の正しい答えはありません。Aria の役割には間違いなく不適切な使用法がありますが、概説した使用法はどちらも「メイン」に完全に受け入れられます。

于 2013-07-12T19:17:43.893 に答える