質問する
15294 次
18

HTML5 と WAI-ARIA を使用して HTML のアクセシビリティを改善しようとしています。

以下の設定でよろしいでしょうか？

<!-- main content -->
<section id="main" role="main">
    <h1>The main content</h1>

    <!-- This div needs to be here for styling reasons -->
    <div class="the-content">    
         <p>All the text that goes with the main content</p>
    </div>

    <!-- the sidebar -->
    <aside id="sidebar" role="complementary">
        <h2>A title</h2>
        <p>Some text</p>
    <aside>
</section>

確信が持てないのは、要素をコンテナ<aside>の外に置く必要があるかどうかです。それは問題ですか？<section>role="main"

4

4 に答える 4

17

はい、問題ありません。どこに配置するかは、asideタグ内のコンテンツがメインにどのように関連するかによって定義されますsection。

例えば：

のコンテンツがaside本編に関連する場合は、 の中にある必要がありmain sectionます。ただし、内部のコンテンツsidebar aside tagが異なる場合はmain、外部に配置しますmain section

http://html5doctor.com/aside-revisited/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

于 2013-07-09T13:49:28.750 に答える
8

はい、<aside>内部<section>は完全に有効なマークアップであり、心配している場合は W3C 検証に合格します。

<section>要素は、要素を含む可能性のあるフロー コンテンツを内部に許可し<aside>ます。

それとは別に（しゃれが意図されています）、そのrole=main部分が有効であることに疑問があります- thisによると、要素で許可されているロール属性値のみを<section>以下に示します。

デフォルトの ARIA セマンティクス:

role=region.

その他の ARIA の役割、状態、およびプロパティは何を使用できますか?

alert、、、、、、、、、、または。alertdialog_ application_ contentinfo_ dialog_ document_ log_ marquee_searchstatus

許可されたロールに適用可能なグローバルaria-*属性と aria-* 属性。

mainこれには、特に役割が含まれていません。

于 2013-07-09T13:50:08.763 に答える
3

仕様 (既に含まれている編集者のドラフト) では、、、または内に要素mainをネストすることは許可されていませんが、これらの要素を 内にネストすることについては何も述べていません。また、 内でand (ドキュメント内ナビゲーション)を使用する 2 つの例も示します。そのため、少なくともorにネストされた(したがってそのレベルにスコープが設定された) も許可する必要があります。また、補足情報を含むコンテンツの一部 (WCAG Wiki の使用例のように) がページのメイン コンテンツを形成する場合も想像できるので、それを許可しないことは合理的ではないと思います。mainarticleasidefooterheadernavmainarticlenavmainasidearticlesectionaside

一方、アウトライン アルゴリズム (これは現在、 を含むすべてのセクショニング コンテンツが存在する主な理由であると思われます) は依然として「危険にさらされている」とasideマークされているため、これらの要素の定義は変更される可能性があり、いくつかの明確化が行われる可能性があります。追加した。

おそらく、この質問は HTML5 仕様の編集者に尋ねるべきでしょうか?

于 2013-07-09T16:35:24.270 に答える
2

タグをドロップする場所に関しては、ダレンに同意します。また、あなたのタグ付けは少し風変わりです。さまざまなタグがネイティブに WAI-ARIA ロールを持っていますが、ネイティブ ロールを上書きすることはできますが、なぜですか? Paciello Group のブログのWAI-ARIAに関するこの投稿では、それについて詳しく説明しています。元：

使用する代わりに

<section id="main" role="main">

<main>これは同じことを意味し、より良い練習をすることができます。タグには補完的な役割がネイティブに追加されているため、 My name is Ryan 、実際には my name is<aside> Ryan と言っているようなものです。

于 2013-07-09T14:45:45.863 に答える