WAI-ARIAを使ってWEBページをアクセシブルにする方法
目次
はじめに
WAI-ARIA(Web Accessibility Initiative Accessible Rich Internet Applications )は Web ページのアクセシビリティを向上させるための技術です。
W3C によって専用の HTML 属性が定義されています。
近年は Javascript を使用した動的なページが主流です。
そのおかげでページ遷移を伴わないスムーズな移動やフォーム送信などが可能になりました。
現状の問題
しかしその一方でスクリーンリーダーを使用しているユーザーやマウスを使えないユーザーにとっては情報の取得が困難になってしまいました。
動的に変化する WEB ページや色で表現された状態はスクリーンリーダーで読み取れないため目の不自由なユーザーは現在の画面がどうなっているかを正確に把握できません。
例えば Javascript で切り替え可能なタブがあったとします。現在選択されているタブは CSS で強調表示される想定です。
以下は切り替え可能なタブの例です。
ほとんどのユーザーは現在選択されているタブを目視できますが、スクリーンリーダーを利用するユーザーは現在どのタブが選択されているか分かりません。
それどころか場合によってはそれが切り替え可能なタブであることすら伝わらないのです。
WAI-ARIA を使うメリット
WAI-ARIA で定義されている追加の HTML 属性を使用するとスクリーンリーダーの利用者にとって読みやすい Web ページになります。
先程の例のタブの場合は以下のように role 属性を追加することでスクリーンリーダーに対して「この要素はタブですよ」と伝えています。
また、現在選択されているタブに対して aria-selected 属性を付与しています。Javascript を使用してこの値を切り替えることでスクリーンリーダーに対して現在選択されているタブを即時に伝えることが可能です。
実際にスクリーンリーダーで読み上げてみると、要素がタブである旨と現在選択されているタブが読み上げられることを確認できます。
これらの属性は画面上の見た目には影響しませんが WEB ページやアプリケーションのアクセシビリティを格段に高めることができます。
Web 開発者の方は WAI-ARIA を取り入れることでより多くのユーザーにプロダクトを使って頂けるようになります。
おわりに
WAI-ARIA 属性は他にも多数用意されているのでご自身のプロダクトや機能に合わせて組み込むことができます。
とにかく数が多いので今後はユースケース毎に紹介していく予定です。