このテクニックは、slider ロールの使い方を示し、ブラウザーと支援技術に及ぼす影響について説明します。

slider ロールは、ユーザーが所定の範囲内から値を選択できるマークアップに使用されます。 slider ロールは、値を変更するように調整されたコントロールである「親指」に割り当てられます。 ユーザーが親指とやり取りするとき、アプリケーションはスライダーの aria-valuenow(および可能なら aria-valuetext)属性をプログラムで調整して現在の値を反映する必要があります。 詳細については、下記ののセクションを参照してください。

キーボードとフォーカス

スライダーはキーボードでフォーカス可能で操作可能であるべきです。 ユーザーがタブキーでスライダーにフォーカスを合わせると、親指に当たるべきです。 親指はマウスのユーザーがドラッグするコントロールです。 矢印キーは、次のように操作する必要があります(右から左の言語のローカライゼーションは矢印の方向を逆にする必要があります)。

キー 動作
右矢印と上矢印 選択した値を増やす
左矢印と下矢印 選択した値を減らす
ページアップとページダウン オプションで、設定した量だけ値を増減します(例えば、0 ~ 100 の範囲で 10 ずつ)

ユーザーエージェントと支援技術への影響

 

: 支援技術がこの手法をどのように扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の1つで、したがって規範的ではありません。

例 1: 単純な数値範囲

次の例では、単純なスライダーを使用して 1 ~ 100 の値を選択しています。 現在のボリュームは 50 です。 アプリケーションは、ユーザーの入力に応じてプログラムで aria-valuenow の値を更新します。

<label for="fader">ボリューム</label>
<input type="range"
  id="fader" 
  min="1"
  max="100"
  value="50"
  step="1"
  aria-valuemin="1"
  aria-valuemax="100"
  aria-valuenow="50"
  oninput="outputUpdate(value)">
<output for="fader" id="volume">50</output>

次のコードスニペットを使用すると、ユーザー入力によって更新された出力を返すことができます。

function outputUpdate(vol) { 
  document.querySelector('#volume').value = vol;
}

例 2: テキスト値

時には、意味的には数字ではない値を選択するためにスライダーが使用されることがあります。 このような場合、aria-valuetext 属性を使用して、現在選択されている値に対して適切なテキスト名を指定します。 次の例では、スライダーを使用して曜日を選択しています。

<label id="day-label">曜日</label>
<div class="day-slider">
  <div id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="day-label"
     aria-valuemin="1"
     aria-valuemax="7"
     aria-valuenow="2
     aria-valuetext="月曜日">
 </div>
</div>

以下のコードスニペットは、ユーザーの入力に応答して aria-valuenow および aria-valuetext 属性を更新する関数を示しています。

var dayNames = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"];
var updateSlider = function (newValue) {
    var handle = document.getElementById("day-handle");
    handle.setAttribute("aria-valuenow", newValue.toString());
    handle.setAttribute("aria-valuetext", dayNames[newValue]);
};

動作する例

 

 

使用された ARIA 属性

 

互換性

TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する

その他のリソース

ドキュメントのタグと貢献者

このページの貢献者: Wind1808
最終更新者: Wind1808,