Accessibility Support (a11ysupport.io)

ウェブアクセシビリティが担保されるためには、ウェブコンテンツが適切な実装手法や技術によって制作されているだけでなく、同時に、支援技術 (スクリーンリーダーなど) やブラウザが、そうした実装手法や技術をサポートしていることが不可欠です。WCAG (Web Content Accessibility Guidelines) では、これを「アクセシビリティ サポーテッド (accessibility supported)」であるといいます。

この「アクセシビリティ サポーテッド」に関する情報を入手できる便利なサイトがあります。「Accessibility Support (a11ysupport.io)」です。

Accessibility Support (a11ysupport.io)
Accessibility Support (a11ysupport.io) の画面

W3C の ARIA and Assistive Technology Community Group で共同議長を務める Michael Fairchild 氏が立ち上げたオープンソースのプロジェクトで、各種スクリーンリーダー (JAWS、Narrator、NVDA、TalkBack、VoiceOver など) が、様々な HTML 要素や WAI-ARIA 属性に対して、それぞれどの程度対応しているかについて、テストした結果が開示されています。(要素や属性の種類によっては、音声コントロールの対応状況についても示されています。)

たとえば、以下のように読み取ることができます。(ほんの一例です。いずれも、本記事の執筆時点での対応状況です。)

aria-describedby 属性 : Narrator 以外の主要なスクリーンリーダーで、紐付いているディスクリプションを読み上げてくれる。ただし、紐付いているディスクリプションの要素が role="alert" 属性を併せ持つ場合、NVDA および VoiceOver (iOS、macOS ともに) では正しく読み上げられない。
aria-describedby 属性に関するテスト結果画面
見出し要素 (h1 〜 h6) : 基本的にどのスクリーンリーダーも、見出しである旨とそのレベルを読み上げてくれる。ただし、<details> の <summary> 要素内に見出し要素がある場合、読み上げないスクリーンリーダーがある (JAWS と Chrome または Firefox の組み合わせ、Orca、TalkBack、macOS VoiceOver など)。
見出しに関するテスト結果画面
required 属性 : Orca と TalkBack では、フィールドが入力必須項目である旨、読み上げられない。
required 属性に関するテスト結果画面

これ以外にも数多くの HTML 要素や WAI-ARIA 属性について、支援技術の対応状況を見ることができます。ボランタリーな運営ゆえ、まだデータがないものも少なくありませんが、とても有益な情報を提供してくれるサイトなので、今後の継続的なアップデートに期待したいところです。GitHub でコントリビュートできるので、興味のある方は参加するのもよいかと思います。

関連記事