1

新しいコンテンツを表示するタブ(ボタンである写真)の行がユーザーに表示される1ページの Web サイトがあります。

アクセシビリティと検索エンジンの使いやすさを念頭に置いて
  、意味的にベストプラクティスと見なされるものは何ですか?

これが私が考え出したものです：

<section class="fruits">
  <h1>Fruits</h1>
  <nav>
    <a data-article-class="banana"> 
      <p>Learn about <strong>Bananas</strong></p> </a>
    <a data-article-class="apple" class="is-selected"> 
      <p>Learn about <strong>Apples</strong></p> </a>
    <a data-article-class="pear">
      <p>Learn about <strong>Pears</strong></p> </a>
  </nav>
  <div>
    <article class="banana">
      <h1>The Banana</h1>
      <p>A long yellow fruit...</p>
    </article>
    <article class="apple is-selected">
      <h1>The Apple</h1>
      <p>A round red fruit...</p>
    </article>
    <article class="pear">
      <h1>The Pear</h1>
      <p>A funny-shaped green fruit...</p>
    </article>
  </div>
</section>
  • ユーザーがタグの 1 つをクリックすると<a>、JavaScriptはとそれに対応するにis-selectedクラスを配置します。<a><article>
  • タグは CSS でスタイル設定され、<a>クリック可能な画像のように表示され、テキストが内側に表示されます。
  • is-selectedクラスは、どのリンクと対応する記事が現在選択されているかを表します。CSS はすべての記事display:none;、次に.display:block;is-selected

正確には、私の質問は次のとおりです。

  • <nav>内部要素を持つ要素を使用する必要があり<a>ますか?

  • このコンテキストで<a>s を<ul>/構造体でラップするのは冗長ですか?<li>

  • このようなセクションのナビゲーションと記事の間の関係を意味的に表現するより良い方法はありますか?

アップデート：

@AlastairCの有益な回答は、私を正しい方向に導きました。ただし、彼はよりセマンティックなネスト形式を提案しましたが、残念ながらdisplay:table-cell;、私が望むこのタブ単位の に基づくレイアウトとは互換性がありません。

Alastair のアドバイスに基づいて、ARIA 標準を使用してコミュニティ wiki の回答のマークアップを修正しました (タブを制御するコンテンツと関連付けるため)。Alastair の回答を選択しようと考えていますが、代替マークアップを使用してコミュニティ wiki の回答にコメントしたり、改善したりできる人がいれば、非常に感謝しています。

4

2 に答える 2

2

それはうまくいくと思いますが、より少ない作業でより良い結果を得る、より良い全体的な HTML アプローチがあるかもしれません。アクセシビリティ (私の専門分野) については、このシナリオの次の要件を検討します。

  1. キーボードを使用して (ただし、画面は表示されます)、画像にタブを付けて選択することはできますか?
  2. 軽度から中程度の視覚障害を持つ人は、ブラウザー コントロールを使用してズームインしてもコンテンツを見ることができます (これはおそらくセマンティクスよりも CSS 側にあるため、ここでは説明しません)。
  3. スクリーン リーダーのユーザーは、画像を選択することでさらに情報があることを伝え、画像が選択されたときに情報を見つけることができますか。

あなたが説明したことを実装するには、主に 2 つの方法が考えられます。これまでのところ、上部に一連のコントロールがあり、その下に選択したオプションが表示される「タブ」アプローチを採用しています。

もう 1 つの方法は、次のようにネストすることです。

<section class="fruits">
  <h1>Fruits</h1>
  <ul>
    <li>
       <a data-article-class="banana"> 
         <p>Learn about <strong>Bananas</strong></p>
       </a>
       <div id="content-banana">
         <h2>The Banana</h2>
         <p>A long yellow fruit...</p>
       </div>
    </li>
    ...
  </ul>
</section>

次に、可視コンテンツを希望する場所に配置する必要があります。説明から（図なしで）それが機能するかどうかはわかりませんが、通常は実行可能です。

どちらのアプローチでも、キーボードのみのシナリオとズーム シナリオを満たすことができますが、スクリーン リーダーに対して行う必要があることはかなり異なります。

タブ アプローチの場合、WAI-ARIAを使用してコントロールとコンテンツ間の関係を設定し、キーボード コントロールの操作にかなりの時間を費やす必要があります (タブのデザイン パターンを参照)。そうしないと、スクリーン リーダーのユーザーが画像を選択したときに、コンテンツがどこに表示されているかわかりません。

ネストされたアプローチの場合、DOM によってセットアップされる固有の関係があるため、作業はより簡単になります。スクリーン リーダーのユーザーは、画像を参照して (通常は「矢印」)、画像を選択します。選択したときにキーボード フォーカスを新しいコンテンツに移動することをお勧めします。そのため、コンテンツを表示する関数の最後に次のようなものを追加します。

$('#content-banana').attr('tabindex', '-1').css('outline', 'none');
$('#content-banana').focus();

これにより、div がフォーカス可能になり、アウトラインが削除され (「タブ」で移動できないため不要)、そこにフォーカスが設定されます。 注:行を結合できるように見えますが、スクリーン リーダー間で確実に機能しないことがわかりました。

読み終わったら、スクリーン リーダーのユーザーは、次の項目に矢印を下に移動して、それを選択する (または選択しない) だけで済みます。コンテンツがどこにあるかを知る問題はありません。

どのタグを使用するかについて<article>は、かなり多くのコンテンツがない限り、ここではあまり適していません。アイテム全体に適している可能性があります ( を置き換えます) が、配布/シンジケートを目的としてsectionいない場合は、セクションで問題ありません。

スクリーン リーダーのユーザーが興味がない場合に残りの項目をスキップする方法を提供するため、コンテナーとしてリストを使用することに傾倒します。ネストされたアプローチでは、「nav」はまったく適していません。タブ アプローチでも、W3C はタブ コントロールのリストとリンクを推奨しています。

また、ソース内で画像とコンテンツを近くに配置することは、SEO にとって良いことだと思います(ただし、修正される可能性があります)。

注意: 画像に意味がある場合は、適切な alt 属性を持つ前景画像にする必要があることも指摘しておく必要があります。

于 2013-09-06T09:57:38.437 に答える
0

@AlastairC のガイダンスに従って、 WAI-ARIA タブ パネル ウィジェットを含むこのソリューションを開始しました。

<!--( My Fruit Tabbing Widget )-->
<section class="fruits" role="application">
  <h1>Fruits</h1>

  <nav role="tablist"><ul> <!--( The Tabs )-->
    <li>
      <a id="fruit_tab_1" role="tab" 
       tabindex="1" aria-controls="fruit_content_1"> 
        <p>Learn about <strong>Bananas</strong></p> </a> </li>
    <li>
      <a id="fruit_tab_2" role="tab" 
       tabindex="2" aria-controls="fruit_content_2"> 
        <p>Learn about <strong>Apples</strong></p> </a> </li>
    <li>
      <a id="fruit_tab_3" role="tab" 
       tabindex="3" aria-controls="fruit_content_3">
        <p>Learn about <strong>Pears</strong></p> </a> </li>
  </ul></nav>

  <div role="tabpanel"> <!--( The Content )-->
    <section id="fruit_content_1" 
     role="tabpanel" aria-labelledby="fruit_tab_1">
      <h1>The Banana</h1>
        <p>A long yellow fruit...</p> </section>
    <section id="fruit_content_2"
     role="tabpanel" aria-labelledby="fruit_tab_2">
      <h1>The Apple</h1>
      <p>A round red fruit...</p> </section>
    <section id="fruit_content_3"
     role="tabpanel" aria-labelledby="fruit_tab_3">
      <h1>The Pear</h1>
      <p>A funny-shaped green fruit...</p> </section>
  </div>

</section>

<!--( JavaScript will apply and manipulate 
  aria-hidden attributes on the section tabpanels, 
  and aria-selected on the tabs, as well as provide 
  basic CSS changes for showing or hiding content )-->


誰かが明確化または改善を提供できる場合:

  • 上記の ARIA を正しく実装しましたか? 私はそれに慣れていません。無視することを選択したキーボード機能用の大量の JavaScript を含む公式の例をいくつか見ました。
  • <nav>タブが「果物」セクションのナビゲーションブロックであることは論理的に思えるので、タブリストに適していると思わずにはいられません。これは容認できるのか、容認できるのか、落胆させるのか、それとも容認できないのか?
  • タグはs またはそれ以外<a>よりも適切ですか?<button>
  • どうtabindexですか？これは正しく設定されていますか？私はビジネスを理解していません。tabindex="-1"

この回答は、あなたのような誰かが改善することを期待して、コミュニティ wiki として設定されています。

于 2013-09-07T00:36:56.730 に答える