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

Question

在我们的网络应用程序的许多页面的顶部，我们有错误消息和通知，“保存”和其他按钮，然后我们的h1标记与内容标题。在使Web应用程序可访问时，将内容置于顶层结构标记之上是否可以接受，就像我们在这里一样？

Answer 1

作为屏幕阅读器用户，我不喜欢主标题上方的内容。通常我按标题导航，因此会错过错误消息。更好的解决方案是在错误消息上方输出一个h1标题，然后将其余的标题留下来，给你两个h1标题。

Answer 2

是的（你可以把东西放在它们上面）。 H只是意味着标题。这是一个关于标题与我猜的相关的问题。

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

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

Answer 3

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

Answer 4

标题标记用于指示其下方内容的层次结构。您应该只有一个h1标记，它应该是您页面上显示的第一个内容（通常是网站的名称）。此外，在向下钻取不同的内容层时，不应跳过标题标记。

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

Answer 5

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

要回到原来的问题，最好是它们位于页面底部。但是，如果使用CSS“display：none;”隐藏它们或“能见度：隐藏;”然后，大多数（可能是所有？）屏幕阅读器或许多其他辅助技术都不会看到这些属性，因此不应该成为问题。我写了一篇相当详细的explanation of why accessibility technology ignores such elements。

当然，如果有人禁用CSS，事情会变得非常混乱。如果页面上的内容即使在禁用CSS和/或JavaScript时也可以使用，那么将这些元素放在页面底部至少会使事情变得更加混乱。