アクセシビリティ
WAI-ARIAのLive Regions（ライブリージョン）解説と実用例
WAI-ARIAはアクセシビリティを踏まえた仕様として2014年3月14日にWAI-ARIA1.0が勧告、現在もバージョンアップが続いています。そのWAI-ARIAの仕様の一つであるライブリージョンについて、前回記事でご紹介した桁数チェックに便利なテキストボックスUIの場合を例に解説します。
WAI-ARIAとは
WAI-ARIAにはrole, state, propertyがあります。WAI-ARIAについては、こちらの記事でご紹介していますので必要に応じてご参照ください。
Live Regions（ライブリージョン）について
Live Regionsは、上述のrole, state, propertyのうちのstateに当たり、その領域（要素）に動的な更新があったときにどう支援技術（スクリーンリーダーなど）に伝えるかを定義します。動的な更新というのは、ページ自体に更新もなく変更される場合のことを指します。
新着のお知らせの数が表示される領域で、新着件数が増えたら示されている数字が変わるような場合が一つの例です。そのような場合でも、目の不自由な方などが、支援技術を通して変化の把握を可能にするための仕様です。
Live Regionsには、次の二つの属性があります。
aria-live- その領域に更新があった時に支援技術に伝える優先度を定義します。値の種類には
off,polite,assertiveがあります。 aria-controls- その領域と関連するところを定義します。関連する部分の
id属性の値を、aria-controlsの値とすることで関連付けられます。 - 数字を入力するテキストボックスに、
aria-controls属性をつけて、値を、動的に変化する領域のid属性の値であるnum-msgにしています。 - 動的に変化する領域である
p要素にaria-live属性をつけて、値をpoliteにしています。値は通常はpoliteにします。
実用例
次のテキストボックスに数えるのが大変なくらいの桁数の多い数字を入力してみてください。すると、例えば「11111111」と入力すれば「1111万（以下省略）」と表示されます。次に1を一つ足して「11111111」とするとすぐに「1億（以下省略）」と表示されます。
※これ良くないですか？当方に制作ご依頼いただいて希望をいただいた際は、こちらは無料でお付けしますよ！
このテキストボックスの数字を漢字に置き換えて示す領域は上記で言うところの動的に変化する領域です。
ここで、ライブリージョンを仕様通りに実装すると以下のようなコードになります。先にお示ししたデモは、実際にこの記述をしています。数字を漢字に変換して示すためのコードは下記では省略しています。
<label for="numCheck-01">金額（半角数字のみ）</label>
<input type="text" id="numCheck-01" class="num-check" aria-controls="num-msg">
<p id="num-msg" class="num-msg" aria-live="polite"></p>
スクリーンリーダーはLive Regionsをどう扱っているか（どう読み上げるか）
一時は世界No.1のシェアとなり、現在も高いシェアをほこる無料のスクリーンリーダー「NVDA」で試すと、以下のような読み上げ方となります。
| Live Regionsなし | 数字を入力するたびに、入力した数字だけ読み上げられる。ただ、NVDAキー（デフォルトでは無変換キー）+↑or↓でその時点で入力されている数字が読み上げられる。 |
|---|---|
| aria-liveあり | 数字を入力するたびに、入力した数字だけ読み上げられるのに加え、漢字に変換して表示する部分が変化すれば、変化した内容が読み上げられる。 |
| aria-controlsあり | 変化なし。 |
NVDAは非常に使いやすいので、ぜひご自分でもお試しください。こちらでNVDAのダウンロードから使い方までご説明しています。
そもそもNVDAでは、NVDAキー（デフォルトでは無変換キー）+↑or↓で、その時点でテキストボックスに入力されている内容全体が読み上げられ、例えば11111111と入力されていれば1億（いちおく）と読み上げるので、このケースでの通知の必要性は高くはないとも思います。ただ、ない方が良いかというと、なんとも言えませんね。
このケース、画面上に表示される内容よりも、スクリーンリーダーを利用した方が数字の桁が把握しやすいという、なんとも面白いケースとも思います。
aria-controlsは対応してないのか、現時点読み上げ方が変わらないですね。label要素とinput要素は関連付けているので、input要素にフォーカスが当たるとlabel要素も一緒に読み上げるのですが、それと同様、aria-controlsで関連付けた部分も読み上げられるかと思いきや、読み上げられませんでした。
留意点
動的に変化するものにはとにかくaria-liveをつければよいかというと、そうとは限りません。例えばカルーセルスライダーなど、その変化をそもそもスクリーンリーダーユーザーに伝えるべきか？というのもちゃんと考えて使うようにしましょう。
まとめ
WAI-ARIAのLive Regions（ライブリージョン）のご紹介でした。ホームページではそれほど出番のない仕様ではあると思いますが、ウェブアプリケーションの場合は結構出番もあると思いますので、ぜひ活用していきましょう。
BringFlower
稲田 高洋（Takahiro Inada）