テストページに関する注意
このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。
これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。
このページは Accessibility Visualizer 拡張機能と併用することで、開発者がアクセシビリティの問題を発見・理解するのを支援する目的で作られています。
ボタン
ボタンは操作を実行するためのインタラクティブ要素です。ボタンを押したら何が起きるのかという目的を、アクセシブルネームとして支援技術に伝えられなければなりません。キーボードによる操作への対応も必須です。以下は様々な実装例と、よくある問題点を示します。
<button> 要素
標準的な button 要素
✅ もっともアクセシブルな方法です。セマンティックな HTML の button はデフォルトでキーボード操作でき、支援技術にも適切に伝わります。
aria-hidden="true" を付けたボタン
❌ aria-hidden 属性によって支援技術はこのボタンを無視します。ところが視覚的には表示され、キーボードでも操作できます。支援技術のユーザーは操作方法によって見つけられないことがあります。
画像（alt あり）を含むボタン
✅ 適切な alt を持つ画像を含むボタンです。alt がそのままボタンのアクセシブルネームになります。
画像（alt なし）を含むボタン
❌ 画像に alt が無いため、このボタンの目的が支援技術に伝わりません。
Button ロール
div に role="button" と tabindex
⚠️ div 要素に role="button' と tabindex="0" を付与し、JavaScript でクリックイベントに加えてキーイベントも処理したもの。複雑な実装になってしまうため、 button 要素を使用するべきです。
role のない div ボタン
❌ role='button' が無いため、支援技術はインタラクティブ要素として認識できません。
tabindex のない div ボタン
❌ キーボードフォーカスを受けられないため、キーボード利用者は操作できません。
input 要素
input type="button"
✅ type='button' の input。value 属性に指定した値が表示され、アクセシブルネームとなります。
input type="button"（value 無し）
❌ value が無いため、アクセシブルネームがありません。何をするボタンか伝わりません。
input type="submit"
✅ フォーム送信用のボタン。value 属性に指定した値が表示され、アクセシブルネームとなります。
input type="submit"（value 無し）
明示的な value が無い例。「送信」や「Submit」などの規定の名前が付きますが、明示したほうが良いでしょう。
input type="reset"
✅ 入力内容をリセットするボタン。value 属性に指定した値が表示され、アクセシブルネームとなります。
input type="reset"（value 無し）
明示的な value が無い例。「リセット」や「Reset」などの規定の名前が付きますが、明示したほうが良いでしょう。
input type="image"（alt あり）
✅ type="image" の input 要素は画像ボタンになります。alt 属性に指定した値がアクセシブルネームとなります。
input type="image"
❌ alt のない画像ボタン。支援技術は何の目的のボタンなのかをユーザーに伝えられません。
summary 要素
summary 要素
✅ details と組み合わせて開閉 UI を作るための要素。セマンティックに正しく、アクセシブルです。
Click Me
Details content revealed when summary is clicked.
summary 要素のない details
summary 要素が無い場合、ブラウザは「詳細」のようなデフォルトのラベルを表示します。
Details content revealed when summary is clicked.
details 外の summary
❌ details の外で summary を使うのは正しくありません。
アクセシブルネームのない summary
❌ テキストやアクセシブルネームが無いため、何の操作か分かりません。
Details content that can't be properly accessed.