屏幕閱讀器占位符問題

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