「WAI-ARIA」とは、W3Cの中の団体が定めているWebアクセシビリティに関する規格ですね。「WAI」は「Web Accessibility Initiative」の略で、「ウェイ」と読むらしいです…
HTMLは標準のタグでマークアップするだけでは、すべてに人に十分な情報が届けられない可能性があったりします。そこで、「WAI-ARIA」が定めたHTML属性を使うことで、「より伝わりやすいHTMLタグにしよう」ということですね。
「WAI-ARIA」公式文書を見ると、以下のように定義されていました。
ウェブアクセシビリティの分野は、障害をもつ人にとってどのようにすればウェブコンテンツを利用可能にするかを定義する。
ということで、Webアクセシビリティを考慮したマークアップをする上で欠かせない「WAI-ARIA」について、簡単な紹介と、代表的なコーディング例を見ていきます。
WAI-AREAの3つの定義
「WAI-AREA」には大きく以下の3つの定義があります。
- ロール
- プロパティ
- ステート
ロール
ロールは「role="main"」のように、HTML要素に対してどういった役割の要素かを定義するものです。
マークアップを間違えた場合（例えばbuttonとしての振る舞いなのにdivで作成した場合とか）にも、role="button"といった感じで無理やり役割を指定することも可能です。
（※ 推奨はされていませんが…）
プロパティ
プロパティは「追加」みたいなイメージです。
area-label="トップへ戻る"のような感じで、ロールで与えた役割に対してプラスαで追加が必要な場合に定義してあげます。
ステート
ステートは「状態」を表します。area-expanded="true"のように、「プロパティで追加したアイテムが展開中ですよ」みたいな状態を提供します。
ロール、プロパティ、ステートを付与してあげることで、HTMLタグの意味がより深く指定できるということですね。
ちなみに「ロール」「プロパティ」「ステート」の説明は、「コーディングWebアクセシビリティ」がめちゃくちゃ分かりやすくておすすめです。
ポチップ
WAI-AREAでよく使われるパターン
それでは具体例を見たほうがイメージしやすいと思うので、WAI-AREAが具体的にどういった感じで使われるか見ていきましょう！
主要なセクションの役割を明示
「ランドマークロール」という特に重要視されるロールがあります。ユーザーが目的に素早くアクセスできるように、大枠のセクションを目的別に分けて指定するものですね。
<header role="banner"></header>
<nav role="navigation"></nav>
<div class="content">
<main role="main">
<form role="form"></form>
</main>
<aside role="complementary">
<form role="search"></form>
</aside>
</div>
<footer role="contentinfo"></footer>（参考）→ ランドマークロール
アイコンボタンに意味づけ
アイコンや記号だけのボタンって見えない人にとっては何を意味しているか分かりません。
area-labelやarea-labelledbyでラベル付けしてあげてください。例えばFont Awesomeでボタンを作ったとして、
<button area-label="更新する"><i class="fas fa-sync-alt"></i></button>展開されたかどうか
プロパティとステートを使った例です。ハンバーガーメニューなどで使われたりします。
<button aria-expanded="false" aria-controls="drawer"></button>
<div id="drawer" aria-hidden="true"></div>aria-controls="drawer"はプロパティで、「#drawerを持ってますよ！」と指定しています。
その、持っている #drawerが展開されているかどうかをaria-expanded="false"で管理しているわけですね。ステートの設定でこの例だと「展開されていない」という状態になります。
この辺の状態は、JavaScriptでボタンが押されたかどうかで変更していく感じです。
無理やり役割の変更
ラジオボタンじゃないのに、ラジオボタン的な振る舞いをしている場合の対処方法としては2つあります。
- HTMLタブを
input type="radio"に書き換える - ロールで
role="radio"を付与する
もちろんHTMLタグを書き得るべきではありますが、状況によって書き換えられない場合は、せめてrole="radio"の指定だけでも行っておくと、機械がその要素をラジオボタンとして認識してくれるようになります。
<div role="radiogroup">
<div role="radio" aria-checked="true">ラジオ1</div>
<div role="radio" aria-checked="false">ラジオ2</div>
<div role="radio" aria-checked="false">ラジオ3</div>
</div>ツールチップでヒントを与える
フォームとかでよく使われるのが、ヒントを与えるツールチップですね。何を入力する項目かをarea-tooltipによって、提示してあげましょう！
<form>
<fieldset>
<legend>登録フォーム</legend>
<p>
<label for="name">おなまえ</label>
<input type="text" id="name" area-describedby="hint">
<div id="hint" area-tooltip>おなまえは「ひらがな」で入力してください。</div>
</p>
</fieldset>
</form>タブ
HTMLでタブを作る場合も配慮が必要になります。タブ選択部分は慣例的（？）にulが使われているのをよく見ますが、ulである必要性はまた考える必要はるかもです。
（liにrole="presentation"（タグをなかったことにする役割）を使ってたりするので…）
<ul role="tablist">
<li role="presentation"><button role="tab" aria-controls="panel1" aria-selected="true">タブ1</button></li>
<li role="presentation"><button role="tab" aria-controls="panel2" aria-selected="false">タブ2</button></li>
<li role="presentation"><button role="tab" aria-controls="panel3" aria-selected="false">タブ3</button></li>
</ul>
<div>
<div id="panel1" role="tabpanel" aria-hidden="true">タブ1のコンテンツ</div>
<div id="panel2" role="tabpanel" aria-hidden="false">タブ2のコンテンツ</div>
<div id="panel3" role="tabpanel" aria-hidden="false">タブ3のコンテンツ</div>
</div>tablist・・・タブの選択部分を囲う部分tab・・・タブのボタン部分tabpanel・・・タブのコンテンツ部分
タブに関しては上記のの3つのセットを覚えておけばOKかと！
おわり
WAI-ARIAの簡単な説明と、実際のコード例を書いてみました。これからも気づいたものがあれば、どんどん追加していく予定です。
- ロール
- プロパティ
- ステート
の3つの意味を理解しておくとかなり作りやすくなるはずなので、まずはここをイメージできるようになるといいと思います。
WAI-ARIAを学び始めると、たくさんの属性が出てきてめまいがしそうですが、代表的なものを覚えていくと応用も利いてくるので、まずは今回紹介したものから覚えてみてください！
