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を考えたくて、なんとかブログにしてみました。
短い内容ですが、自分の中で消化できそうに思えたので良かったです。
コメント