Question

我试图弄清楚如何使用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>

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

Answer 1

HTML5

如果您不想为整个导航提供h1，则可能需要使用显式section元素，以便子菜单标题分组在文档大纲中的一个项目下。

目前您的大纲是

1. untitled {body}
  1.1 Overview {nav}
  1.2 Typography {nav}

使用明确的section元素：

1. untitled {body}
  1.1 untitled {nav}
    1.1.1 Overview {section}
    1.1.2 Typography {section}

即，

<nav>
  <section>
    <h2>Overview</h2>
  </section>
  <section>
    <h2>Typography</h2>
  </section>
</nav>

WAI-ARIA

该属性名为aria-labelledby，而不是aria-labeledby。

如果您愿意，可以将aria-labelledby属性从ul移至section。

但是我猜你首先不需要aria-labelledby，因为你正在使用标题元素，默认情况下，HTML语义“标记”其部分的内容。但是，HTML5并不是通过隐式WAI-ARIA语义来表示这一点，所以也许你也希望明确地将这种关系保持在WAI-ARIA级别上。

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

1 个答案:

HTML5

WAI-ARIA