为可折叠子菜单更正HTML5/ARIA标记

我试图弄清楚如何使用HTML5和ARIA正确地标记带有可折叠部分的导航

到目前为止，我得到的是：

<nav>
    <h2 id="heading-overview" aria-controls="section-overview">Overview</h2>
    <ul id="section-overview" aria-labeledby="heading-overview" aria-expanded="false">
        <li><a aria-selected="true">Layout</a></li>
        <li><a>Color Schema</a></li>
    </ul>
    <h2 id="heading-typography" aria-controls="section-typography">Typography</h2>
    <ul id="section-typography" aria-labeledby="heading-typography" aria-expanded="false">
        <li><a>Sizes</a></li>
        <li><a>Colors</a></li>
        <li><a>Types</a></li>
    </ul>
</nav>

概述

布局
颜色模式

印刷术

尺寸
颜色
类型

对我来说，这似乎是一个很大的属性。可能是我附加了标记中隐含的属性吗？或者我可以用其他方式给它贴上标签吗？

HTML5 如果不想为整个导航提供

h1

，则可能需要使用显式

部分

元素，以便将子菜单标题分组在文档大纲中的一个项目下

目前你的大纲是

1。无标题{body}
1.1概览{nav}
1.2排版{nav}

通过显式

部分

元素，您将获得：

1。无标题{body}
1.1无标题{nav}
1.1.1概述{章节}
1.1.2排版{section}

i、 e

概述
印刷术

韦阿里亚 该属性被调用，而不是由标记的aria

如果愿意，您可以将

aria-labelledby

属性从

ul

移动到

部分

但是我想您首先并不需要
aria labelledby
，因为您使用的是heading元素，默认情况下，这些元素在HTML语义中会“标记”其部分的内容。然而，HTML5并没有通过隐含的WAI-ARIA语义来表示这一点，因此您可能也希望将这种关系明确地保持在WAI-ARIA级别。
谢谢，这是一个很好的答案！我计划在导航中添加一个H1。因此，我猜H2将在不使用元素的情况下概述导航的不同部分？@Stromgren:是的，如果添加
h1
，可以省略
部分
元素；但请注意，HTML5鼓励（而不是：要求）这样做。