屏幕阅读器占位符问题

Question

我目前正在处理表单的可访问性，并且在输入文本框上遇到了占位符的问题。 输入的HTML是

<input type="text" placeholder="Email Address" maxlength="100" size="40" id="p_email" name="Contact::ContactEmail" />

在Chrome（ ChromeVox ）上使用屏幕读取扩展程序对此进行测试后，正在读出的文本听起来像是：

电子邮件地址内的电子邮件地址[暂停1秒钟]编辑文本

如果删除占位符属性，则被读出的文本变为：

电子邮件地址[暂停1秒]编辑文字

• 那么有什么方法可以使屏幕阅读器不考虑placeholder属性？
• 另外，我可以使屏幕阅读器最后不说“编辑文本”吗？

Answer 1

ChromeVox是一种方便的开发人员工具，但是大多数需要屏幕阅读器的用户都使用JAWS或NVDA。 每个屏幕阅读工具可能会以不同的方式对待占位符，阅读方式和阅读方式可能取决于您的标记，尤其是两侧的标签。

理想情况下，即使该标签不在屏幕上，您也应该在输入上使用标签以及aria-labeledby。

“编辑文本”向用户表明他们能够编辑文本，您不想更改此功能。

<label id="the-email-label" for="p_email">Email Address</label>
<input type="text" placeholder="Email Address" maxlength="100" size="40" id="p_email" name="Contact::ContactEmail" aria-labelledby="the-email-label"/>