web-dev-qa-db-ja.com

<section role = "main">要素内で<aside>要素を使用できますか？

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"要素を含める必要があるかどうかはわかりません。それは重要ですか？

htmlaccessibilitywai-aria
18
shrewdbeans

はい、それは重要です。どこに配置するかは、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

17
Darren

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

<section>要素 は、内部のフローコンテンツを許可します これには<aside>要素が含まれる場合があります-ただし、 'スタイリングの目的でのみセクションを使用しているので、代わりにdivを使用する必要があります。

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

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

role=region。

他にどのようなARIAの役割、状態、プロパティを使用できますか？

alert、alertdialog、application、contentinfo、dialog、document、log、Marquee、search、またはstatus。

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

これには、特にmainロールが含まれていません。

7
lifetimes

仕様（ 編集者のドラフト すでにmainが含まれています）では、main、article内にaside要素をネストすることはできません。 、footer、headerまたはnavですが、これらの要素をmain内にネストすることについては何も述べていません。また、article内でnavとmain（ドキュメント内ナビゲーション）を使用する2つの例も提供します。したがって、少なくともasideまたはarticleにネストされた（したがって、そのレベルにスコープされた）sectionも許可する必要があります。また、コンテンツの一部に補足情報が含まれている場合（WCAG Wikiの aside使用例 など）が、ページのメインコンテンツを一緒に形成する場合も想像できます。だから私はそれを禁止することは合理的ではないと思います。

一方、アウトラインアルゴリズム（asideを含むすべての セクションコンテンツ が存在する主な理由のようです）は、まだ 'としてマークされています）リスクがある ' であるため、これらの要素の定義が変更され、いくつかの説明が追加される場合があります。

おそらく、HTML5仕様の編集者にこの質問をする必要がありますか？

3
Ilya Streltsyn

タグをどこにドロップするかについては、ダレンに同意します。また、タグ付けは少し風変わりです。さまざまなタグにWAI-ARIAの役割がネイティブにありますが、はい、ネイティブの役割を上書きできますが、なぜそうするのでしょうか。これ WAI-ARIAについての投稿 PacielloGroupのブログでそれについてもっと話します。例：

使用する代わりに

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

<main>を使用することもできます。これは同じことを意味し、より良い方法です。 <aside>タグには補完的な役割がネイティブに追加されているため、私の名前はライアン、実際には私の名前はライアンです。

2
Ryan B