WAI-ARIAとはなにか

「Web Accessibility Initiative - Accessible Rich Internet Applications」 の略で、 「ウェイ・アリア」 と読みます。
WAI-ARIAをつかえば、HTMLだけでは不足している セマンティクス（意味） を属性で補完することができ、 支援技術（スクリーンリーダーなど）を通じて、障害をもつ人に対し適切な情報を伝えられる ようになります。

WAI-ARIAの注意点

あくまでも 「必要な場合のみ使用する」 技術です。
HTML5タグのセマンティクスで解決できるのであれば、 HTMLで対応するのが基本 です。

WAI-ARIAのつかいかた

決められた 「属性」 をHTMLタグに追記して使用します。
以下、すぐにでも導入が可能で効果が期待できそうな項目を挙げてみました。
（その他、詳細については参考サイトをご覧ください。）

ランドマーク

role="**"

要素の 「役割」 を定義します。
たとえば 「フレームワークの仕様でdivタグしか使えない」 といったような、適切なHTMLが使用できないときにも有効です。
まずは大きなレイアウト要素から使い始めてみるのがわかりやすいかもしれません。
設定するとスクリーンリーダーで 「ナビゲーションランドマークサンプル」 と読み上げられます（※<nav>サンプル</nav>でも同様の音声になります）。

index.html

<!-- 例 -->
<div role="navigation">サンプル</div>

キーボードのアクセシビリティ

tabindex="**"

tabindex属性を使えば、aタグやbuttonタグなどのような キーボード操作（タブキーによるフォーカス移動など） を可能にします。
属性値に0を指定すると、文書のソース内の順序でフォーカスを持たせることができます。

index.html

<div class="btn" tabindex="0">ボタン</div>

文字列の定義

aria-label="**"

要素に 「ラベル付けする文字列」 を定義できます。
インラインSVGにはalt属性がないのでaltの代わりとして利用できます。

index.html

<button aria-label="閉じる" class="js_btn">X</button>
<svg role="img" aria-label="画像の説明">...</svg>

UIコントロール

aria-expanded="**"
aria-controls="**"
aria-hidden="**"
aria-selected="**"
aria-checked="**"
など

クリックやマウスオーバーで開閉するようなUI操作時に使用します。
JavaScript によりユーザー操作にあわせてaria属性値を適宜変更します。
「CSSと密結合」 させることにより、挙動や状態が理解しやすいコードになります。

index.html

<!-- 閉じた状態 -->
<button aria-expanded="false" aria-controls="drawer">ボタン</button>
<div id="drawer" aria-hidden="true" class="drawer">ドロワー</div>

index.html

<!-- 開いた状態 -->
<button aria-expanded="true" aria-controls="drawer">ボタン</button>
<div id="drawer" aria-hidden="false" class="drawer">ドロワー</div>

style.css

.drawer[aria-hidden="true"] {
  display: none;
}

実装効率化の一例

jQueryのtoggleClassのようなメソッドを用意しておくと、コードが簡略化しWAI-ARIAによる実装コストが下がります。

See the Pen jQuery Plugin to toggle WAI-ARIA . by p_toro (@p_toro) on CodePen.

WAI-ARIAのまとめ

支援技術（スクリーンリーダーなど）を通じて、障害をもつ人に対し適切な情報を伝えられる。
必要な場合のみ使用する。基本的にはHTML5のタグで対応。HTMLで対応するのが基本。
つかいどころを理解し効率よく利用することで、それほど作業工数を上げることなく導入が可能。

それでは、WAI-ARIAを活用した良いアクセシビリティライフを！