1

以下是 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 网站的最佳方法是什么？

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

  1. 不要在页脚中使用 h3 或任何其他页眉标签
  2. 通过在页脚中的 h3 之前添加 h1 和 h2 来重置页眉嵌套，并将它们从 CSS 中隐藏。

我认为这些都不是好的解决方案。原因如下： 1. 页脚有时可由用户编辑（CMS 使用），您必须始终考虑页脚内容之前存在的内容 2. 我不认为用 css 隐藏内容是一个好的解决方案

这个问题有什么解决办法吗？

谢谢

4

2 回答 2

2

您想要分割元素：section、、article和。navaside

每个切片元素都应该有一个标题。而且您可以随时使用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>
于 2012-11-03T12:03:40.977 回答
0

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

于 2020-10-20T11:42:47.667 回答