CSS アクセシビリティ

1. アクセシビリティとは？

アクセシビリティ（Accessibility）とは、障害を持つ人々を含め、すべての人がウェブサイト、ツール、およびテクノロジーを利用できるように設計・開発されていることを指します。

CSS は、ウェブサイトをよりアクセシブルにするための非常に重要な役割を担っています。適切なスタイルを適用することで、視覚、聴覚、身体、認知などの障害を持つユーザーにとっても使いやすいインターフェースを構築できます。

2. カラーコントラスト (Color Contrast)

テキストとその背景色の間には、十分なコントラスト（色の対比）が必要です。これにより、視力の低いユーザーや色覚異常を持つユーザーでも、テキストを容易に読み取ることができます。

WCAG (Web Content Accessibility Guidelines) では、通常のテキストに対して少なくとも 4.5:1、大きなテキストに対しては 3:1 のコントラスト比を維持することを推奨しています。

2.1 コントラスト比の例

/* 良い例：高いコントラスト比（黒地に白） */
.accessible-text {
  color: #ffffff;
  background-color: #000000;
}

/* 悪い例：低いコントラスト比（ライトグレーに白） */
.unaccessible-text {
  color: #ffffff;
  background-color: #cccccc;
}

3. フォーカスインジケータ (Focus Indicators)

多くのユーザー（特に身体的な障害を持つユーザー）は、マウスではなくキーボードを使用してウェブサイトをナビゲートします。

キーボードの Tab キー を押して要素（リンク、ボタン、フォーム入力など）を選択した際、どの要素が現在選択されているかを視覚的に示すのがフォーカスインジケータです。

3.1 outline プロパティの使用

ブラウザにはデフォルトのフォーカススタイルがありますが、デザインに合わせてカスタマイズすることも可能です。ただし、outline: none; や outline: 0; を指定してフォーカス表示を完全に消してしまうことは絶対に避けてください。

/* フォーカス時に目立つアウトラインを表示する */
a:focus, button:focus, input:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

4. コンテンツへのスキップ (Skip to Main Content)

スクリーンリーダーやキーボードのみを使用するユーザーにとって、ページ上部のナビゲーションメニューを毎回すべて通り抜けるのは非常に時間がかかります。

これを解決するために、「メインコンテンツへスキップ」するリンクを用意することが一般的です。このリンクは通常、視覚的には隠されていますが、フォーカスが当たったときだけ表示されるように設定します。

/* 通常は画面外に飛ばして隠しておく */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
}

/* フォーカスが当たったとき（Tabで移動したとき）だけ表示させる */
.skip-link:focus {
  top: 0;
}

5. 色だけで情報を伝えない (Color isn't Everything)

色だけに頼って情報を伝えてはいけません。例えば、リンクを「青いテキスト」にするだけでは、色覚異常のユーザーはそれがリンクであることに気づかない可能性があります。

5.1 視覚的な手がかりの追加

リンクには下線を引く、フォームのエラーにはアイコンを追加するなど、色以外の視覚的な手がかりを併用しましょう。

/* 色だけでなく下線も表示してリンクであることを示す */
a {
  color: blue;
  text-decoration: underline;
}

/* エラーメッセージにアイコンを追加する例 */
.error-message::before {
  content: "⚠️ ";
}

6. テキストサイズと相対単位

ユーザーがブラウザの設定でフォントサイズを大きく変更することがあります。これに対応するために、フォントサイズやレイアウトの指定には固定的な px ではなく、相対単位である em や rem を使用してください。

body {
  font-size: 16px; /* ベースサイズ */
}

h1 {
  font-size: 2rem; /* ブラウザ設定に応じてスケーリングされる */
}

p {
  line-height: 1.5; /* 行間も十分に確保して読みやすくする */
}

7. まとめ：CSS アクセシビリティのチェックリスト

アクセシビリティへの配慮は、単なる「善意」ではなく、モダンな Web 開発における「標準（スタンダード）」です。すべてのユーザーにとって使いやすいサイトを目指しましょう。