web - Web 可访问性和 h1-h6 标题 - 所有内容都必须在这些标签下吗？

Question

在我们的 Web 应用程序的许多页面的顶部，我们有错误消息和通知、“保存”和其他按钮，然后是带有内容标题的 h1 标签。在使 Web 应用程序可访问时，是否可以像我们在这里所做的那样在顶级结构标签之上放置内容？

score 5 · Accepted Answer

作为屏幕阅读器用户，我不喜欢主标题上方的内容。通常我按标题导航，所以会错过错误消息。更好的解决方案是在错误消息上方输出一个 h1 标题，然后将其余标题保持原样，为您提供两个 h1 标题。

score 2 · Accepted Answer

是的（你可以在它们上面放东西）。H 仅表示标题。我猜这是标题与什么相关的问题。

我唯一需要注意的是，H2 不应该真的高于 H1，H3 也不应该高于 H2。但我不认为这是一个实际的规则。网站有菜单、警告、通知。将它们放在您的其他内容之上是可以接受的。只要您的内容按逻辑排序，我看不出它会如何影响可访问性。看看页面 CSS 关闭了。看起来合乎逻辑吗？这是可访问性最重要的部分。

尽管有些人确实加倍努力，将菜单作为标记中的最后一项，并使用 CSS 将其带回顶部。就个人而言，我发现该解决方案适得其反。菜单仍然很重要，它属于页面顶部。

score 1 · Accepted Answer

是的，只要考虑用户将获得信息的顺序。因此，如果您只是进行了一项操作，那么首先获取与其相关的任何消息听起来是个好主意。如果它是出现在与您正在做的事情无关的任何页面上的通知，我不会把它放在上面，因为它可能有点奇怪。您也可以使用不使用样式的文本浏览器，它应该看起来像带有适当标题的文档。

score 0 · Accepted Answer

标题标签用于指示其下方内容的层次结构。您应该只有一个 h1 标签，并且它应该是出现在您的页面上的第一个内容（这通常是网站的名称）。此外，在深入了解不同的内容层时，您不应跳过标题标签。

在您的情况下，您仍然可以使用 CSS 将项目定位在 h1 标记上方，只要它在 html 中的顺序正确。

score 0 · Accepted Answer

我假设标题上方的元素被 JavaScript 使用。在这种情况下，它们最好由 JavaScript 创建，而不是包含在页面源中。

回到您最初的问题，最好将它们放在页面的底部。但是，如果使用 CSS "display: none;" 隐藏它们或“可见性：隐藏；” 属性，那么它们将不会被大多数（也许是全部？）屏幕阅读器或许多其他辅助技术看到，因此不应该成为问题。我已经写了一个相当详细的解释，为什么无障碍技术会忽略这些元素。

当然，如果有人禁用 CSS，事情看起来会很混乱。如果页面上的内容即使在禁用 CSS 和/或 JavaScript 的情况下也可以使用，那么将这些元素放在页面底部至少会使事情变得不那么混乱。

5 回答 5