HTML講座 / HTMLアクセシビリティの基本を確認する

HTMLのアクセシビリティは、内容の意味、分かる名前、必要な代替情報、キーボードで操作できる構造をそろえることから始まります。正しい要素を使い、実際に操作して確認することが重要で、自動検査でエラーがないだけでは十分とは限りません。

見出しで内容の階層を伝える

ページの主題、大きな節、その下位の話題を見出しの階層で表します。文字を小さくしたいだけでh4へ飛ばず、見た目をCSSで変えます。見出しだけ読んでも内容の流れが分かるようにします。

例えば「配送について」の下に「配送地域」「配送時間」があるなら、同じ親の下に同じレベルで並べます。空の見出しや直後の説明と合わない文言を避けます。具体的な構造は見出しと段落で比較できます。

リンクと画像を文脈に合う言葉にする

「こちら」だけのリンクを並べず、移動先や操作の目的が分かる文章にします。ダウンロードならファイルの種類なども必要に応じて伝えます。画像のaltはその場所で伝える情報や役割に合わせ、装飾だけなら空にする場合があります。

画像だけがリンクなら、景色の形だけでなく行き先の目的が分かる代替情報が必要です。すべての色や形を列挙するのではなく、読者が判断するために必要な内容を伝えます。画像とaltとW3C WAIの画像の判断フローを参照できます。

マウスなしで操作する

Tabでリンク、入力欄、ボタンへ移動し、どこにフォーカスがあるか見えることを確認します。通常、リンクはEnter、ボタンはEnterやSpaceで操作できます。移動にはa、操作にはbuttonなど、目的に合う標準要素を選びます。

クリック処理を付けたdivだけではボタンの意味やキーボード操作は得られません。メニューや説明が開閉するときは、フォーカスが見えない内容へ入ってしまわないかも確認します。フォームではラベルを認識し、エラーから欄へ戻って修正できるかを試します。関連付けはlabelとinputの実習でも確認できます。

手動確認用の小さなページ

次をaccessible-page.htmlとして保存し、画像講座の960ピクセル版を同じフォルダーへ置きます。このフォームは検証とGET値の確認用で、メッセージ受信サービスではありません。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Keyboard-testing practice</title>
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    img { max-width: 100%; height: auto; }
    input { max-width: 100%; font: inherit; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <a href="#main-content">Skip to main content</a>
  <header>
    <nav aria-label="On this page">
      <a href="#guide">Visitor guide</a>
      <a href="#contact">Contact practice</a>
    </nav>
  </header>
  <main id="main-content" tabindex="-1">
    <h1>Small Garden guide</h1>
    <section id="guide">
      <h2>Visitor guide</h2>
      <p>Bring comfortable shoes and water.</p>
      <img src="html-image-sample-lake-tree-960-v1.webp"
           alt="A tree on a small island in a lake with mountains beyond" width="960" height="540">
    </section>
    <section id="contact">
      <h2>Practice a contact field</h2>
      <form method="get">
        <label for="practice-email">Email (required)</label>
        <input id="practice-email" name="email" type="email"
               aria-describedby="email-help" required>
        <p id="email-help">Use name@example.com instead of a real address.</p>
        <button type="submit">Inspect entered values</button>
      </form>
    </section>
  </main>
</body>
</html>

最初のTabでスキップリンクにフォーカスし、Enterで主要な内容へ移動します。mainのtabindex="-1"は通常のTab移動先を増やさず、移動先としてフォーカスを受けられるようにします。その後のTabの順序も確認してください。

メールを空、abc、正しいテスト形式の順に入力して比較し、入力中もラベルと説明が残るかを見ます。390ピクセル程度の幅とズームでも試します。画像を一時的に別名にして代替情報を確認したら、元の名前に戻します。W3C WAIのページ構造にも確認観点があります。

検査で分かる範囲を区別する

自動ツールは構文上の問題の一部を見つけられますが、リンク文が分かりやすいか、画像の説明が文脈に合うかを常に判断できるわけではありません。キーボード、拡大、必要に応じたスクリーンリーダーの確認と組み合わせます。

この実習に通ったことだけで、すべてのアクセシビリティ要件を満たすとは言えません。重要な利用経路を優先して確認し、HTML、CSS、独自スクリプトで追加した状態やフォーカスを分けて調べます。MDNのHTMLとアクセシビリティで標準要素のパターンを確認できます。