多个 h1 会导致屏幕阅读器出现问题吗？答案

【问题标题】：Do multiple h1's cause screen readers problems?多个 h1 会导致屏幕阅读器出现问题吗？
【发布时间】：2016-05-20 18:52:32
【问题描述】：

当我通过 W3C 检查器放置我正在构建的网站时，它要求我考虑仅使用 h1 作为顶级标题，并指出我在一个部分内有一个 h1 的部分。它还提到屏幕阅读器会将它们全部视为顶级元素，但是，根据 HTML5 规范，部分有效地“重置”标题，因此您可以在其中从 1-6 开始另一个层次结构。

如果我们试图专注于 W3C 验证和可访问性，我应该只在部分中使用 h2-h6 吗？还是这个警告不正确？

【问题讨论】：

w3c 并没有说它是无效的，它只是告诉你，虽然标记是有效的，但你现在应该考虑换一种方式，因为某些浏览器/屏幕阅读器可能会以您意想不到的方式处理该设置。
是的，您应该只在部分中使用 h2-h6。我强烈建议您阅读paciellogroup.com/blog/2013/10/html5-document-outline

标签： html accessibility w3c screen-readers

【解决方案1】：

这个警告是正确的。每页应该只有一个 h1，并且应该与页面标题匹配。您可以有多个 H2 来表示 H1 下新部分的开始，并使用 H3 或 H4 进一步分解这些部分，就像大纲一样。屏幕阅读器用户依靠 H1 来表示主要内容的开始。如果你有多个 H1，就会迷失方向，他们现在必须通读每个部分的所有内容才能理解页面的结构。

【讨论】：

我是屏幕阅读器用户，您说的有误。拥有多个 H1 完全没有问题，也不会让人迷失方向。有时它甚至是有益的，因为它可以更快地跳转到页面的关键部分；有时最好有几个H1而不是一个H1和几个H2；在所有页面中使用相同的单个 H1 实际上是毫无用处的。

【解决方案2】：

在任何地方都使用h1 is valid（如果正确使用了分段元素），但HTML5 规范encourages 作者使用与分段嵌套相对应的等级的标题元素（h1-h6）。

为什么鼓励不在任何地方都使用h1，尽管这是can be beneficial？很可能是因为并非所有相关的用户代理（如屏幕阅读器）都支持HTML5 outline algorithm。

因此，如果您想支持不支持 HTML5 和/或大纲算法的屏幕阅读器，您可能需要按照建议使用适当等级的标题元素。

【讨论】：

2021 年的当前状态似乎仍不清楚，似乎没有人确定是否应该根据 HTML4 或 HTML5 规范编写 可访问 页面。对于 HTML5，是否应该遵循 W3C HTML5 或 WHATWG 规范尚不清楚。请注意，https://www.w3.org/TR/html51/ 的 W3C HTML 5.1 重定向到 WHATWG 规范，所以我想现在应该将其视为推荐版本。我想，为了获得最佳兼容性，您应该使用 WHATWG 分段元素（例如 <article> 和 <section>）创作内容，并在与大纲算法值匹配的元素中使用 h1...h6。
理论上，在任何地方都可以只使用分段元素和<h1>，但在 2021 年，需要辅助功能的人们使用的真实用户代理仍然无法正确支持 HTML5。

【解决方案3】：

尽管每当你有一个新的部分时重置标题级别在语法上并不是错误的，但遵循你正在使用的工具给出的建议并在整个文档中正确构建标题层次结构是一个好习惯。

例如，某些屏幕阅读器可能使您能够使用某个快捷方式使用某个快捷方式转到下一个h1 标题，您不能假设每个屏幕阅读器的实现都相同。有些人可能会选择在同一部分的下一个h1，有些人可能会选择按DOM顺序转到下一个h1。

【讨论】：