你能在<section role="main">元素内使用<aside>元素吗？

Question

我正在使用 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" 容器的外面。这样做有影响吗？

- shrewdbeans

---

这个问题的标题有误导性。它暗示了你正在询问如何将一个<aside>元素放在<main>元素内，而你所拥有的代码是一个位于父级<section>内的<aside>元素。 - Inigo

我已经更新了标题，感谢你的发现。 - shrewdbeans

Answer 1

它确实很重要。放置位置是由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

- Darren

Answer 2

是的，<section>内部的<aside>是完全有效的标记，并且如果您担心这一点，它将通过W3C验证。

<section>元素允许包含流内容，其中可能包括<aside>元素-但是，如果您仅出于样式目的使用节，则应该使用div。

除此之外（打开），我对role=main部分是否有效表示怀疑-根据此文档，在<section>元素上允许使用的唯一角色属性值如下所示：

默认的ARIA语义：

role=region。

还可以使用哪些其他ARIA角色、状态和属性？

alert、alertdialog、application、contentinfo、dialog、document、log、 marquee、search或status。

任何全局的aria-*属性以及适用于允许角色的任何aria-*属性。

值得注意的是，其中并不包括main角色。

- dsgriffin

Answer 3

规范（包括main的编辑草案）不允许将main元素嵌套在article、aside、footer、header或nav内，但它没有说明可以在main内嵌套这些元素。它还提供了两个例子，使用article和nav（文档内导航）在main内部。因此，至少应该允许将aside嵌套在article或section中（因此限定在其级别范围内）。我还可以想象这样一种情况：某些带有一些补充信息的内容（例如WCAG Wiki中的aside用法示例）可能会形成页面的主要内容，因此我认为禁止它是不合理的。

另一方面，轮廓算法（现在似乎成为了所有分区内容存在的主要原因，包括aside）仍然被标记为“处于风险中”，因此这些元素的定义可能会更改，并且可能会添加一些澄清。

也许我们应该将这个问题询问HTML5规范编辑？

- Ilya Streltsyn

Answer 4

我会赞同Darren关于标签放置的观点。此外，你的标记有点混乱。各种标记本来就具有WAI-ARIA角色，虽然你可以覆盖原生角色，但为什么要这样做呢？Paciello Group博客上的关于WAI-ARIA的文章更详细地讨论了这个问题。例如：

不要使用

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

你可以直接使用<main>，这意味着相同的事情，并且更好的实践。 <aside> 标签具有补充角色，因此这就像是说“我的名字是Ryan，真正的名字是Ryan”。

- Ryan B

---

我听说在HTML5元素中添加角色可以实现最大兼容性，这是真的吗？ - shrewdbeans

我只听说过这个争论是关于 <nav> 标签的。在进一步评论之前，我需要先查看那些来源。 - Ryan B

恰巧我正在阅读Bruce Lawson关于<main>元素的文章，他提到他仍然会显式地为像nav和main这样的元素添加角色：http://www.brucelawson.co.uk/2014/should-you-use-html5-header-and-footer/#comment-1869844 - crdunst

实际上，<section role="main">与<main>并不相同，因为后者不是一个分区元素，如果您关心文档大纲（而您应该关心！），这是一个非常有用的属性。 - Szabolcs Páll