フォーム・入力

メーター

解説あり

Meter

既知の範囲内の量（ディスク使用率など）を示す表示専用の指標。

メーターとは？

メーターは、あらかじめ範囲が分かっている量の「現在値」を視覚的に示す表示専用の指標です。ディスク使用率、バッテリー残量、パスワード強度、在庫の残りなどに使います。

progressbar との違い（重要）

メーターは「既知の範囲の中で、いまどれくらいか」を表す静的な計測値（例：ディスク 72%）。プログレスバーは「処理がどこまで進んだか」という、完了に向かって進む進捗（例：ダウンロード中）。「タスクの進み具合」なら role="progressbar"、「ある時点の量」なら meter を使います。

なぜアクセシビリティが大事なの？

スクリーンリーダーを使う人。色付きのバーを <div> で描いただけだと、画面を見ない人には何も伝わりません（「72%」という値も「ディスク使用率」という意味も）。役割・値・範囲を支援技術が読める形にする必要があります。
色だけに頼らない。「赤＝危険」のように色だけで状態を示すと、色覚特性のある人や白黒環境で伝わりません。数値（72%）やテキスト（残り 28%）も併記します。

ポイント

メーターは表示専用・非インタラクティブです。ユーザーが値を変えるものではないため、キーボード操作はありません（フォーカスも不要）。値を変えられる UI はスライダーであり、メーターではありません。

ライブデモ（推奨実装）

下はネイティブの <meter> です。操作するものではなく、状態を読み取るための表示です。スクリーンリーダーで読み上げを確認してみてください。

アクセシブルなメーター（ネイティブ meter）

ディスク使用率

72%

確認しよう：これは表示専用なので Tab ではフォーカスされません。スクリーンリーダーでは「ディスク使用率, 72%」のように値が読み上げられます。

補足

<meter> の low / high / optimum を指定すると、ブラウザが「良い / 注意 / 危険」を色で示し分けます。ただし色は補助であり、意味は value（と併記テキスト）で必ず伝わるようにします。

キーボード操作

キー	動作	必須/任意
—	キーボード操作はありません。メーターは表示専用（非インタラクティブ）でフォーカスも受け取りません。	—

補足

もし「矢印キーで動かしたい」要件があるなら、それはメーターではなくスライダー（role="slider"）です。役割を取り違えないようにします。

必要な WAI-ARIA / ロール

付ける場所	属性 / ロール	意味
ネイティブ meter	`<meter min max value>` + `<label for>`	role・値・範囲は自動。`label` で名前を付ける。
自作の本体	`role="meter"`	「計測値の表示である」と支援技術へ伝える。
自作の本体	`aria-valuemin` / `aria-valuemax`	範囲（最小・最大）。既知の範囲であることが meter の前提。
自作の本体	`aria-valuenow`	現在値。値が変わったら更新する（ユーザー操作ではなくプログラムから）。
自作の本体	`aria-valuetext`	「72%」「残り 28%」など人にわかる表現を補う（任意・推奨）。
自作の本体	`aria-label` / `aria-labelledby`	何のメーターか（「ディスク使用率」）の名前。
自作の本体	`tabindex` は付けない	表示専用なのでフォーカス不要。`role="slider"` とも混同しない。

実装：推奨パターン（Good）

良い例 / 推奨

まずはネイティブの <meter>。label を結ぶだけで role・値・範囲が揃い、色分けも得られます。

マークアップ:

<label for="disk">ディスク使用率</label>
<meter
  id="disk"
  min="0"
  max="100"
  low="60"
  high="85"
  optimum="0"
  value="72">72%</meter>
<!-- 中身の「72%」は <meter> 非対応ブラウザ向けのフォールバック表示 -->

デザイン上どうしてもネイティブが使えないときだけ、role="meter" で自作します。フォーカスもキーボード処理も不要で、値が変わったら属性を更新するだけです。

<!-- ネイティブ <meter> が使えない見た目要件のときだけ自作する -->
<span id="disk-label">ディスク使用率</span>
<div role="meter"
     aria-labelledby="disk-label"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-valuenow="72"
     aria-valuetext="72%（残り 28%）"
     class="meter">
  <span class="meter-fill" style="width:72%"></span>
</div>
<!--
  表示専用なので tabindex も role="slider" も付けない。
  値が変わったら aria-valuenow / aria-valuetext を更新するだけ。
-->

アンチパターン（Bad）

下は色付きのバーを <div> で描いただけのものです。目で見ればそれっぽいですが、スクリーンリーダーには何も伝わりません。

div のバーだけで作った壊れたメーター

ディスク使用率

確認しよう：スクリーンリーダーでは role も値も無いため、ここに『ディスク使用率 72%』があること自体が伝わりません（ただの飾りのバー扱い）。

<!-- ❌ アンチパターン：ただの色付き div -->
<span>ディスク使用率</span>
<div class="track">
  <div class="fill" style="width:72%"></div>
</div>
<!--
  role="meter" も aria-valuenow も無い。
  値（72%）も範囲も名前も読み上げられず、
  色だけで状態を示している（色覚特性のある人に伝わらない）。
-->

悪い例 / 避ける

この実装の問題点:

役割が無い — role="meter" も <meter> も無く、計測値だと認識されない。
値・範囲が伝わらない — aria-valuenow / valuemin / valuemax が無く「72%」が読まれない。
名前が結びついていない — バーと「ディスク使用率」が関連付けられていない。
色だけに依存 — 数値やテキストの併記が無く、色が見えない人に伝わらない。

実装チェックリスト

「進捗」ではなく「既知の範囲の現在量」だと確認した（progressbar と取り違えていない）
まずネイティブ <meter> を検討した（最優先）
メーターに名前がある（<label for> または aria-label(ledby)）
自作時は role="meter" + aria-valuemin/max/now がある
値が変わったら aria-valuenow（と aria-valuetext）を更新している
表示専用なので tabindex を付けていない（キーボード操作は無い）
状態を色だけに頼らず、数値やテキストでも伝えている

原文（英語）:Meter Pattern — W3C APG（新しいタブで開きます）