aria-labelを使うな
アクセシビリティを学ぶ中で、「aria-labelを使うな（ariaを使わないのが一番いい）」を見かけた方も多いのではないでしょうか。
この記事では実際にいろんなパターンを用意したページで実際にスクリーンリーダーと音声コントロールを使用してみて、どういう実装にしたら一番いいのかを体験していきます。
いろんなパターンを用意したページ
https://shamokit.com/examples/a11y/aria-label
上記URLに以下の6パターンを用意しました。
- ボタンタグ内に「カウントアップする」というテキストを入れる
- ボタンタグ内に「カウントアップ」というテキストを入れ、aria-label属性で「カウントアップする」というテキストを指定する
- ボタンタグにtitle属性で「カウントアップする」というテキストを指定する
- ボタンタグにaria-label属性で「カウントアップする」というテキストを指定する
- ボタンタグの外に「カウントアップする」というテキストを用意し、aria-labelledby属性でそのテキストを参照する
- ボタンタグ内に「カウントアップする」というテキストをvisually-hiddenで入れる
スクリーンリーダー
まずはスクリーンリーダーで確認してみましょう。
Windowsを持っている人はNVDAで読み上げを確認してみてください。
この記事ではVoiceOverを使って確認していきます。
それぞれのボタンにキーボードでフォーカスすると、
全て「カウントアップする、ボタン」と読み上げれらました。
スクリーンリーダーだけでテストすると、特にアクセシビリティ上問題があるようには見えません。
しかし、スクリーンリーダーは指や手足など、体の一部が動かせなければ操作できません。
スクリーンリーダーでの操作に対応できていれば対応していないよりかはより広いユーザーに対してアクセシブルな実装になりますが、それでも全てのユーザーに対応できているわけではありません。
音声コントロール
次に音声コントロールで確認してみましょう。
こちらもMacにデフォルトで備わっている音声コントロール機能を使用して確認します。
システム設定→アクセシビリティ→音声コントロールをONにすると音声コントロールできるようになります。
音声コントロールを有効化した状態で、「カウントアップする クリック」と話すとページ内のボタン全てに番号が表示され、番号を読み上げるとそのボタンがクリックされカウントが一つ増えました。
「番号を表示」と読み上げるとボタンに番号が表示されるので、音声コントロールは一応問題なくできますね。
さて、パターン2個目の「プレーンテキストとaria-labelの内容が違う」ボタンには「カウントアップ」と表示されているので、音声コントロールを使用するユーザーは「カウントアップ クリック」と読むはずです。
では「カウントアップ クリック」と話してみましょう。
ボタンはクリックできましたか？ はい、できません。
aria-labelが「カウントアップする」で指定されており、ラベルが上書きされてしまっているからです。
このように、aria-labelを間違って使用してしまうと音声コントロールを使用するユーザーが混乱してしまいます。
スクリーンリーダーでのチェックばかりを気にして余計なaria-labelの付与をしてしまうとこういうことが起きてしまうということですね。
例えばテーブルの各行に同じテキスト「編集」が入ったボタンがあったとして、
このボタンはこの行の情報に関する編集ボタンだからaria-labelに「XXXを編集する」という対応をしてしまうと問題になるということです。
この辺はアクセシビリティを学びたての人はやってしまいがちなのではないでしょうか。
こういう場合はaria-describedbyを使用して、追加の情報を与えてあげるようにしましょう！
また、そもそも目に見えるテキストを置いておく（必要あればaria-describedbyやaria-labelledbyでそこに紐づける）のが一番アクセシビリティが高いです。
アイコンからボタンの動作を予測する必要もないですし、支援技術のサポートも特に問題なく受けることができます。
ということで、「aria(-label)を使うな」を体験する でした。
最後まで読んでいただきありがとうございました！