スクリーンリーダーで読めないプログレスバーとメーター

バーにはロールも名前も値もないため、スクリーンリーダーにはファイル名のあとに何もありません。「アップロード完了」も、表示されるだけで読み上げられません。ここでの upload() はサイト独自のアップロード処理を表し、XMLHttpRequest の upload の進捗イベントのように、送信中に割合を知らせるものとします。

ブラウザーにとって progress はプログレスバーです。labelが名前になり、max に対する value が支援技術に伝わるため、スクリーンリーダーで移動すると、名前、ロール、値が読み上げられます。要素の中のテキストは、バーを描けないブラウザー向けの代わりの表示で、名前にはなりません。ステータス領域は最初から空のままページにあるため、メッセージは控えめに、4分の1ずつ読み上げられ、最後に「report.pdfをアップロードしました」と読まれます。代わりに見た目の自由は減ります。バーはブラウザーが描くため、色を変えるには ::-webkit-progress-value や ::-moz-progress-bar のような、ブラウザーごとの疑似要素が必要です。

3つとも、バーの進み具合を最新の言葉で伝え、同じステータス領域で区切りと終了を知らせます。HTML標準の progress 要素は、コードが最も少なく済みます。ロール、labelからの名前、値はブラウザーが用意し、スクリプトは value を設定するだけです。疑似要素で見た目を整えられるなら、これを選びます。独自のロールなら、デザインのとおりにバーを描けますが、塗りと一緒に属性を保つのはスクリプトの役目です。差し替えられないコンポーネントのバーや、土台と塗り以上の表現が必要なデザインに向いています。値をテキストで書く方法は、既存のバーへの変更が最も小さく、誰にでも数字が見えます。バーの周りの文言は変えられても、バーそのものは変えられないときに選びます。その場合、スクリーンリーダーにはプログレスバーとして伝わらず、NVDAが進み具合に応じて鳴らすビープ音もなくなることを受け入れることになります。

1%ごとではなく、区切りで伝えます。 アップロードは何十回も進捗イベントを出し、そのたびにステータスメッセージを出すと、利用者は数字の列を聞き続けることになります。数秒で終わる処理なら、4分の1ごとが合います。大きなエクスポートのような長い処理では、10秒ほどごとか、「準備中」「アップロード中」「処理中」のような段階ごとに伝えます。2〜3秒で終わるなら、終了だけを伝えます。バーや、バーと一緒に変わる割合の表示に aria-live を付けないでください。変化がすべて読み上げられます。テクニックARIA25のようにバーのそばにライブのテキストを置く方法は、スクリプトがそのテキストを区切りでだけ更新するなら使えます。

割合ではなく手順の場合。 チェックアウトや会員登録で「ステップ2/4」をバーで示す場合、値は割合ではありません。スクリーンリーダーは aria-valuenow を割合として読むことが多く、1〜4の範囲の2が「2パーセント」と読まれることがあります。role="progressbar" に aria-valuetext="ステップ2/4：お届け先" を設定するか、手順をリストで示し、今の手順に aria-current="step" を付けます。リストのほうがバーより多くを伝えられます。

量が分からない場合。 どこまで進んだか分からないなら、値を省きます。value 属性のない progress 要素や、aria-valuenow のない role="progressbar" は、何かが進行中であることだけを示す不確定の状態です。これは読み込み中の表示であり、読み上げられない読み込み中の表示で別のパターンを扱っています。

メーター。 メーターは、使用中のストレージやパスワードの強度のように、決まった範囲の中の測定値を示すもので、作業の進み具合を示すものではありません。HTMLの仕様も、プログレスバーに meter を使わないよう定めています。名前は progress と同じようにlabelで付けます。たとえば <label for="storage">使用中のストレージ</label> のあとに <meter id="storage" min="0" max="10" value="7.2"> を置きます。メーターの読み上げはスクリーンリーダーによってばらつきがあります。2022年に公開されたテストでは、NVDAはメーターをプログレスバーと読み、macOSのVoiceOverはスタイルを付けたメーターを飛ばし、どれも低い値や高い値の区切りを読みませんでした。そのため、値をメーターのそばにテキストでも書き（「7.2 GB / 10 GB」）、色の意味も言葉で示します（「強度：弱い」）。独自のメーターには role="meter"、名前、aria-valuenow、aria-valuemin と aria-valuemax（既定値は0と100）、単位を含む aria-valuetext を付けます。

色と強制配色。 値を示すのが塗りだけの場合、塗りは意味を持つ図形なので、土台に対して3:1のコントラストが必要です。コントラストが足りない入力欄・アイコン・フォーカス枠を参照してください。background-color で描いた塗りは、背景が置き換えられる強制配色のテーマでは消えてしまいます。@media (forced-colors: active) の中で background-color: CanvasText を指定します。