1

以下は、WCAG 2.0 AA が有効でないコードのサンプルです。無効な部分は、H1 タグと H3 タグの間に H2 が存在しないフッターでの H3 タグの使用です: [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 Web サイトをコーディングする最良の方法は何ですか?

これまでのところ、2つの解決策があります:

  1. フッターで h3 やその他のヘッダー タグを使用しない
  2. フッターの h3 の前に h1 と h2 を追加してヘッダーのネストをリセットし、CSS から非表示にします。

これらはどれも良い解決策ではないと思います。理由は次のとおりです: 1. フッターはユーザー (CMS の使用) が編集できる場合があり、フッター コンテンツの前に存在するコンテンツを常に考慮に入れる必要があります 2. CSS でコンテンツを非表示にすることは良い解決策ではないと思います

この問題の解決策はありますか?

ありがとうございました

4

2 に答える 2

2

断面要素が必要です: 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>
于 2012-11-03T12:03:40.977 に答える