Webページの変化を支援技術に伝えよう！

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

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

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

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

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

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

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

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

例えば、以下のように`aria-live`を与えた場合、`<p>`の中身が切り替わった時にその内容を読み上げます。
```html
<div aria-live="polite">
  <p>国境の長いトンネルを抜けると雪国であった。夜の底が白くなった。信号所に汽車が止まった。</p>
</div>
```

以下にサンプルを用意しました。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dPbYmOg" data-pen-title="Untitled" data-user="kokisakano" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kokisakano/pen/dPbYmOg">
  Untitled</a> by KokiSakano (<a href="https://codepen.io/kokisakano">@kokisakano</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

例えば[JAWS](https://www.freedomscientific.com/products/software/jaws)や[VoiceOver](https://support.apple.com/guide/voiceover-guide/welcome/web)などを用いた状態で、「雪国」を「風の又三郎」に変えてみましょう。変更されたテキストが読み上げられるはずです。

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

- `alert`
- `log`
- `marquee`
- `progressbar`
- `status`
- `timer`

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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="emOpxmq" data-pen-title="role=&amp;quot;status&amp;quot;" data-user="kokisakano" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kokisakano/pen/emOpxmq">
  role=&quot;status&quot;</a> by KokiSakano (<a href="https://codepen.io/kokisakano">@kokisakano</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`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`を利用します。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="gbYaqXK" data-pen-title="aria-live" data-user="kokisakano" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kokisakano/pen/gbYaqXK">
  aria-live</a> by KokiSakano (<a href="https://codepen.io/kokisakano">@kokisakano</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### aria-busy
`aria-busy`も真偽値を持つARIA属性です(デフォルトは`false`)。`aria-live`を持つ要素のコンテンツの変更があったときに、`true`の時は要素の更新途中と見做し支援技術へ通知を送りません。コンテンツが頻繁に変化する場合や、段階を踏んで変化する場合で、最終的な状態だけを通知したい場合は`aria-busy`を使います。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="JoPYxmJ" data-pen-title="aria-atomic" data-user="kokisakano" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kokisakano/pen/JoPYxmJ">
  aria-atomic</a> by KokiSakano (<a href="https://codepen.io/kokisakano">@kokisakano</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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



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