如何清楚地标记屏幕阅读器的数字输入格式?

cra*_*tik 6 html forms accessibility screen-readers

我正在寻找一种可访问的方式来定义字段是否接受整数或小数.输入字段有两种类型:一个简单<input>表示十进制值(美元和美分),一个<input>表示尾部".00"表示需要整数(仅限美元).

例:

屏幕截图的两个数字字段

由于".00"不在其中,<label>因此屏幕阅读器将无法读取.我不得不使用丑陋的黑客来使其可访问:

<label>Total amount due ($): <span style="display:none;">Please enter dollars and cents</span></label>
<label>Amount owed ($): <span style="display:none;">Please enter a dollar amount</span></label>
Run Code Online (Sandbox Code Playgroud)

(即使隐藏了跨度,当输入具有焦点时,JAWS将读取它.)

什么是更方便和语义的方式来通知辅助技术正在请求数字格式?

一些说明:

  • 在我的情况下,如果我需要一个整数,允许用户输入"123.45",然后在服务器上将其四舍五入为"123"是不可接受的.
  • 没有客户端验证,因此如果用户输入错误类型的值,页面将返回该字段上的描述性错误消息.
  • 输入不能type="number"归因于浏览器插入的控件.

小智 4

为什么不使用 Title 属性。在 <input type="text"/> 上,JAWS 和大多数其他读取器都会读取 title 属性。因此,扩展 DougM 的答案,例如

<label for="txtTotal">Total amount due ($): 
<input type="text" id="txtTotal" 
title="Total amount due. Please enter dollars and cents." />
</input> 

<label for="txtAmountOwed">Amount Owed($): 
<input type="text" id="txtAmountOwed" 
title="Amount owed. Please enter a dollar amount." />
</input>
Run Code Online (Sandbox Code Playgroud)

我相信标题将覆盖 JAWS 中的标签,并且其他读者将读取两者,因此标题属性内的标签文本会重复。