APG Patterns
⌘K
English
⌘K
English
📏

範囲ウィジェットの値と範囲の伝達

slider や spinbutton などの範囲ウィジェットでは、現在の値とその範囲を支援技術に伝えるための ARIA プロパティが必要です。

このプラクティスの詳細は Communicating Value and Limits for Range Widgets - WAI-ARIA APG を参照してください。 以下は、このサイトの実装例に基づく補足解説です。

概要

範囲ウィジェットは、定義された範囲内の値を設定または表示するためのものです。ARIAは4種類のロールを定義しています：slider、spinbutton、scrollbar、meter。それぞれに、現在の値とその範囲を支援技術に伝えるための特定のプロパティが必要です。

範囲ウィジェットの種類

ロール目的ユーザー操作
slider範囲から値を選択矢印キー、ドラッグ
spinbutton数値の入力/調整矢印キー、入力
scrollbarスクロール位置の制御ドラッグ、矢印キー
meterゲージ値の表示（読み取り専用）なし（表示のみ）

必須のARIAプロパティ

すべての範囲ウィジェット共通

<div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="音量"></div>
プロパティ必須説明
aria-valuenowはい現在の値
aria-valueminはい*最小値（*meterでは暗黙的に0）
aria-valuemaxはい*最大値（*meterでは暗黙的に100）
aria-valuetextいいえ人間が読める値のテキスト

数値以外の値に対する aria-valuetext

値が数字として意味をなさない場合：

<div
  role="slider"
  aria-valuenow="120"
  aria-valuemin="0"
  aria-valuemax="480"
  aria-valuetext="14:00"
  aria-label="会議開始時刻"
></div>

<div
  role="slider"
  aria-valuenow="2"
  aria-valuemin="1"
  aria-valuemax="5"
  aria-valuetext="優先度: 中"
></div>

ネイティブHTMLの代替

まずネイティブHTML要素を検討する：

<label for="volume">音量</label>
<input type="range" id="volume" min="0" max="100" value="50" />

<label for="quantity">数量</label>
<input type="number" id="quantity" min="1" max="99" value="1" />

<label for="disk-usage">ディスク使用量</label>
<meter id="disk-usage" min="0" max="100" low="33" high="66" optimum="20" value="75">75%</meter>

<label for="upload">アップロード進行状況</label>
<progress id="upload" max="100" value="70">70%</progress>

実装のポイント

マルチサムスライダー

複数のサム（つまみ）を持つスライダー（例：価格範囲）：

<div role="group" aria-label="価格範囲">
  <div
    role="slider"
    aria-label="最低価格"
    aria-valuenow="20"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
  <div
    role="slider"
    aria-label="最高価格"
    aria-valuenow="80"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
</div>

方向

垂直スライダーの場合は方向を指定：

<div
  role="slider"
  aria-orientation="vertical"
  aria-valuenow="50"
  aria-valuemin="0"
  aria-valuemax="100"
></div>

読み取り専用のメーター

メーターは本質的に読み取り専用です。表示専用のゲージには meter ロールを使用：

<div
  role="meter"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="バッテリー残量"
>
  75%
</div>

よくある間違い

複雑な値に valuetext がない

<div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="480" aria-label="時刻"></div>
悪い例: スクリーンリーダーが「50」と読み上げます — 時刻としては意味がありません。
<div
role="slider"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="480"
aria-valuetext="8:30"
aria-label="時刻"
></div>
良い例: スクリーンリーダーが「8:30」と読み上げます — ユーザーに意味のある値です。

min/max/now の不整合

<div role="slider" aria-valuenow="150" aria-valuemin="0" aria-valuemax="100"></div>
悪い例: valuenow (150) が範囲 (0–100) の外にあります。
<div role="slider" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
良い例: valuenow が有効な範囲内にあります。

読み取り専用の表示に slider を使用

<div role="slider" aria-valuenow="75" aria-readonly="true"></div>
悪い例: slider はインタラクティブな操作を暗示します — aria-readonly ではその期待を変えられません。
<div role="meter" aria-valuenow="75"></div>
良い例: meter ロールが表示専用のゲージであることを明確に伝えます。

リソース