标签和占位符可访问性

时间:2018-02-01 20:13:56

标签: html label html-form placeholder screen-readers

我试图找出标记是否类似于:

<label for="cc">Credit card</label>
<input type="text" placeholder="Credit card" id="cc">

是否会出现屏幕阅读器两次宣布“信用卡”的情况?

据我所知,根据浏览器/屏幕阅读器的组合,行为可能会有所不同,所以我想知道一般建议是仅使用label并避免{{1}中相同文本的重复}}

1 个答案:

答案 0 :(得分:2)

使用与标签结合使用的占位符文本没有任何问题。问题是当占位符属性被用作标签的替代品时。除了标签之外,一些屏幕阅读器/浏览器组合可能会读取占位符,但我不相信这是值得关注的。

  

“占位符属性不应用作标签的替代。占位符是一个简短的提示,旨在帮助用户进行数据输入,因此它不应与标签元素相同。占位符可能无法用于辅助技术,因此可能不依赖于传达可访问的名称或描述“

     

https://www.webaccessibility.com/best_practices.php?best_practice_id=2440

值得注意的是,占位符文本应符合WCAG 2.0 SC 1.4.3的对比度要求。

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html