0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ARIA Authoring Practices Guide (APG)_ Meter Patternを読んだ

Last updated at Posted at 2025-05-03

これは何

<meter>、ARIA ロール meter について読んだメモ:pencil:

<meter>

  • メーターとして使用される要素を識別するために使う
    • 定義された範囲内の数値をグラフィカルに表示するもの
    • 例:バッテリー

意味のある上限値を持たない値には適さない(例:世界人口)

進行状況や完了率を示すなら、<progress>を使う

属性

  • value
    • 現在の数値
    • 指定される場合、min 属性max 属性の間でないといけない
    • 定義されていない場合:0
    • 範囲外の数値の場合:範囲の内のもっとも近い値
  • minlow < highmax
    • 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"
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?