ARIA

Accessible Rich Internet Applications (ARIA) はロールや属性の集合で、ウェブコンテンツやウェブアプリケーション（特に JavaScript で開発するもの）を、ハンディキャップを持つ人々にとってよりアクセシブルにする方法を定義します。

ARIA は、アプリケーションで一般的に使用されている対話操作やウィジェットを、他のメカニズムがない場合に支援技術に渡すことができるように HTML を補完します。例えば ARIA は、アクセシビリティのある JavaScript ウィジェット、フォームのヒント、エラーメッセージ、ライブコンテンツ更新などを可能にします。

ARIA の最初のルール は、「要素を再利用し、それをアクセシブルにするために ARIA のロール、状態、プロパティを追加する代わりに、要求される意味づけと動作がすでに組み込まれているネイティブの HTML 要素または属性を使用することができるなら、そうすること」です。

プログレスバーウィジェットのためのマークアップです。

<div
  id="percent-loaded"
  role="progressbar"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100"></div>

このプログレスバーは、意味を持たない <div> を使って作られています。 ARIA ロールとプロパティで意味を追加します。この例では、 role="progressbar" 属性により、この要素が実際には JavaScript を使用したプログレスバーウィジェットであることをブラウザーに伝えています。 aria-valuemin および aria-valuemax 属性はプログレスバーの最小値と最大値を指定し、 aria-valuenow は現在の状態を表すため、 JavaScript から更新し続けます。

マークアップに直接配置するとともに、 ARIA の属性を要素に追加して、次のような JavaScript コードを使用して動的に更新することができます。

// プログレスバーの <div> を DOM 内で探す。
const progressBar = document.getElementById("percent-loaded");

// ARIA ロールと状態を設定することで、
// 支援技術がウィジェットの種類を知ることができる。
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

// プログレスバーの値を更新したいときにいつでも呼び出せる
// 関数を作成する。
function updateProgress(percentComplete) {
  progressBar.setAttribute("aria-valuenow", percentComplete);
}

支援技術を使用していないユーザーが利用できるコンテンツは、すべて支援技術でも利用できるようにしなければなりません。同様に、支援技術を使用しないユーザーもアクセスできないような、支援技術ユーザーを対象とした機能を記載してはなりません。上記のプログレスバーは、プログレスバーのように見えるようにスタイル設定する必要があります。

代わりにネイティブの <progress> 要素を使用した方がずっと簡単でしょう。

<progress id="percent-loaded" value="75" max="100">75 %</progress>