WAI-ARIA(ウェイ-アリア)とは

WAI-ARIA(ウェイ-アリア)とは、Web Accessibility Initiative(WAI) – Accessible Rich Internet Applications(ARIA)です。

その内容を簡単に解釈すると、動きなどのあるWebサイトでは、スクリーンリーダー(音声読み上げ)が機能しにくいので、情報を追加して精度をあげましょう、という感じでしょうか。

簡単だが難しい…

HTMLのタグにrole=”xxxx”aria-xxxx=”xxxx”を追加するだけなので、作業は難しくありません。
しかし、role属性だけで80くらいあり、何をどう追加するか悩みます。

悩まないための指針

一から勉強して、完璧なWAI-ARIAを追加できれば最高ですが、現状そこまでクライアントに求められていないので、とりあえずの対応を考えてみます。

HTML5のタグを使用する

HTML5では同じroleがあるので、それを利用します。
スクリーンリーダーの対応によるようですが、タグと重複してroleをつける必要はありません。

切り替わる箇所を意識する

JavaScriptで表示を切り替える箇所はWAI-ARIAを意識します。

有名なライブラリなどを参考にする

よくあるダイアログやタブなどは、有名なJavaScriptのライブラリ(Bootstrap や jQuery UI など)からマークアップを参考にします。

ライブラリを使用する

ライブラリを使用できるのであれば、マークアップの心配もありません。

実際にスクリーンリーダーを使用する

MacならVoiceOver、Windows 10ならナレーターというスクリーンリーダー搭載されているので、試してみましょう。
MacのVoiceOverは、比較的性能が良いようです。

まとめ

もっとライトにWAI-ARIAを考えたくて、なんとかブログにしてみました。
短い内容ですが、自分の中で消化できそうに思えたので良かったです。