aria-busy

コンテンツのセクションが更新される場合を考えます。その更新は重要であり、変更されたときにユーザーに知らせたいので、aria-live 属性を使用して ARIA ライブリージョン にします。そのセクションの複数のコンポーネントを同時に更新したい場合もありますが、すべてが同時に更新されるとは限りません。aria-live="assertive" が付与されている非常に重要なライブリージョンであっても、コンテンツの様々な部分が読み込まれるたびにユーザーを何度も中断させたくはありません。ここで aria-busy が役立ちます。

aria-busy 属性は、ライブリージョンのオプショナルな属性で、値に true または false を持つことができます。aria-busy="true" は現在更新されている、または変更されている要素に追加することができ、支援技術に、修正または変更が完了するまでコンテンツをユーザーに公開しないように、待機することを通知することができます。変更が完了したら、オブジェクトの ariaBusy プロパティを使用して値を false に変更します。

ariaLiveElement.ariaBusy = "false";

aria-live の値は、aria-busy の値を false に変更するとすぐに変更が通知されるか、または支援技術が、現在のタスクが完了するまで待機してからユーザーを中断するかを決定します。

feed ロールを持つ要素の aria-busy が true に設定されている場合、ユーザーが開始した変更を除いて、フィード内で発生するレンダリングの変更は通知されません。

レンダリングされたウィジェットに変更を加えると、スクリプト実行中にウィジェットに必要な所有要素が欠落する状態になる場合は、更新プロセス中にウィジェットの aria-busy を true に設定します。例えば、レンダリングされたツリーグリッドが、必ずしも同時にレンダリングされない複数のブランチを更新する場合、1 回の更新でツリー全体を置き換える代わりに、各ブランチが変更されている間ツリーをビジーとしてマークすることもできます。

false (デフォルト):

要素に対して予想される更新はありません。

true

要素が更新されています。

Element.ariaBusy

各要素のインターフェースの一部である ariaBusy プロパティは、要素が変更されているかどうかを示す属性 aria-busy の値を反映します。

<div
  id="clock"
  role="timer"
  aria-live="polite"
  aria-atomic="true"
  aria-busy="false"></div>

const el = document.getElementById("clock");
console.log(el.ariaBusy); // false
el.ariaBusy = "true";
console.log(el.ariaBusy); // true

すべてのロールで使用されます。

• ARIA ライブリージョン
• aria-live
• aria-relevant
• aria-atomic