スクリーン リーダー (NVDA) で通貨の値 (米ドル) $47.49 を "47 ドル 49 セント" と読み取ろうとしていますが、スクリーン リーダーは通貨の値を "ドル 4749" と読み取っています。
<div class="perVendorCarDetails">
<span class="carCurrencySymbol">$</span>
<span class="carPriceDollar">38</span>
<span class="carPriceDot">.</span>
<span class="carPriceCents">57</span>
</div>
あなたの例は、NVDA/Firefox によって「ドル 38 ドット 57 7」として話されています。これは良くない。
単純にコード化すると<p>$38.57</p>、「ドル 38.5 7」と読みます。不快に思われるかもしれませんが、これは NVDA ユーザーが期待することです。
たとえば、Amazon に行くと、「ドル 1 ポイント 2 ナイン」が$1.29になります。かなり広く報道されたアクセシビリティ訴訟を経て、アクセシビリティ コンサルティング会社を雇い、アクセシビリティ チームを構築し、スクリーン リーダーを使用して広範なテストを実施した Target は、 39.99 ドルを「ドル39.99ナイン」と発表しました。
したがって、最も重要なことは、NVDA ユーザーがお金を使いたいときに混乱させないことです。彼らが期待するものとは異なる方法でドルの価値を提示することで、それが可能になります。
ただし、これが絶対に起こらなければならないことに固執している場合は、 を使用aria-hiddenして、気に入らない値を NVDA から非表示にし、その後のページに必要なフレーズを書き込んで、offを介して他のすべてのユーザーから非表示にすることができます。 -screen CSS テクニックはまさにこれを行うことを目的としています。
新しい HTML:
<p aria-hidden="true">
$38.57
</p>
<span>38 dollars and 57 cents</span>
明らかに、金額を 2 つの変数に分割し、それぞれを 2 回書き込む必要があります。
はスクリーン リーダーからテキストをaria-hidden="true"非表示<p>にするため、スクリーン リーダーは にあるものだけを読み上げます<span>。
<span>のコンテンツをユーザーから非表示にする CSS は次のとおりです。
p[aria-hidden=true] + span {
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
要素、ID、クラスなどに基づいてセレクターを変更する必要があることは明らかです。
aria-label 属性を使用できます。
<span aria-label="47 dollars and 49 cents">$47.49</span>