WAI-ARIAとは

WAI-ARIAとは、Web Accessibility Initiative と Accessible Rich Internet Applicationsの頭文字であり、HTMLやSVGで利用できるアクセシビリティ確保のための属性の仕様です。

支援技術が障害を持つ人に対して適切に情報を伝えられるように、ウェブコンテンツのセマンティック情報を定義するためのものであり、ウェブコンテンツやウェブアプリケーションのアクセシビリティと相互的に運用することができる。

・role属性

role属性はコンテンツの役割を明示することができる属性です。

HTMLやSVGのマークアップだけでは役割を明示するのには限界があり、role属性はそれを補うことができます。 あらゆる要素に付与することができるのも便利な点です。

alert

alertは、「警告」などの意味でユーザーに何かメッセージを伝えたい要素に付与します。

status

statusは、alertと同様にユーザーに対するメッセージを表します。alertよりも控えめな役割を表す場合に適しています。

dialog, alertdialog

dialogは、処理を一時的に中断してユーザーに入力や応答を求めるためのものを表す要素に付与します。 alertdialogは、dialogとしての意味を持ちながら、ユーザーに対して警告を与えるalertとしての意味ももつ場合に使われます。

navigation

navigationは、ナビ要素に付与します。

search

searchは、検索フォームになどの要素に付与します。

main

mainコンテンツの要素に付与します。

complementary

asideなどのようなmainと分離する要素に付与します。

contentinfo

copyrightなどを含む要素(主にフッターなど)に付与します。

・aria属性

aria属性は要素の性質や状態を明示することができる属性で、role属性における役割にさらに詳細な情報を与えることができます。

aria属性は、メニューが開いているのか、閉じているのか、などのような動的コンテンツにおいて重要な働きをします。

状態を明示するためのarea属性の多くは、trueまたは、falseの属性値を指定します。

性質を明示するためのaria属性は、属性値にIDや数値または真偽値を指定します。

対応ブラウザ

Firefox

3.0 以降

Chrome

Safari

4 以降

Opera

9.5 以降

Internet Explorer

8 以降

取り入れるべきか

付与できる要素すべてに取り入れればいいという訳ではありません。 情報が多くなりすぎてしまうことで逆に複雑になってしまうこともあるので、セマンティック要素で賄える部分は要素を正しく使い、 WAI-ARIAはアクセシビリティなコーディングをするための補助的な存在として活用するのが良いでしょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です