你能在<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

是的,它<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角色.