WAI-ARIAとは
HTMLのみでは表現できない要素に対して役割を補完し、スクリーンリーダー等を通して障がいをもつ方に対してもしっかりと情報を伝えることができるようにするために導入されたものです。
WAI-ARIAの構成要素としてrole属性とaria属性があります。role属性は要素に対して役割を付与するために使い、aria属性はroleに対してプロパティとステートを定義するために使われます。
role属性の分類
role属性は下記のように分類することができます。
抽象役割
抽象役割は一般的な役割を定義するために使われるもので具体的な動作ではなく、要素がどのような役割を持っているかを抽象的に表現をします。
抽象役割を使用することでスクリーンリーダーなどの補助技術がwebページをより深く理解し、ユーザーにより使いやすい使いやすい情報を提供することができます。
抽象役割の例として下記のようなものがあります。
- command
- ユーザーがアクションを起こせるような要素のことを指します。(例:button要素/link要素)
- input
- ユーザーが入力できる要素を指します。(例:textbox要素/search要素/ラジオボタン)
- container
- 他の要素をグループ化する要素を指します。(例: section要素/div要素)
ウィジェット役割
ウィジェット役割は、ユーザーがwebページの要素とどのようにやりとりができるか定義するのもです。
ウィジェット役割の例として下記のようなものがあります。
- button
- ユーザーがクリックしてアクションを起こせる要素 (ボタン)
- link
- ユーザーがクリックして別のページに移動できる要素 (リンク)
- menuitem
- ユーザーが選択できる要素 (メニュー項目)
- radio
- ユーザーが1つのオプションを選択できる要素 (ラジオボタン)
- checkbox
- ユーザーが複数のオプションを選択できる要素 (チェックボックス)
- textbox
- ユーザーが入力できる要素 (テキストボックス)
- combobox
- ユーザーがオプションを選択できる要素 (ドロップダウンリスト)
文書構造役割
文書構造役割はHTML要素に意味を持たせるために使用する属性の一つで、支援技術に対して要素の種類や役割を与えます。文書構造役割として下記のようなものがあります。
- h1・h2・h3
- 見出し要素
- article
- ニュースやブログ記事など自己完結している要素
- ul
- リスト要素
など上記以外にもたくさんあります。
ランドマーク役割
ランドマーク役割は、ウェブページの構造を意味的にグループ化してアクセシビリティを向上させます。ランドマーク役割として下記のようなものがあります。
- header
- ヘッダー要素
- main
- メイン要素
- footer
- フッター要素
aria属性の分類
aria属性とはHTML要素に対して付与することによって、その要素の役割や状態を支援技術に伝えます。簡単にまとめると視覚的に見えない要素の明確化/要素の状態の伝達/ユーザーとのやり取りの支援になります。aria属性にはそれぞれ種類があります。
ウィジェット属性
ウィジェット属性はユーザーとのやり取りに関わる要素に付加することで、その要素の役割や機能を支援技術に伝えます。下記のような種類があります。
- role属性
- 要素に対して役割を指定します。
- aria-pressed属性
- 要素が押されているかどうか判別します。例えばチェックボックスに対して aria-pressed="true"をつけるとチェックボックスが選択されていることを支援技術に伝えることができます。
- aria-expanded属性
- 要素が開かれているかどうかを判別します。例えばアコーディオンに対して aria-expanded="true"をつけるとそのメニューが開かれていることを支援技術に対して伝えることができます。
- aria-valuenow属性
- 要素に対して現在値を指定します。例えばスライダーに対してvalue-now=50属性を付加すると、そのスライダーの現在値が50であることを支援技術に対して伝えます。
ライブ領域属性
コンテンツが更新されたことをユーザーに対して通知するもので、これによって視覚障がい者などのユーザーは画面を見ずにコンテンツの変化を把握することができます。
- aria-live属性
- 要素がライブ領域であることを示します。aria-live="polite"を付加することでページが更新されたことをユーザーに伝えることができます。
- aria-atomic属性
- 要素内のすべてのコンテンツが同時に更新されるかどうかを指定します。aria-atomic="true"を付加することで変更時の通知を変更箇所を含むブロックを指定できます。
- aria-relevant属性
- どのような更新をユーザーに通知するかを指定します。aria-relevant="true"を付加することで(追加/削除)などの情報を受け取ることができます。
ドラックアンドドロップ属性
ドラックアンドドロップに関わる要素に付加することで、その要素の役割や状態を支援技術に伝えることができます。
- aria-grabbed属性
- 現在、要素がドラックされているかどうかを指定します。
- aria-activedescendant属性
- 現在フォーカスが当たっている子要素を指定します。
WAI-ARIAの使い方
使い方としては、HTML要素で表現ができない要素に対して使います。例えば何も意味を持っていないdivに対して下記のように指定すればnavと同じ役割を持つことができます。
<!-- ナビゲーション -->
<nav></nav>
<!-- ナビゲーション -->
<div role="navigation"></div>
その他に動的なコンテンツの更新やキーボードアクセシビリティの向上に使うことができます。
動的なコンテンツ
スクリーンリーダーは動的なコンテンツが得意ではない傾向にあるため、そのような要素に対してaria属性のaria-liveを使うことによって伝えることができます。
<progress value="39" max="100" aria-label="進捗状況39%">39%</progress>
キーボードのアクセシビリティの向上
HTML要素でキーボードアクセシビリティ機能を標準で備えていない要素に対してrole属性やaria属性を付与することで要素にフォーカスすることができます。
<div role="button">ボタン</div>
使う上で注意点
基本的にHTMLの要素を使うようにする
WAI-ARIAは便利ではありますが全ての要素に要素に使うのではなく、HTML要素では表現できない要素に対して使うのが良いです。例えば下記が良い例と悪い例になります。
<!-- 良い例😚 -->
<nav></nav>
<!-- 悪い例😅 -->
<div role="navigation"></div>
このようにできるだけHTMLの要素を使って構築していくのが良いです。
HTMLの要素を上書きしない
WAI-ARIAを使ってHTML要素を上書きしてしまうと、セマンティック意味が失われてしまうためにスクリーンリーダーの補助技術がwebページを正しく理解できなくなってしまいます。
<!-- 良い例😚 -->
<button></button>
<!-- 悪い例😅 -->
<div role="button"></div>
フォーカスが可能要素に対してrole="presentation"とaria-hidden="true"を付与しない
理由は3つあり、アクセシビリティの低下、セマンティックな要素の意味損失、コードの煩雑化です。
アクセシビリティの低下
role="presentation"は要素をアクセシビリティツリーから除外し、aria-hidden="true"は要素をスクリーンリーダーから隠します。フォーカス可能要素はユーザーがキーボードで操作することを想定しているのでしているので、要素のアクセシビリティの除外とスクリーンリーダーの隠しによってキーボードで操作ができなくなってしまうためです。
セマンティックな意味が損なわれる
HTML要素には固有のセマンティックがあるようにrole="presentation"とaria-hidden="true"を使うことによって要素本来の意味が失われてしまう失われてしまい、スクリーンリーダー等の補助機能がwebページを正しく理解できなくなってしまいます。
コードの煩雑化
role="presentation"とaria-hidden="true"を使うことによってコードが煩雑化してしまいます。
所感
令和6年(2024年)4月1日から、アクセシビリティの義務化されました。私は今までアクセシビリティを意識したコーディングに焦点を置いていなかったのでこれを機に理解を深めたいと思いまとめていきました。学んだ内容を通してこのサイトも少しずつ最適化できればと思います。