WAI-ARIAはコンテンツの役割や状態などの情報を正確に伝える

WAI-ARIAは「Web Accesibility Initiative-Accessible Rich Internet Applications」の頭文字をとった略。

読み方はワイ・アリアかな？ネットでウェイ・アリアと書いている人もいました。

WAI-ARIAは何かというと、HTMLやSVGで利用できるようになった追加の仕様で、アクセシビリティの確保を目的としたもの。

要するに、インターネットアプリケーションのリッチなコンテンツをより利用しやすくなるように、ユーザーや検索エンジンなどに正確な情報を伝えるために実装するものです。

WAI-ARIAの使い方

具体的には、WAI-ARIAを使うことで、Webコンテンツの役割・状態・特性（性質）をブラウザなどのソフトウェアあるいはハードウェアに伝えることができます。

WAI-ARIAの使い方ですが、HTMLのタグなどに対して属性と値を指定します。class名とかid名をつけるときと同じような感じですね。

上記はほんの一例ですが、WAI-ARIAのrole属性というものを使っていて、その値としてmainを指定しています。

role属性は要素の役割を伝えるときに用いられるもので、上記のdivはmainとしての役割があることを表しています。

WAI-ARIAには、今紹介したrole属性ともうひとつ、aria属性があります。

role属性はコンテンツの役割を表します。

role属性ではmainやnavigationなどを指定することができます。（指定できる値は他にももっとたくさんあります。）

HTML5においては、<main>や<nav>などの役割を持ったタグがありますが、制作の都合上<main>や<nav>を使えない場合、WAI-ARIAのrole属性で本来意味を持たないような要素、例えばdivに対してもmainやnavigationなどの役割を持たせることができるんです。

role属性で役割を指定しておけば、ブラウザによる音声読み上げなどで、role属性で指定した内容が読み上げられます。

もうひとつのaria属性は、コンテンツの状態・特性（性質）を表す属性。

状態を表すaria属性の多くは、値としてtrueかfalseを指定します。

例えば以下のように使います。

また、特性を表すaria属性では、数値・文字列・参照ID・真偽値など、様々な値を指定します。

例えばこのようなものです。もちろん指定できる値は属性によって違います。

WAI-ARIAのrole属性・aria属性には、多くの属性があるので、別の機会に属性一覧とそれぞれの内容についてご紹介したいと思います。

WAI-ARIAは複雑な構造のなかにおけるそれぞれの要素の役割や状態というものを、しっかりと正確な情報として伝えるために必要です。

情報アクセシビリティに関する話題が取り上げられることも増えてきたように思えますし、Webデザイナーやエンジニアにとってアクセシビリティの技術は大切だなと感じています。