HTMLでアクセシブルなWebページを作る基本原則を初心者向けに解説

先生と生徒の会話形式で理解しよう

生徒

「先生、アクセシブルなWebページって何ですか？」

先生

「アクセシブルなWebページとは、視覚や聴覚、身体の制限がある人も使いやすいWebページのことです。誰でも情報にアクセスできるWebサイトを作る基本です。」

生徒

「どうやって作るんですか？HTMLでできるんですか？」

先生

「はい、HTMLの書き方やタグの使い方を工夫するだけで、アクセシブルなWebページを作れます。順を追って説明しますね。」

1. 見出しタグで情報の階層を整理する

HTMLでは、h1からh6までの見出しタグを使って文章やコンテンツの階層を整理します。見出しタグを正しく使うことで、スクリーンリーダーを使う人もページの構造を理解しやすくなります。


<h1>サイトのタイトル</h1>
<h2>セクション1の見出し</h2>
<h3>セクション1の詳細項目</h3>

ブラウザ表示

2. 画像には必ず代替テキストをつける

画像を使うときは、alt属性を設定して、画像の内容をテキストで説明します。視覚障害のある人や、画像が読み込めない場合でも情報を伝えられます。


<img src="/img/sample150-100.jpg" alt="青空と草原の写真">

ブラウザ表示

3. 色だけで情報を伝えない

色覚に障害がある人に配慮して、重要な情報は色だけでなく、テキストやアイコンでも伝えるようにしましょう。例えば、赤文字だけで「注意」と書くのではなく、アイコンや文字で注意を明示します。


<p><span style="color:red">注意：</span>入力内容に誤りがあります</p>
<p><i class="bi bi-exclamation-triangle-fill"></i> 入力内容に誤りがあります</p>

ブラウザ表示

4. フォームにはラベルを必ず設定する

フォームの入力欄にはタグを使って、どの情報を入力するのか明確にします。ラベルを設定すると、スクリーンリーダーでも入力欄の意味が伝わります。


<label for="username">ユーザー名</label>
<input type="text" id="username" name="username">

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">

ブラウザ表示

5. リンクは内容がわかるテキストにする

リンクテキストは「ここをクリック」と書くのではなく、リンク先の内容がわかる文章にします。これにより、スクリーンリーダー利用者もリンク先を理解できます。


<a href="https://example.com/guide">HTMLアクセシビリティの学習ガイドを見る</a>

ブラウザ表示

6. 表は見出しセルを使ってわかりやすくする

表を作るときは、thタグを使って列や行の見出しを設定しましょう。データの意味が明確になり、スクリーンリーダーでも読みやすくなります。


<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>100円</td>
      <td>50個</td>
    </tr>
  </tbody>
</table>

ブラウザ表示

7. 適切なHTML構造でコンテンツを整理する

セクションごとに

タグや

タグを使ってコンテンツを整理すると、スクリーンリーダーや検索エンジンがページ内容を理解しやすくなります。見出しや段落を組み合わせて論理的な構造にすることが重要です。


<section>
  <h2>ニュース記事の見出し</h2>
  <p>この記事ではアクセシブルWebデザインの基本を紹介します。</p>
</section>
<article>
  <h2>記事の内容</h2>
  <p>HTMLタグの使い方や注意点を具体例で解説しています。</p>
</article>

ブラウザ表示

8. キーボード操作でも使いやすくする

マウスを使えない人でもページが操作できるように、リンクやボタン、フォームはキーボードだけで操作できるようにします。タブキーで移動できるか、Enterキーで実行できるか確認しましょう。


<button type="button" onclick="alert('ボタンが押されました')">実行</button>

ブラウザ表示

9. ARIA属性でさらにアクセシビリティを補助する

ARIA（Accessible Rich Internet Applications）属性を使うと、画面上の要素に意味や状態を付与できます。特にカスタムコンポーネントや動的に変わる要素で役立ちます。例えばaria-labelでボタンの意味を説明できます。


<button aria-label="メニューを開く">≡</button>

ブラウザ表示

まとめ

今回の記事では、HTMLでアクセシブルなWebページを作る基本原則を初心者向けに解説しました。アクセシビリティとは、視覚、聴覚、身体の制限がある人も含め、誰もが情報にアクセスできるWebサイトを作ることです。まず見出しタグを正しく使い、h1からh6までの階層構造でページの内容を整理することで、スクリーンリーダー利用者もコンテンツの流れを理解しやすくなります。次に画像には必ずalt属性を付け、画像の内容を文字情報として提供することで、視覚に制約のあるユーザーにも情報を届けられます。さらに、色だけで重要な情報を伝えず、テキストやアイコンを併用することが重要です。

フォームではタグを用いて入力欄の意味を明示し、スクリーンリーダーでの操作性を向上させます。リンクは内容が明確になるテキストを使用し、「ここをクリック」のような曖昧な表現を避けます。また、表ではタグで見出しセルを設定することで、データの意味が一目で分かるようになり、アクセシビリティが向上します。ページ全体の構造も、

や

タグを適切に使い、論理的な階層を作ることで、検索エンジンやスクリーンリーダーが内容を理解しやすくなります。

キーボード操作のサポートも欠かせません。リンクやボタン、フォームがタブキーだけで操作できるか、Enterキーで実行できるかを確認し、マウスを使えないユーザーにも配慮します。さらにARIA属性を活用すると、カスタムコンポーネントや動的要素の意味や状態を補足でき、アクセシビリティをさらに向上させることができます。これらの基本原則を理解し実践することで、誰もが使いやすいWebページをHTMLだけで構築可能です。

サンプルHTMLの振り返り

例えば、以下のように基本的な見出し構造や代替テキスト、フォームラベル、リンク、表を組み合わせることで、アクセシブルなページを作ることができます。


<h1>アクセシブルWebページのタイトル</h1>
<h2>セクション1: 見出しの使い方</h2>
<p>本文の内容を整理するために見出しを使用します。</p>

<img src="/img/sample150-100.jpg" alt="青空と草原の風景">

<form>
  <label for="username">ユーザー名</label>
  <input type="text" id="username" name="username">

  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email">
</form>

<a href="https://example.com/guide">HTMLアクセシビリティの学習ガイドを見る</a>

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>100円</td>
      <td>50個</td>
    </tr>
  </tbody>
</table>

<button type="button" aria-label="メニューを開く">≡</button>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「先生、今日の内容を振り返ると、どんなポイントが重要でしたか？」

先生

「大切なのは、見出しや代替テキスト、フォームラベル、リンクの文章、表の見出し、ページ構造、キーボード操作、ARIA属性など、HTMLでできるアクセシビリティの基本を網羅することです。」

生徒

「全部の要素を正しく使うだけで、視覚や聴覚に制限がある人も情報を取得できるんですね。」

先生

「そうです。アクセシブルなWebページは、誰にとっても使いやすいWebサイトを作ることにつながります。HTMLの基本を理解して、見出しやラベル、代替テキストを意識するだけでも大きく改善できます。」

生徒

「色だけで情報を伝えないことや、リンクは内容がわかる文章にすることも、すぐ実践できそうです。」