我在阅读英国政府网站html代码时学习到，我们可以使用nav元素里面的heading元素来描述这个nav组件。网站的源代码如下：

<nav 
  role="navigation" 
  class="gem-c-related-navigation__nav-section" 
  aria-labelledby="related-nav-topics-8663b31f"
>

  <h2 id="related-nav-topics-8663b31f" class="gem-c-related-navigation__sub-heading gem-c-related-navigation__sub-heading--footer">
    Explore the topic
  </h2>

  <ul class="gem-c-related-navigation__link-list">
    <li class="gem-c-related-navigation__link">
      <a class="govuk-link gem-c-related-navigation__section-link--footer" href="/government/content-publishing">
        Government content and publishing
      </a>
    </li>
    <li class="gem-c-related-navigation__link">
      <a class="govuk-link govuk-link gem-c-related-navigation__section-link--footer" href="/government/digital-accessibility">
        Digital accessibility
      </a>
    </li>
  </ul>
</nav>

我之前的直觉一直都是将heading放在nav元素之前，即使这样，应该也需要在nav上面增加一个aria-label属性来描述这个nav，但是语义并没有uk政府网站这样来的好。

当我们使用firefox浏览检查uk政府网站这个nav元素会看到这样的accessibility dom tree。

navigation:           "Explore the topic"
  heading:            "Explore the topic"
    text leaf:        "Explore the topic"
  list:
    listitem:         "Government content and publishing"
      link:           "Government content and publishing"
        text leaf:    "Government content and publishing"
    listitem:         "Digital accessibility"
      link:           "Digital accessibility"
        text leaf:    "Digital accessibility"

我们现在可以去掉他们的class，简化成我们未来可以在项目中直接复制粘贴使用的html结构。

<nav role="navigation" aria-labelledby="unique-id">
  <h2 id="unique-id">Explore the topic</h2>
  <ul>
    <li>
      <a href="/">Link text</a>
    </li>
    <li>
      <a href="/">Link text</a>
    </li>
  </ul>
</nav>

TODO: 看看voice over是怎么朗读这样的html markup。