これは何
<meter>
、ARIA ロール meter について読んだメモ
<meter>
- メーターとして使用される要素を識別するために使う
- 定義された範囲内の数値をグラフィカルに表示するもの
- 例:バッテリー
意味のある上限値を持たない値には適さない(例:世界人口)
進行状況や完了率を示すなら、<progress>
を使う
属性
-
value
- 現在の数値
- 指定される場合、
min 属性
とmax 属性
の間でないといけない - 定義されていない場合:
0
- 範囲外の数値の場合:範囲の内のもっとも近い値
-
min
≦low
<high
≦max
-
min
- 範囲の下限
- 未設定の場合:
0
-
low
-
min
属性の値より大きく、high
属性,max
属性の値より小さい - 未定義 or
min
より小さい場合:min
の値と同じになる
-
-
high
-
min
属性,low
属性の値より大きく、high
属性の値より小さい - 未定義 or
max
より大きい場合:max
の値と同じになる
-
-
max
- 範囲の上限
- 未設定の場合:
1
-
-
optimum
- 最適な数値の範囲を表す
-
min
属性とmax
属性の範囲内の値 -
low
属性とhigh
属性が指定されている場合、この属性の値を含む範囲が最適な数値の範囲 - ブラウザは
optimum
の値以下かどうかでメーターのバーの色を変更することがある
meter
role
-
<div>
につけれる - キーボード操作はできない(そもそも操作するものでもない)
- 属性
-
aria-valuemin="NUMBER"
:メーターの最小値を指定 -
aria-valuemax="NUMBER"
:メーターの最大値を指定 -
aria-valuenow="NUMBER"
:メーターの現在の値を指定 aria-labelledby
-
- 支援技術では、aria-valuenowの値を%で表示することがよくある
- %のみで伝えることが親切でない場合、
aria-valuetext
で値を理解できる文字列を設定できる-
aria-valuetext
-
aria-valuenow
の値(現在の値)について人間が読める代替テキストを定義する
-
- 例:バッテリーの値 aria-valuetext="50% (6 hours) remaining"
-
- %のみで伝えることが親切でない場合、