如何清晰地为屏幕阅读器标注数字输入格式？

Question

我正在寻找一种方便的方法来定义接受整数或小数金额的字段。输入字段有两种类型：一个简单的<input>，用于小数值（美元和分），以及一个带有结尾“ .00”表示需要整数（仅美元）的<input>。

例如：

由于“ .00”不在<label>中，因此无法被屏幕阅读器读取。我不得不使用一个丑陋的hack使其可访问：

<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>

尽管这个span被隐藏了，但当输入框获得焦点时，JAWS会读取它。更可访问和语义化的方式是什么，可以告诉辅助技术所请求的数字格式呢？

一些注意事项：

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

- craigpatik

Answer 1

假设您的字段都是来自同一个理论上的`

`，我有一些建议给您：

1. 在标签中明确指定类型。 如果您有多个金额需要在应用程序中输入，其中一些需要小数点后几位，而其他仅需要整数美元，请为每个金额确定清晰的名称，并在相应的标签内始终使用它们。

   最简单的形式就是将“Amount owed”更改为“dollars and cents owed”或“whole dollars owed”。

2. 在第二个标签中添加说明。 HTML``元素已经拥有`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>

- DougM

---

我喜欢第二个例子！第一个例子虽然理想，但不幸的是我无法更改标签文本。 - craigpatik

很遗憾，JAWS无法读取两个标签，只能读取第一个，因此第二种解决方案不起作用 :( - craigpatik

你能否将<label>标签包裹在<input>标签周围，并将指令包裹在<label>标签内的<span>标签中，以便您可以对其进行不同的样式设置？ - DougM

不，它们位于不同的<div>中，这些<div>不是直接兄弟节点，而且改变这种结构也不切实际。我以前做过类似的事情，将一个隐藏的span嵌套在标签内部——虽然可以工作，但很笨重。 - craigpatik

Answer 2

为什么不使用"Title"属性。在上，"Title"属性可以被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中，标题将覆盖标签，在其它读取器中会同时读取两者，因此需要在标题属性中重复标签文本。

- Atometa

---

我已经考虑过这个选项，因为在JAWS中它的阅读效果很好，但是我认为@DougM的第二个解决方案更语义化，因为它使用了<label>，而我真正想做的是正确地标记字段。 - craigpatik

更新：虽然这种方法不太语义化，但JAWS实际上会读取title（正如您所指出的），但不会读取双标签解决方案。 - craigpatik

我在以前的网络项目中使用过类似的东西。确实它不太语义化，但是JAWS可以看到它，而且我们的反馈选项中也没有客户抱怨它。 - Courtney Jordan

Answer 3

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

- Andre Polykanine

Answer 4

使用HTML 5的输入模式属性，例如pattern="[A-Za-z]{3}"将会得到一个只允许3个字符且不包含数字或特殊字符的输入框，pattern属性中的文本只是一个正则表达式。

- Edward Verenich

---

但是JAWS不能解释正则表达式并用简单的英语宣布它，比如“此字段仅允许数字”。 - craigpatik

如果您能够创建一个带有pattern属性的DOM输入元素，那么它不必要，HTML 5兼容浏览器将解释它，但是只有当您尝试提交表单时才会看到错误，我刚在chrome中测试了普通输入字段。 如果您需要立即验证（当用户输入时），则需要一些额外的js或使用类似Abide表单验证的东西。 - Edward Verenich

我不担心验证，但是我希望屏幕阅读器在它获得焦点时立即向用户描述该字段。 - craigpatik