テストページに関する注意
このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。
これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。
このページは Accessibility Visualizer 拡張機能と併用することで、開発者がアクセシビリティの問題を発見・理解するのを支援する目的で作られています。
リスト
リストは関連する項目をグループ化します。支援技術が構造や項目数を伝えられるよう、適切なHTML要素を使用する必要があります。
順不同リスト
正しい <ul> と <li>
✅ 標準的な順不同リスト。スクリーンリーダーはリストと項目数を読み上げます。
- Apple
- Banana
- Cherry
<ul> 内の <li> を <div> で囲んだ構造
❌ ul の直下に div があり、その中に li がある構造。div は ul の直接の子要素として無効で、リストの意味が壊れます。
- Apple
- Banana
- Cherry
順序付きリスト
正しい <ol> と <li>
✅ 標準的な順序付きリスト。スクリーンリーダーはリスト、項目数、各項目の順序を読み上げます。
- First step
- Second step
- Third step
定義リスト
正しい <dl> と <dt> / <dd>
✅ 標準的な定義リスト。dt（用語）と dd（説明）で構成されます。
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
<dd> が連続する <dl>
✅ 1つの用語に対して複数の説明がある定義リスト。これは有効な構造です。
- Color
- Red
- Blue
- Green
<div> でグルーピングされた <dl>
✅ div 要素で dt/dd のペアをグループ化した定義リスト。HTML仕様で許可されています。
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
<dl> 直下に無効な <span> がある
❌ dl の直接の子要素に span が含まれています。dl の子要素として有効なのは dt、dd、div のみです。
- Term
- Description Invalid child element
<dt>/<dd> が <dl> の外にある
❌ 定義リストの項目（dt/dd）が dl 要素の外に配置されています。意味的な関連が失われます。
メニュー
正しい <menu> と <li>
✅ menu 要素と li 子要素による構成。menu 要素は意味的に ul と同等です。
ARIA リストロール
role="list" と role="listitem"
✅ ARIA ロールを使用したカスタムリスト構造。コンテナに role="list"、項目に role="listitem" を指定しています。
role="listitem" が role="list" の外にある
❌ role="listitem" を持つ要素が role="list" を持つ要素の中にありません。listitem ロールにはリストコンテキストが必要です。