ブログ・LPで押さえるアクセシビリティ5つ｜HTML/CSSから始める

HTML&CSS

アクセシビリティの意味や考え方は、「アクセシビリティとは？Webサイトにおける意味と考え方」で整理しています。この記事では、ブログや LP でHTML と CSS をどう直すかに絞り、現場でよく効く項目を5つ紹介します。

完璧を目指すより、まずここから試すイメージです。

この記事でわかること

  • 画像の alt の付け分け（意味のある画像 / 装飾）
  • マウスだけに頼らない操作（キーボード・フォーカス）
  • 色だけで情報を伝えない書き方
  • 見出し（h2・h3）の順序の基本
  • 動きを減らす設定への配慮（prefers-reduced-motion の概要）

こんなときに読むと役立ちます

  • アクセシビリティの意味は分かったが、何を直せばいいか知りたい
  • WordPress の記事や LP を、自分で HTML/CSS をいじりながら作っている
  • 装飾は増やしたいが、読みにくさや操作しづらさは避けたい
  • CSS アニメを入れたあと、動きの配慮も確認したい

1. 画像に alt を付ける

alt は、画像の内容をテキストで伝える属性です。スクリーンリーダーや、画像が表示されないときの代替として使われます。

装飾だけの画像は alt=""（空）に、内容の伝わる画像は短い説明を書く、と覚えると迷いにくいです。

書き方の例

<!-- 記事の内容を伝える画像 -->
<img src="chart-2024.png" alt="2024年の月別アクセス数。8月が最も多い。">

<!-- 装飾・アイコン程度（意味は隣のテキストで足りる） -->
<img src="decoration-wave.svg" alt="">

「画像のファイル名をそのまま alt にする」「すべて alt を省略する」は、どちらも避けた方がよいことが多いです。

2. キーボードで操作できるようにする

マウスが使えない・使いにくい環境でも、Tab キーと Enter で操作できる必要があります。ホバーだけで反応する UI は、キーボードでは届かないことがあります。

  • クリックしたいものは <button> か <a href="..."> を使う（div にクリックだけ付けない）
  • フォーカスがどこにあるか分かるよう、:focus-visible で枠線や影を付ける

フォーカスが見える CSS の例

a:focus-visible,
button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 3px;
}

outline: none だけ指定して、代わりのフォーカス表示を付けない書き方は避けます。

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

「赤い文字＝エラー」「緑の丸＝完了」のように、色だけで状態を区別すると、色覚の違いやモノクロ表示で判別しづらくなります。

  • リンクは下線やアイコンなど、色以外の手がかりも付ける
  • エラーや成功は、短い文言（「入力が必要です」など）を併記する

本文のコントラスト（背景と文字の明るさの差）も、薄すぎるグレー文字は避けた方が読みやすいです。細かい数値の話は本記事では割愛し、薄い装飾色の上に薄い文字を載せないことをまず意識すれば十分なことが多いです。

4. 見出しを順番に使う

見出しは、ページの骨組みを伝える目印です。スクリーンリーダーは h2 → h3 の順で章立てを辿れるので、飛ばし階層（h2 の次に h4 など）は避けます。

  • WordPress（Cocoon など）では、投稿タイトルがページの h1 になることが多い → 本文は h2 から始める
  • 目次用に、h2 / h3 の階層を乱さない

「見た目だけ大きくしたい」から h タグを飾りに使うと、構造と見た目がずれます。装飾は CSS、意味づけは見出しタグ、と分けるとよいです。

5. 動きを減らす設定に配慮する

めまいのしやすさなどの理由で、OS の「アニメーションを減らす」設定をオンにしているユーザーがいます。ループや自動再生の animation があるときは、prefers-reduced-motion で止められるようにしておくとよいです。

具体的な書き方やコード例は、別記事「リッチなCSSアニメーション例5つ」のアクセシビリティの節でまとめています。動きの演出を入れる予定があるときにあわせて読むと、全体のバランスを取りやすいです。

公開前のチェックリスト

  1. 意味のある画像に alt があるか。装飾画像は alt="" か
  2. ボタン・リンクを Tab キーで辿れ、フォーカスが見えるか
  3. エラーや状態の区別が、色だけに頼っていないか
  4. 本文の見出しは h2 から始まり、階層が飛んでいないか
  5. ループアニメがあるなら、prefers-reduced-motion で止められるか

まとめ

  • アクセシビリティは、alt・キーボード・色・見出し・動きの5点から始められる
  • 完璧より、公開前チェックリストで一巡する習慣が効く
  • CSS アニメを使うときは、prefers-reduced-motion もセットで確認する

よければ、いま公開している記事や LP の1ページだけ、上のチェックリストに当てはめてみてください。直せるところが1つ見つかれば十分なスタートです。

タイトルとURLをコピーしました