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

Question

我正在寻找一种可访问的方式来定义一个字段是接受整数还是十进制数量。输入字段有两种：简单<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>

（即使隐藏了范围，当输入有焦点时，JAWS会读取它。）

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

一些注意事项：

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

Answer 1

假设您的字段是同一理论<form/>中的示例，我会为您提供一对建议。

1. 清楚地指定标签中的类型。如果您有多个必须在应用程序中输入的金额，其中一些需要小数美分，而其他只需要全部美元，您应该确定每个名称的明确名称，并在适当的标签内一致且专门地使用它们。

   最简单的形式就像将“欠款”更改为“所欠美元和美分”或“欠下全部美元”一样简单

2. 在第二个标签中添加说明。 HTML <label>元素多年来一直有for属性，没有理由你没有秒每个表单的标签，带有特定的数据输入指令。 （将这些辅助标签赋予不同的CSS类以便对它们进行不同的样式将完全适用。）

举例来说：

<p>
  <label for="txtOwed">Whole Dollars Owed</label>
  <input id="txtOwed" name="txtOwed" type="text" />
  <label for="txtOwed" class="instruct">Enter whole dollars only.</label>
</p>

Answer 2

为什么不使用Title属性。在＆lt; input type =“text”/＆gt;标题属性由JAWS和大多数其他读者阅读。所以扩展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>

我相信标题会覆盖JAWS中的标签，而其他读者会读取这两个标题，因此标题属性中的标签文本会重复。

Answer 3

我建议使用placeholder属性。当使用Tab或快速导航键移动时，JAWS会读取它。

Answer 4

使用HTML 5输入模式属性，例如pattern =“[A-Za-z] {3}” 将导致输入只允许3个没有数字或特殊字符的字符，模式属性中的文本只是一个正则表达式。