html - 如何使用 HTML5/Aria 正确标记子导航？

Question

我有一些基本如下所示的 HTML:

<section>
    <h1>Release Notes for 1.0</h1>

    <aside class="versions">
        <h1>Other Versions</h1>
        <ul>
            <li><a href="?ver=3.0">3.0</a></li>
            <li><a href="?ver=2.0">2.0</a></li>
            <li class="active">1.0</li>
        </ul>
    </aside>

    <p>Information...</p>
</section>

我可能弄错了，但使用 <nav> 似乎不合适为此元素。使用 role="contentinfo" 似乎也不合适.

标记版本列表以避免错误地与当前标题为“1.0 的发行说明”的部分相关联的正确方法是什么？

Answer 1

我认为如果下面的结构确实是导航不同发行说明的(子)菜单会更合适:

<div> <!-- maybe use 'section' instead; depends on whole page structure -->
  <nav>
    <h1>All release notes</h1>
    <ul><!-- … --></ul>
  </nav>
  <article> <!-- instead of 'section' -->
    <h1>Release Notes for 1.0</h1>
    <p><!-- … --></p>
  </article>
</div>

当链接的意思是“您可能也对……感兴趣”时，您的示例似乎是合适的，但不要作为导航到其他发行说明文档的主要方法。但在这种情况下，我不会将当前文档包含在此列表中(就像您对 <li class="active">1.0</li> 所做的那样)。