标签和占位符可访问性答案

【问题标题】：Label and placeholder accessibility标签和占位符可访问性
【发布时间】：2018-07-12 06:20:47
【问题描述】：

我正在尝试找出标记是否类似于：

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

是否存在屏幕阅读器会提示两次“信用卡”的场景？

我知道行为可能会因浏览器/屏幕阅读器的组合而有所不同，所以我想知道一般建议是否只使用 label 并避免在 placeholder 中重复相同的文本。

【问题讨论】：

标签： html label forms placeholder screen-readers

【解决方案1】：

将占位符文本与标签结合使用并没有错。问题是当占位符属性被用作标签的替代品时。除了标签之外，一些屏幕阅读器/浏览器组合可能会读取占位符，但我认为这没什么好担心的。

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

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

【讨论】：

谢谢，乔希。 “占位符是一个简短的提示，旨在帮助用户输入数据，因此它不应与标签元素相同。”是我一直在寻找的关键部分。我认为如果他们的读者在标签后重复占位符，用户听到每个字段的重复公告会很烦人。如果表单有很多这些字段，我认为与仅使用标签的场景相比，用户体验可能不是很好。如果有可访问性专家可以确认这种行为对于当今使用的辅助技术是否普遍存在，那就太好了。