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

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

可能包含<section>元素的<aside>元素allows flow content inside - 但是如果您仅使用部分进行样式设置，则应该使用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，{{1}中}，footer或header，但它没有说明在nav内嵌套这些元素。它还提供了两个在main内使用article和nav（文档内导航）的示例。因此，至少main嵌套在aside或article（因此限定为其级别）中也应该被允许。我也可以想象这样的情况，其中一些部分内容与内部的一些补充信息（如WCAG Wiki中的aside usage examples）可能形成页面的主要内容，所以我不认为不允许它合理。

另一方面，大纲算法（现在似乎是所有sectioning content存在的主要原因，包括section）仍标记为as being 'at risk'，因此定义这些要素可能会改变，可能会加上一些澄清。

我们可能会向HTML5规范编辑提问这个问题吗？

Answer 4

我会同意Darren关于你放弃标签的地方。此外，您的标记有点古怪。各种标签本身具有WAI-ARIA角色，而是可以覆盖原生角色，但为什么会这样？ Paciello Group博客上的这个post about WAI-ARIA更多地讨论了它。例如：

不使用

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

你可以使用<main>，这意味着同样的事情和更好的练习。 <aside>标签本身添加了补充角色，所以就像说我的名字是Ryan，我的名字就是Ryan 。

你能在<section role =“main”>元素中使用<aside>元素吗？</section> </aside>

4 个答案: