屏幕 Reader 占位符问题

Question

我目前正在研究表单的辅助功能，并且遇到了输入文本框占位符的问题。输入的HTML是

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

在 Chrome (ChromeVox) 上使用屏幕阅读扩展进行测试时，正在读出的文本听起来像：

Email address within Email address [pause for 1 second] Edit Text

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

Email address [pause for 1 second] Edit text

那么有什么办法可以让屏幕reader不带 placeholder 考虑属性？
还有，我可以让屏幕reader最后不说"Edit text"吗？

Answer 1

ChromeVox 是一个方便的开发者工具，但大多数需要屏幕的用户 reader 使用 JAWS 或 NVDA。每个屏幕阅读工具可能会以不同方式处理占位符，以及如何以及是否阅读它可能取决于您的标记，尤其是两侧的标签。

理想情况下，即使该标签位于屏幕外，您也应该在输入中使用标签和 aria-labelledby。

"Edit text" 向用户表明他们可以编辑文本，您不想更改此功能。

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

屏幕 Reader 占位符问题

Screen Reader Placeholder Issue

html

screen-readers