ツールチップのアクセシビリティの間違いを修正する

ツールチップのアクセシビリティの間違いを修正する 2026年7月28日投稿 アクセシビリティのエラーを犯してしまいました。私の間違いから学んでほしいと思います。 最近、Firefoxで利用可能になったWebプラットフォームの機能や、その他のWeb標準・開発に関する短い動画を作成しています。もしこの記事の3分間の動画バージョンをご覧になりたい場合は、お使いのプラットフォームを選んで、興味があればアカウントをフォローしてください：Instagram TikTok YouTube Mastodon LinkedIn アカウントはBlueskyにもありますが、動画のアップロードはしばらく前から壊れています。 それ以外の場合は、こちらがテキストバージョンです… 私がやったこと 次のようなツールチップを作成したときに、アクセシビリティのエラーを犯しました。 これは、`popover="hint"`に関する動画の一部で、視覚的なユーザーのためにツールチップを表示する方法もカバーしています。 ああ、この動画へのリンクもここにあります：Instagram TikTok YouTube Mastodon LinkedIn 正しくやろうとしました！アクセシビリティに詳しい友人に相談したところ、彼らはScott O'Hara氏のデモを教えてくれました。Scott氏は物事を知っているので、彼のデモのパターンをコピーできると思いました。 Scott氏のデモはヒントポップオーバーよりも前に作られたものなので、彼の例のモダン化されたバージョンを以下に示します。 <button aria-describedby="edit-tooltip">Edit</button> <div id="edit-tooltip" popover="hint">Modify account settings.</div> ボタンは`aria-describedby`でツールチップに接続されているため、スクリーンリーダーは通常、ボタンにフォーカスがあるときにツールチップを読み上げます。`aria-describedby`の良い点の一つは、それが指している要素が隠れていても機能することです。この場合もそうです。 そこで、ツールバーのデモのためにScott氏のコードを適応させました。 <button aria-label="Bold" aria-describedby="bold-tooltip"> <svg>(bold icon)</svg> </button> <div id="bold-tooltip" popover="hint">Bold (⌘B)</div> これはScott氏の例と非常に似たパターンですが、ボタンには`aria-label`が付いています。なぜなら、ボタンにはテキストではなくSVGアイコンが含まれているからです。Scott氏と同様に、ボタンとツールチップを関連付けるために`aria-describedby`をボタンに追加しました。 VoiceOverでテストしたところ、「Bold. Bold. Command B. Button.」と表示されました。これはあまり正しくないと思いました――「Bold」と二度言う必要はありません。これは、Scott氏の例とは異なり、ツールチップに単に追加情報が含まれているのではなく、私のツールチップにはラベルも含まれているため発生していました。「Bold」は、二度存在するため、二度言われました。 そこで`aria-label`を削除しました… <button aria-describedby="bold-tooltip"> <svg>(bold icon)</svg> </button> <div id="bold-tooltip" popover="hint">Bold (⌘B)</div> …するとVoiceOverは「Clickable image. Bold. Command B. Button.」と表示されるようになりました。これで十分だと思いました！動画の公開ボタンを押し、パブに行きました。 どこで間違えたか アクセシビリティエージェンシーTetraLogicalのLéonie Watson氏とGez Lemon氏から、非常に丁寧に「あなたは愚かなことをした」というメッセージを受け取りました。Scott氏のパターンは正しかったのですが、`aria-label`を削除したときに私は道を外れてしまいました。なぜなら、今やボタンにはアクセシブルネームがなくなってしまったからです。`aria-describedby`は追加情報を提供しますが、アクセシブルネームの代わりにはなりません。 実際、Windows上のJAWSは近くの要素からアクセシブルテキストを取得しようとし、ツールチップ要素がDOMの兄弟であったため、最終的にboldボタンをboldとitalicの両方としてアナウンスしました。 VoiceOverが「clickable image」と言ったとき、それは少しヒントでした――これはVoiceOverがアナウンスするアクセシブルネームを持っていないことを示していました。その時は気づきませんでした。 修正方法 Léonie氏とGez氏は、修正方法を教えてくれました。`aria-describedby`から`aria-labelledby`に変更しました。 <button aria-labelledby="bold-tooltip"> <svg>(bold icon)</svg> </button> <div id="bold-tooltip" popover="hint">Bold (⌘B)</div> `aria-labelledby`は`aria-describedby`のように機能しますが、追加の説明ではなく、アクセシブルネームを提供します。これでボタンはツールチップからアクセシブルネームを取得し、VoiceOverは「Bold. Command B. Button.」と表示します――完璧です！ もし望むなら、これを分割することもできます。アクセシブルネームは単に「Bold」で、追加の説明は「Command B」になります。 <button aria-labelledby="bold-label" aria-describedby="bold-description"> <svg>(bold icon)</svg> </button> <div id="bold-tooltip" popover="hint"> <span id="bold-label">Bold</span> <span id="bold-description">(⌘B)</span> </div> このケースでは、これはやりすぎだと思いますが、ツールチップに長い説明がある場合には意味があるかもしれません。 というわけで、これで終わりです！常にインタラクティブな要素にアクセシブルネームがあることを確認してください。そして、可能であれば複数のスクリーンリーダーでテストしてください。一つのスクリーンリーダーでテストすることは、一つのブラウザでテストすることに似ています――必ずしも全体像を把握できるわけではありません。 以下は修正されたデモですが、Popover="hint"をまだサポートしていないSafariでは、あまり正しく動作しません。 このページをGitHubで表示 コメントはDisqusによって提供されています こんにちは、私はジェイクです。猫ではない方が私です。私はある種の開発者で、Firefoxで働いています。 リンク ポッドキャスト Mastodon Bluesky Threads Muskhole Github RSS コンタクト 私にメールを送ってください。ただし、あなたが採用担当者、またはこのサイトの「スポンサー付きコンテンツ」を提供しようとしている人でない限り、その場合は紙にリクエストを書いて、窓の外に投げ捨ててください。