9

私はサイトをマークアップしている最中で、アクセシビリティのスキルを磨こうと真剣に取り組んでいます。タブ付きコンテンツで最もセマンティックなマークアップは何だろうと思っています。これは私が今持っているものです：

<section>
  <nav>
    <a href="#tab" aria-controls="content">Stuff</a>
    <a href="#tab" aria-controls="content">Stuff</a>
    <a href="#tab" aria-controls="content">Stuff</a>
  </nav>
  <section id="content" aria-live="polite" role="region">
    <article>...</article>
    <article>...</article>
    <article>...</article>
   </section>    
</section>

これについていくつか具体的な質問があります。

  1. 私は正しい軌道に乗っていますか？そうでない場合、誰かがいくつかの変更を推奨できますか?
  2. AJAX 経由で記事を読み込む場合、変更を加える必要がありますか?
  3. ナビタグは必要ですか？
  4. ここでは WAI-ARIA のロールで十分ですか?
  5. これらは正しい WAI-ARIA ロールですか?
4

2 に答える 2

1

このレベルではセマンティクスが曖昧になる傾向がありますが、各タブが実際に個別の記事としてカウントされる限り、正しい方向に進んでいると思います。

article 要素は、ドキュメント、ページ、アプリケーション、またはサイト内の自己完結型の構成で構成されるページのコンポーネントを表し、シンジケーションなどで独立して配布または再利用できるように意図されています。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーが投稿したコメント、インタラクティブなウィジェットやガジェット、またはその他の独立したコンテンツ アイテムである可能性があります。

ソース

ここで が間違っているとは思いません<nav>が、Web サイト全体に関してさまざまなタブがどれほど重要であるかによって異なります。

nav 要素は、他のページまたはページ内のパーツにリンクするページのセクション (ナビゲーション リンクを含むセクション) を表します。ページ上のリンクのすべてのグループが nav 要素に含まれる必要はありません。主要なナビゲーション ブロックで構成されるセクションのみが nav 要素に適しています。特に、フッターにはサイトのさまざまな主要部分へのリンクのリストがあるのが一般的ですが、そのような場合にはフッター要素がより適切であり、これらのリンクには nav 要素は必要ありません。

ソース

ただし、 s を使用sectionして内容をラップすることはしません。

section 要素は、一般的なコンテナー要素ではありません。要素がスタイリング目的またはスクリプト作成の便宜のためにのみ必要な場合、作成者は代わりに div 要素を使用することをお勧めします。原則として、 section 要素は、要素の内容がドキュメントのアウトラインに明示的に記載されている場合にのみ適切です。

ソース

要素の最初の追加ルールは<section>、タイトルを持つ必要があるということです。そうでない場合、それはおそらく実際には「セクション」ではなく、何かでラップする必要がある単なる要素のグループであるため、<div>.

于 2013-10-05T23:09:34.367 に答える