アクセシブルなSpinner/Loaderの作り方

SpinnerやLoaderを実装するとき、ローディングを表現するHTML要素がないので<span>や<div>でマークアップすることが多い。ただ、そのままではスクリーンリーダーにとっては何も伝わらないのでアクセシブルな実装方法を考える。

大前提

No ARIA is better than bad ARIA.

引用:Read Me First | APG | WAI | W3C

各属性がどのような働きをするかわからないなら、ARIAは使わない方が良い。

アクセシブルなSpinner/Loaderの作り方

<span
  class="spinner"
  role="status"
  aria-live="polite"
  aria-label="Now loading..."
>
</span>

• role="status"はライブリージョンの一種で、role="alert"ほど重要でない情報を表現する
• ライブリージョンは動的な変更を通知する仕組み
• aria-live="polite"は適切なタイミングでユーザーに通知する
  • <role="alert" aria-live="assertive">は割り込んで即時に通知する
  • Spinner/Loader程度は割り込むほど重要ではないのでpoliteを使う