将.visuallyhidden标题添加到无标题部分是否有用？

Question

我一直在使用outliner来帮助改进语义和可访问性。这样做有助于改善我的内容结构，因为它迫使我思考有意义的组织。据我所知，现代屏幕阅读器可以轻松浏览页面上的标题（h1，h2，...）。

为了改进大纲（以防止无标题部分），我开始使用H5BP的.visuallyhidden class添加额外的标头否则无标题部分用于辅助文本。这会改善语义吗？这对屏幕阅读器用户真的有用吗？这在任何方面都是一种障碍吗？例如：

<nav>
    <h2 class="visuallyhidden">
        Menu
    </h2>
    <ul>
        <li><a>...</a></li>
        <li><a>...</a></li>
    </ul>
</nav>

Answer 1

在部分内容的自然标题不言自明的情况下，这是一种很好的技巧。

  

这会改善语义吗？

如果标题改进了语义，那么你应该考虑不要隐藏它。为什么要将这些语义仅限于辅助技术（AT）用户？

  

这在任何方面都是一种障碍吗？

您作为开发人员的内容，假设您不使用AT，在测试时不会看到。存在这样的风险：文本将在某些维护周期与其所处的内容不同步之后结束。我鼓励您有一种非常简单的方法来禁用“视觉隐藏”的样式，以便您可以轻松阅读标题中的内容。