見た目だけじゃない。
CSSで実現するアクセシビリティ対応の基本

アクセシビリティとは「すべての人がWebサイトの情報にアクセスできること」。視覚障害のある方、キーボードだけで操作する方、動きに酔いやすい方——さまざまなユーザーに配慮することは、品質の高いWeb制作の基本です。
本記事では、CSSで対応できるアクセシビリティの4つの基本テクニックを紹介します。

1. フォーカスリングを消さない

Tabキーで操作するユーザーにとって、フォーカスリング（青い枠線）は「今どこにいるか」を知る唯一の手がかりです。下のボタンをTabキーで選択してみてください。

/* ❌ やってはいけない */
*:focus { outline: none; }

/* ✅ キーボード操作時のみ表示 */
:focus-visible {
    outline: 3px solid #E31010;
    outline-offset: 3px;
}

/* マウスクリック時はリングを非表示 */
:focus:not(:focus-visible) {
    outline: none;
}

2. prefers-reduced-motion の対応

アニメーションで酔いやすい方は、OS設定で「動きを減らす」をONにしています。この設定をCSSで検知し、アニメーションを無効化しましょう。

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

3. コントラスト比を確保する

WCAGガイドラインでは、テキストと背景のコントラスト比が 4.5:1 以上（大きなテキストは3:1以上）であることを求めています。

4. スクリーンリーダー専用テキスト

アイコンだけのボタンなど、視覚的には意味が伝わるが音声では伝わらない要素に、スクリーンリーダー向けのテキストを追加する定番テクニックです。

/* 視覚的に隠すが、スクリーンリーダーには読まれる */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* 使用例 */
/* <button>
    <svg>...</svg>
    <span class="sr-only">メニューを開く</span>
</button> */

まとめ

• :focus-visible → キーボードユーザーのためのフォーカスリング
• prefers-reduced-motion → アニメーション酔い対策
• コントラスト比 4.5:1 → 読みやすさの確保
• .sr-only → スクリーンリーダー向けテキスト

アクセシビリティは「追加コスト」ではなく「品質基準」です。最初から組み込むことで、すべてのユーザーにとって使いやすいサイトが完成します。