Question

以下是WCAG 2.0 AA无效的代码示例。无效的部分是在页脚中使用H3标签而H1和H3标签之间不存在H2： [WCAG v2 1.3.1（A）]正确嵌套标题（H1> H2> H3）：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <h1>test</h1>
    <p>lorem</p>
    <footer>
        <h3>test f</h3>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </footer>
</body>
</html>

考虑到页脚之前的内容是由编辑编辑的，而没有关于WCAG指南的正确知识，编写WCAG网站的最佳方法是什么？

到目前为止，我看到了两个解决方案：

不在页脚中使用h3或任何其他标题标记
通过在页脚中的h3之前添加h1和h2来重置标头嵌套，并将其隐藏在CSS中。

我认为这些都不是好的解决方案。这就是为什么： 1.页脚有时可由用户编辑（CMS使用），您必须始终在页脚内容之前将内容存入帐户 2.我不认为用css隐藏内容是一个很好的解决方案

这个问题有解决方案吗？

谢谢

Answer 1

您需要sectioning elements：section，article，nav和aside。

每个切片元素都应该有一个标题。您可以随时使用h1！

所以你的例子看起来像：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <h1>test</h1>
    <p>lorem</p>
    <footer>
      <section>
        <h1>test f</h1>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
      </section>
    </footer>
</body>
</html>

Answer 2

我不建议使用太多的h1。它并不反对wcag，但是不同的标题级别可以帮助屏幕阅读器（例如我）的用户理解层次结构。跳过航向级别也不是最好的选择，但是比拥有太多的h1更好。我建议始终在页脚中使用h3，如果有时您从h1跳到h3，那就可以了。用户会理解它，因为该部分正在重复。它不反对wcag，对于实际用户来说更容易理解。

如何在页脚中使用/不使用标题标记，以使代码为WCAG 2.0 AA有效？

2 个答案: