WAI-ARIAとは？Web開発における目的と使い方

WAI-ARIAとは、各種補助デバイスに向けた情報を、HTMLの属性値として付与する支援技術の1つである。Web開発におけるユニバーサルデザインを実現する。

WAI-ARIAの概要

WAIは、Web Accessibility Initiativeの略。W3Cに属する組織で、アクセシビリティ（=万人にとっての情報の受け取りやすさ）の理解と実装を助けるさまざまな活動を行っている。

また、ARIAはAccessible Rich Internet Applications の略で、属性値を通してWebコンテンツのアクセシビティを高める方法を定義している。

ちなみにWAI-ARIAの読み方は「ダブリュー・エイ・アイ・アリア」、あるいは「ウェイ・アリア」である。一般的には「アリア」と呼称されることが多い（少なくともYouTubeの動画を見漁った限りは多かった）。

その必要性

HTMLは、文書を構造化するためのマークアップ言語である。マークアップによって文章の役割が明確になる。例えば<button>タグで囲まれていれば、その文章の役割はボタンである。

各文章の役割を踏まえて適切にマークアップをすれば、WAI-ARIAを使わなくともある程度までのアクセシビリティは実現可能だ。

ただ、凝った表現や高度な対話性を追求すると、タグだけでその構造を伝えるのが難しい場合も出てくる。WAI-ARIAは、こうしたケースで必要とされる。

いつ使うべきか？

WAI-ARIAを使うべきケースは、主に以下のようなものである。

HTMLに存在しない機能を実装する場合。
HTMLに存在しているものの、その機能を持つ要素がアクセシビリティに対応していない場合。
視覚的なデザイン上の制約により、ネイティブ要素を使用したくない場合。

例えばフォーム要素（主に<input>系の要素）は、デフォルトのままだとスタイリングが難しい。そのため、<div>タグなどで独自にスタイリングを施し、JavaScriptを使ってフォーム機能を模倣する開発者も少なくない。

見た目は綺麗になるが、これだとネイティブな要素で伝えられたはずの意味（セマンティック）が失われる。WAI-ARIAを使うべき代表的なケースと言える。

押さえたい注意点

WAI-ARIAは、無闇に使用すべきではない。不適切な使用が混乱を招くケースが多々あるからだ。

W3Cの公式ドキュメントでも、ARIAを使う上での第一のルールとして以下が挙げられている。

If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

意訳：ARIA role, state, propertyを使わずに、HTMLだけで求めるアクセシビリティを実現できるなら、そうしなされ。

引用元:2.1 First Rule of ARIA Use

ARIAのrole、state、propertyについては後述する。ともかく、標準のHTMLでがんばれるのであれば、その方がいい。

ちなみにW3Cが述べているルールはあと4つある。

HTMLが本来持つセマンティクスを変えてはいけない。例えば<h2>タグにrole="tab"とか指定してはいけない。
インタラクティブなroleを指定する要素は、すべてキーボードで操作できなければならない。
フォーカスできる要素に、支援機器に無視される役割（role="presentation"やaria-hidden="true"）を指定してはいけない。
すべてのインタラクティブな要素は、その機能を伝えるアクセシブル名を持っていなければならない。

role="presentation"は、「見た目を整えるためのやーつ」という意味を持つ。また、アクセシブル名は、タグ名、alt属性、aria-label属性、aria-labelledby属性などによってスクリーンリーダーなどに伝えられる、要素の役割を示す名前を指す。

基本的な使い方

WAI-ARIAは、アクセシビリティにかんする情報に特化したカスタムデータ属性のようなものである。

その属性は、roleあるいはaria-*のいずれかの形を取る。

aria-*のパターンは、それが要素の状態にかんするものか、静的な情報にかんするものかで、概念的にさらに2種類に分けられる（モノ自体は同じ）。前者をstate、後者をpropertyと呼ぶ。

そのタグに付与したい情報に応じて、これらの属性値を必要に応じてHTMLタグに含めるのが、WAI-ARIAの基本的な使い方となる。

例えばクリックすると開閉するアコーディオン的なコンポーネントは、以下のようにマークアップする（あくまでサンプルである。そもそも、<details>タグと<summary>タグで賄えるならその方が良い）。

<div class="accordion">
  <button aria-expanded="false" aria-controls="content" id="accordion">
    要約
  </button>
  <div id="content" role="region" aria-labelledby="accordion" hidden>
    内容。
  </div>
</div>

aria-expanded属性やrole属性はまだしも、他は意味不明かと思う。WAI-ARIAを活用するには、各属性が何をするのか、どのように使うべきかを理解していなければならない。

とはいえ、一度に覚えるには数が多い。「なんかよく見るし、対応しとこ」くらいの軽い気持ちでその数を目の当たりにすると心が折れる。というか折れた。

3種類の属性の役割と指定方法を覚えておき、あとは状況に応じてドキュメントを参照しながら使うと良いかと思う。

role属性

role属性は、タグの役割を示すために使われる。

ただ、HTMLのタグ名はそれぞれ意味を持っているものが大半である。role属性はどのタグにも指定できるが、事実上<div>あるいは<span>タグに対して使われるものと考えて良い。

また、role属性に指定できる値は、事前に定義された文字列に限定される。以下、ごく一部の例である。

separator（フォーカスできる場合のみ）
slider
tab
tabpanel
treeitem
menubar
tooltip
dialog

完全なリストはW3C勧告、あるいMDNなどで確認できる。

state属性（状態を扱うaria-*属性）

state系のaria-*属性は、要素の一時的な状態を表すのに使う。

例えばフォーム要素が選択されているかどうか、アコーディオンが開いているか閉じているか、タブが開かれているか閉じているか、などの判断に使う。そのため指定する値は真偽値が多い。

後述のproperty系も同様だが、aria-*タイプの属性は<button>タグ、<input>タグなどでも使われる。role属性と違い、セマンティックを補足する情報だからだ。

そのため、指定できる数も1つに限られない。2個でも3個でも、必要であれば指定して良い。

以下、ごく一部のstate系属性の例を挙げる。

aria-expanded
aria-selected
aria-checked
aria-pressed
aria-hidden

ちなみに要素の状態が変化するときは、JavaScriptで値を更新する。

更新する方法は、普通の属性値と変わらない。例えば先に示したようなアコーディオンコンポーネントの場合は、以下のようなコードとなる。

document.addEventListener("DOMContentLoaded", () => {
  const accordionButton = document.getElementById("accordion");

  accordionButton.addEventListener("click", () => {
    const isExpanded = accordionButton.getAttribute("aria-expanded") === "true";
    accordionButton.setAttribute("aria-expanded", String(!isExpanded));

    const content = document.getElementById(
      accordionButton.getAttribute("aria-controls")
    );
    content.hidden = isExpanded;
  });
});

property属性（静的な情報を扱うaria-*属性

property系のaria-*属性は、要素の静的な情報を保持するために使う。

以下、属性名の例。値は属性名やケースバイケースによりにけり。

aria-label
aria-labelledby
aria-describe
aria-describedby
aria-controls
aria-modal

ちなみに、state、propertyと概念を分けているものの、MDNもW3C勧告も、ドキュメントでは"States and Properties"みたいにひとまとめにしている。

状態とプロパティの多くは、似た文脈で使われる。分けてまとめるよりも、利用シーン別にまとめていっしょくたに参照できるようにした方がわかり良いであろう、との判断があったのではないかと思う。

なので、参照するときは先のリンクにあるような分類に沿って、実現したいコンポーネントに合わせた属性・属性値を引っ張ってくるのが基本的な流れになる。はずだ。たぶん。

参考資料

WAI-ARIA basics – Learn web development | MDN

WAI-ARIA Overview | Web Accessibility Initiative (WAI) | W3C