テストページに関する注意
このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。
これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。
このページは Accessibility Visualizer 拡張機能と併用することで、開発者がアクセシビリティの問題を発見・理解するのを支援する目的で作られています。
フォームコントロール
フォームコントロールは入力のためのインタラクティブ要素です。適切なラベル付けと、キーボード・支援技術への対応が必要です。以下は良い実装とよくある問題の両方を示します。
テキスト入力
ラベルのない input
❌ 支援技術は、フィールドの目的をフィールドから辿ってユーザーに提示することができません。
適切なラベル付き input
✅ for と id を用いて関連付けた例。ラベルと入力のプログラム上の関係を構築します。
label 内に含まれる input
✅ label 要素内に input を含める方法もあります。for/id の関連付けと同様に機能します。
select 要素
ラベルのない select
❌ このセレクトボックスの目的が分かりません。
適切なラベル付き select
✅ ラベルと関連付けられており、支援技術はセレクトボックスの目的と選択肢をユーザーに伝えられます。
textarea 要素
ラベルのない textarea
❌ 何を入力すべきか分かりません。
適切なラベル付き textarea
✅ 支援技術のユーザーに対しても、テキストエリアの目的を明確に伝えられます。
チェックボックス
ラベル付きのチェックボックス
✅ 各チェックボックスに明確な名前があり、支援技術もそれらを認識します。
ラベルのないチェックボックス
❌ 近くにテキストがあっても、プログラム上の関連付けがありません。スクリーンリーサーのユーザーは、どのチェックボックスが何を意味するのか分かりづらくなります。
display: none を使うカスタムチェックボックス
❌ display: none により、キーボードや支援技術から到達できません。
ラジオボタン
ラベル付きのラジオボタン
✅ 同一の name 属性をつけることで、ブラウザや支援技術が解釈できるかたちでラジオボタンをグループ化しています。それぞれの選択肢は label 要素により名前がつけられています。 fieldset 要素 と legend 要素で、グループ全体のラベルもつけられています。
ラベルのないラジオボタン
❌ 視覚的にテキストがあっても、プログラム上の関連付けが無くアクセシブルではありません。
name のないラジオボタン
❌ グループを形成できず、同時に複数選択できてしまいます。
異なる name を持つラジオボタン
❌ グループにならず、独立したボタンとして扱われます。
単体で置かれたラジオボタン
❌ 選択肢が1つだけのときは、ラジオボタンではなくチェックボックスを使うべきです。ユーザーはラジオボタンのチェック状態を解除できません。
ラベルの問題
孤立した label
⚠️ どのフォームコントロールにも関連付かず、意味がありません。
存在しない ID を参照する label
⚠️ 対応する入力が存在していません。指定する ID を間違えていませんか？
The input with id="non-existent-input" doesn't exist in the document.
入力の状態
必須の入力
✅ required 属性により必須であることを伝えます。視覚的な指標やエラーメッセージも併用しましょう。
読み取り専用の入力
ユーザーが変更できない入力。スクリーンリーダーは状態を読み上げます。固定情報の表示に有用です。
contenteditable 属性
role のない contenteditable
⚠️ 動作はしますが、スクリーンリーダーがテキスト入力として認識しない場合があります。
role='textbox'＋aria-labelledby の contenteditable
✅ textbox ロールとラベル関連付けにより、アクセシブルな編集領域になります。
ラベルのない contenteditable
❌ ラベルやアクセシブルネームがなく、用途が分かりません。