你可以在 <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" 容器之外。这有关系吗？

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

Answer 2

是的，<section> 中的 <aside> 是完全有效的标记，并且将通过 W3C 验证，如果您担心的话。

<section> 元素 allows flow content inside 可能包括 <aside> 元素 - 但是，如果您仅将部分用于样式目的，则可能应该使用 div。

除此之外（双关语）我怀疑role=main 部分是否有效 - according to this，<section> 元素上允许的唯一角色属性值如下所示：

默认 ARIA 语义：

role=region.

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

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

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

其中明显不包括main 角色。

Answer 3

规范（editor's draft 已经包含main）不允许将main 元素嵌套在article、aside、footer、header 或nav 中，但是它没有说明将这些元素嵌套在main 中。它还提供了两个在main 中使用article 和nav（文档内导航）的示例。因此，至少aside，嵌套在article 或section 中（因此限定在其级别），也应该被允许。我也可以想象这样的情况，其中包含一些补充信息的部分内容（如 WCAG Wiki 中的aside usage examples）可能会形成页面的主要内容，所以我认为禁止它是不合理的.

另一方面，轮廓算法（现在看来是所有sectioning content存在的主要原因，包括aside）仍然标记为as being 'at risk'，因此这些元素的定义可能会发生变化和可能会添加一些说明。

也许我们应该向 HTML5 规范编辑器提出这个问题？

Answer 4

我会同意 Darren 的观点，即您将标签放在哪里。另外，你的标签有点古怪。各种标签本身都有 WAI-ARIA 角色，虽然是的，你可以覆盖原生角色，但你为什么要这样呢？ Paciello Group 博客上的 post about WAI-ARIA 对此进行了更多讨论。例如：

而不是使用

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

您可以只使用<main>，这意味着同样的事情，并且是更好的做法。 <aside> 标签具有原生添加的互补角色，所以就像说我的名字是 Ryan，真的我的名字 is Ryan。