概要
現代の多くのウェブサイトのボタンは、目に見えるテキストなしでアイコンのみを使用します — 検索用の虫眼鏡、メニュー用のハンバーガーアイコン、ポップアップを閉じるためのXなどです。晴眼の訪問者はこれらのアイコンを馴染みとコンテキストからすぐに認識しますが、ボタンにaria-label属性(例:aria-label="検索")を通じて舞台裏にアクセシブルなテキストが付いていない限り、スクリーンリーダーには読み上げるものが何もありません。これは視覚的には表示されませんが、スクリーンリーダーには読み上げられます。
それがないと、スクリーンリーダーは単に一般的な「ボタン」という単語をそれ以上の情報なしで読み上げ、実際に押すと何が起こるかについての手がかりをまったく与えません。
重要な理由
晴眼の人には視覚的に明らかなアイコンも、それを見ることができない人にはそれ自体は何の情報も伝えません — アイコン自体は視覚なしでは本質的に意味を持たず、それが表す概念だけが意味を持ち、スクリーンリーダー利用者にはその概念を何か別の方法で伝える必要があります。アイコンのみのボタンでいっぱいのページは、それぞれが単に「ボタン、ボタン、ボタン」としか読み上げられず、スクリーンリーダー利用者には、推測して押してみる以外にそれぞれが何をするか知る方法がありません。
これは広範囲かつ見逃しやすい問題です。まさに、アイコンのみのボタンが一般的で視覚的にすっきりしたデザインパターンだからです — アクセシビリティのギャップは、ページを見るだけでなく、実際にスクリーンリーダーでテストして初めて明らかになります。
修正方法
- サイト上で、目に見えるテキストラベルなしでアイコンのみを使用しているすべてのボタンを特定しましょう。
- ボタンのアクションを数語で説明する
aria-label属性を追加しましょう。例:aria-label="メニューを閉じる"やaria-label="検索"。 - 可能な場合は、代わりにアイコンの横に短い目に見えるテキストラベルを追加することを検討しましょう — これは晴眼の訪問者にも役立ち、アイコンの意味を覚えることへの依存を減らします。
- ウェブサイトビルダーを使用している場合、プラットフォームによって生成されたアイコンボタンがデフォルトですでにアクセシブルなラベルを含んでいるかを確認しましょう — 含んでいるものもあれば、「アクセシブルな名前」や「スクリーンリーダーテキスト」フィールドを手動で入力する必要があるものもあります。
- 無料のスクリーンリーダー(NVDA、VoiceOver)で各アイコンボタンにタブ移動し、単に「ボタン」ではなく、明確で具体的なアクションを読み上げることを確認してテストしましょう。