アクセシビリティ向上のためのCSSテクニック集
prefers-reduced-motion から :focus-visible まで
Webサイトを作るとき、美しいデザインやアニメーションはユーザー体験を豊かにしてくれます。
しかし同時に、すべてのユーザーが安心して情報にアクセスできるようにする
― つまり「アクセシビリティ」にも気を配る必要があります。
この記事では、CSSだけで実践できるアクセシビリティ向上のためのテクニックを、「視覚的配慮」「操作性向上」「動きの抑制」の3つの観点からご紹介します。
1. 動きを抑制する prefers-reduced-motion
問題点： 動きの激しいアニメーションやパララックス効果は、一部のユーザーにめまいや不快感を与える可能性があります。
解決策： メディアクエリ prefers-reduced-motion を使うことで、アニメーションを簡易化または無効化できます。
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
2. 見失わないフォーカススタイル：:focus-visible
問題点： :focusだけにスタイルを付けると、マウスクリック時にもフォーカスリングが表示されてしまうことがあります。
解決策： :focus-visible は、キーボード操作時のみにフォーカスリングを表示します。
button:focus-visible,
a:focus-visible {
outline: 2px solid #005fcc;
outline-offset: 2px;
}
3. 十分なコントラストで可読性UP
問題点： テキストと背景のコントラストが不十分だと、視力が弱い方や屋外でスマホを見る人にとって読みにくくなります。
解決策： WCAGではテキストのコントラスト比を4.5:1以上とすることを推奨しています。
body {
color: #222;
background-color: #fff;
}
4. スクリーンリーダー非表示にするには aria-hidden や .sr-only
読ませたいけど表示したくない
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
<h1><span class="sr-only">ようこそ、</span>jnppsへ</h1>
読ませたくない
<div aria-hidden="true">装飾用のテキスト</div>
5. フォーム要素のラベルはしっかり明示的に
見た目はプレースホルダでも、ラベルは必須です。
<label for="email">メールアドレス</label>
<input id="email" type="email" placeholder="example@example.com" />
6. レスポンシブで読みやすいフォントサイズと余白
拡大表示に対応できるよう、rem単位で設計します。
html {
font-size: 100%;
}
p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
7. カーソルに対するヒット領域の確保
リンクやボタンは44px × 44px以上を目安に。
button {
padding: 12px 16px;
min-width: 44px;
min-height: 44px;
}
まとめ：アクセシブルなCSSは「やさしいWeb」をつくる第一歩
アクセシビリティというと難しそうに感じるかもしれませんが、CSSだけでも配慮できるポイントはたくさんあります。
小さな工夫の積み重ねが、より多くのユーザーにやさしいWeb体験を届けます。
- prefers-reduced-motion でアニメーションの配慮
- :focus-visible で操作しやすさ向上
- コントラストやフォントサイズで可読性アップ
- .sr-only や aria-hidden で視覚と意味を分ける
- フォームのラベルやタップ領域の最適化