はじめに

昨今のWebページはJavaScriptを用いたコンテンツの更新が多く行われるようになりました。
ページの一部を書き換えることは視覚的にWebページを利用している人にとっては明らかですが、視覚以外から用いるユーザーにとっては明確ではありません。

このようなギャップを埋めるために、コンテンツの更新を視覚を補助する支援技術に伝えるARIAライブリージョンという方法があります。

この記事ではそんな、ARIAライブリージョンについて紹介します。

aria-live属性

ライブリージョンはaria-live属性を用いて実装できます。

aria-live属性はoffとpolite、assertiveを持つことができ、デフォルトはoffです。

offは何もしていない動作と同じです。次に紹介するroleによる暗黙的なライブリージョンを無効にします。

politeはコンテンツの更新が行われたら、支援技術から別の通知が落ち着いたタイミングで通知します。

assertiveはコンテンツの更新が行われたら、即時に通知します。

例えば、以下のようにaria-liveを与えた場合、<p>の中身が切り替わった時にその内容を読み上げます。

<div aria-live="polite">
  <p>国境の長いトンネルを抜けると雪国であった。夜の底が白くなった。信号所に汽車が止まった。</p>
</div>

以下にサンプルを用意しました。

See the Pen Untitled by KokiSakano (@kokisakano) on CodePen.

例えばJAWSやVoiceOverなどを用いた状態で、「雪国」を「風の又三郎」に変えてみましょう。変更されたテキストが読み上げられるはずです。

roleによるライブリージョン

特定のroleではデフォルトでライブリージョンを持ちます。

alert
log
marquee
progressbar
status
timer

長くなるので、すべてのroleに言及しませんが、例えばstatusを付与した要素を考えます。
その要素はコンテンツに変更があった場合、そこにaria-liveが記述されていなくても自動的に支援技術に変更が伝えられます。

See the Pen role="status" by KokiSakano (@kokisakano) on CodePen.

roleによるデフォルトの動作はaria-liveによって上書き可能ですが、一部のroleは上書きによって支援技術に二重で伝えられる可能性があるので、慎重に行なってください。

ライブリージョンに関連するARIA属性

aria-liveを補助する役割を持つARIA属性としてaria-atomicとaria-busy、aria-relevantがあります。

aria-atomic

aria-atomicは真偽値を持つARIA属性です(デフォルトはfalse)。aria-liveを持つ要素のコンテンツの変更があったときに、trueの時はすべてのコンテンツを支援技術に伝えます。falseの時に支援技術へ伝えるのは変更があったコンテンツのみです。コンテンツの変更の一部だけを伝えても、意味が伝わらない場合にaria-atomicを利用します。

See the Pen aria-live by KokiSakano (@kokisakano) on CodePen.

aria-busy

aria-busyも真偽値を持つARIA属性です(デフォルトはfalse)。aria-liveを持つ要素のコンテンツの変更があったときに、trueの時は要素の更新途中と見做し支援技術へ通知を送りません。コンテンツが頻繁に変化する場合や、段階を踏んで変化する場合で、最終的な状態だけを通知したい場合はaria-busyを使います。

See the Pen aria-atomic by KokiSakano (@kokisakano) on CodePen.

aria-relevant

aria-relevantはadditions、removals、textをスペース区切りで組み合わせて持つARIA属性です。全てを含む場合、つまりadditions removals textは省略してallで表現します。デフォルトはadditions textです。
aria-liveを持つ要素のコンテンツの更新のうちどのような種類を支援技術に通知するかを決めます。

additionalsは要素にコンテンツが追加されたこと
removalsは要素からコンテンツが削除されたこと
textは要素にテキストが追加されたこと

おわりに

ARIAライブリージョンについて紹介しました。
突如登場・変化するようなコンテンツはすべてのユーザーが気づけていないかも知れません。適切にaria-live属性やroleを付与して、伝えたいものを伝えられるようにしましょう。