屏幕阅读器占位符问题

Question

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

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

在上铬（ChromeVox）与屏幕测试该读扩展，读出的文本显示听起来像：电子邮件地址内

电子邮件地址[停顿1秒]编辑文本

如果我删除占位符属性，读出文字变为：

个

电子邮件地址[停顿1秒]编辑文本

• 那么，有没有办法让屏幕阅读器不走 placeholder属性考虑吗？
• 此外，我可以让屏幕阅读器不在末尾说“编辑文本”吗？

Answer 1

ChromeVox是一个方便的开发者工具，但大多数需要屏幕阅读器的用户使用JAWS或NVDA。每个屏幕阅读工具可能会以不同方式对待占位符，以及阅读方式和阅读方式可能取决于您的标记，特别是双面标注。

理想情况下，即使该标签位于屏幕外，您应该在输入上使用标签以及aria标签。

“编辑文本”表示用户可以编辑文本，但不想更改此功能。

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