JavaScript アクセシビリティ WAI-ARIA とは

WAI-ARIA とは？

WAI-ARIAは、
Accessible Rich Internet Applications の略語です。
翻訳すると、
アクセス可能なリッチインターネットアプリケーションという意味になります。

アクセシビリティには、
ウィジェット、構造、および動作に関するセマンティック情報が必要です。
WAI-ARIA は、
ブラウザーや支援技術が認識できるさらなる意味論的要素を追加することによって、
ユーザーの理解を助ける技術です。

WAI-ARIA は、
アクセス可能なユーザーインターフェイス要素を定義する役割、状態、
およびプロパティのオントロジーを提供します。

WAI-ARIA は、
見た目上は動作するものの、
スクリーンリーダーはそれらが何なのか全く理解できず、
ユーザーには意味を成さないごちゃごちゃの要素、
こういった状況に対応するため作られました。

WAI-ARIA には大量の機能があり、検討が必要なOS、ブラウザー、スクリーンリーダーの組み合わせが大量にあります。
現在、
全体のブラウザーの WAI-ARIA のサポート状況は 88% ぐらいです。
一般的なスクリーンリーダーの ARIA のサポート状況は徐々に同じ値になってきています。

WAI-ARIA の導入

WAI-ARIA は W3C によって定めらている仕様です。
W3C（World Wide Webコンソーシアム）は、
メンバー組織、常勤 スタッフ、および一般の人々が協力してWeb標準を開発する国際コミュニティです。

WAI-ARIA は、
アクセシビリティを向上させる、
HTML 属性の定義していますが、
定義は3つの機能に分かれます。
ロール（Role） — 要素が何か、もしくは何をするかを定義します。
プロパティ（Property） — 要素の性質を定義、追加の意図や意味論を与えるために使用することができます。
ステート（State） — 要素の現在の状態を定義する特別なプロパティです。

WAI-ARIA は、
スクリーンリーダーに提供される情報を除いて、
ウェブページに影響も与えないようになっています。 

以下は具体例です。



ロール（Role）の例、

role="navigation" 、：nav要素と同じです。
role="complementary"：aside要素と同じです。
role="banner" 、：bannerを定義します。
role="search" 、 ：searchを定義します。
role="tabgroup" 、 ：searchを定義します。
role="tab"など、：searchを定義します。



プロパティ（Property）の例、

aria-required="true"：フォーム入力が有効となるために値を入力しなければならないことを定義します。
aria-labelledby="label"：要素に ID を追加することで、どの要素からでもラベルとして参照することを可能にします。



ステート（State）の例、

aria-disabled="true" :フォーム入力がdisabled であることをスクリーンリーダーに伝えます。

WAI-ARIA が使われる4つの場面

WAI-ARIA は必要な場合のみ使用すべきですが、
アクセシビリティがネイテイブな対応だけでは、
以下のような困難な状況が生じることもあります。

１．道しるべ/ランドマーク:
HTML5 の意味論の範囲外となる道しるべを提供することができます。
２，動的なコンテンツの更新:
絶えず更新されるコンテンツには、aria-liveを提供します。
３，キーボードのアクセシビリティの向上: 
JavaScript を使ってインタラクションをさせる場合、tabindexを提供します。
４，意味論的ではないコントロールのアクセシビリティ:
ネストでアクセシビリティが困難なとき、aria-required や aria-posinsetを提供します。


今回は以上です。