aria-valuenow 属性はrange ウィジェットの現在の値を定義します。

解説

aria-valuenow 属性は、範囲ウィジェットの現在の値を定義します。これは、<progress>、<meter>、およびrange、number と全ての日付型の<input> のvalue 属性に似ています。

非セマンティック要素でmeter、scrollbar、slider、およびspinbutton を含む範囲型ロールを作成する場合、aria-valuenow を使用して最小値と最大値の間である現在の数値を定義できます。最小値と最大値はaria-valuemin とaria-valuemax で定義します。

<p>What year were you born?</p><div  role="spinbutton"  tabindex="-1"  aria-valuenow="1984"  aria-valuemin="1900"  aria-valuemax="2021"  aria-labelledby="birthyearLabel">  <span> 1984 </span>  <span role="button">    <span aria-hidden="true">+</span>    Increment year by 1  </span>  <span role="button">    <span aria-hidden="true">-</span>    Decrement year by 1  </span></div>

可能な場合にはセマンティック HTML 要素を使用してください:

<label for="birthyear">What year were you born?</label><input type="number" value="1984" min="1900" max="2021" />

進行状況バーが不確定な状態にあるときなど、既知の値がない場合には、aria-valuenow 属性を設定しないでください。

aria-valuenow が設定されていない場合は、現在の値に関する情報は示されません。

スライダーやスピンボタンと組み合わせて使用​​すると、支援技術は実際の値をユーザーに通知します。

進捗状況バーおよびスクロールバーと一緒に使用すると、支援技術は値をパーセントとしてユーザーに通知します。aria-valuemin とaria-valuemax が両方とも定義されている場合、パーセント値は範囲内の位置として計算されます。それ以外の場合は、実際の値がパーセントとして通知されます。

通知される値 (実際の値またはパーセント値) がユーザーにとって明確でない可能性がある場合は、aria-valuetext 属性を使用して、値をユーザーフレンドリーに表現する必要があります。設定すると、valuenow の数値の代わりに valuetext の文字列が通知されます。例えば、スライダーが曜日を表し、曜日のaria-valuenow が数字である場合、aria-valuetext プロパティは、スライダーの値が理解できるような文字列 (「月曜日」など) に設定する必要があります。

例

<p>Oven Temperature</p><div  role="meter"   aria-valuenow="205"  aria-valuemin="70"  aria-valuemax="250"  aria-labelledby="temperatureLabel">  <div aria-hidden="true"></div></div>

ARIA の使用に関する第一のルールは、「要素を再利用して ARIA のロールや状態、プロパティを追加してアクセシブルにする代わりに、必要なセマンティクスと動作がすでに組み込まれているネイティブ機能を使用できる場合は、そうする」というものです。

<label for="temperature">Oven Temperature</label><input type="range" value="205" min="70" max="250" step="5" />

<input> を用いてネイティブ HTML セマンティクスを採用すると、スタイルとセマンティクスが簡単に得られます。

値

<number>

最小値と最大値の間の 10 進数。

関連インターフェイス

Element.ariaValueNow

Element インターフェイスの一部である TheariaValueNow プロパティは、aria-valuenow 属性の値を反映します。

ElementInternals.ariaValueNow

ElementInternals インターフェイスの一部である TheariaValueNow プロパティは、aria-valuenow 属性の値を反映します。

関連付けられたロール

使用するロール:

• meter
• scrollbar
• separator
• slider
• spinbutton

継承先のロール:

• meter
• progressbar
• scrollbar
• slider
• spinbutton

仕様書

関連情報

• range ロール
• <input type="range> 要素のvalue 属性
• aria-valuetext
• aria-valuemax
• aria-valuemin.