标签和占位符可访问性
Label and placeholder accessibility
我想知道标记是否类似于：
<label for="cc">Credit card</label>
<input type="text" placeholder="Credit card" id="cc">
有没有"Credit card"会被屏幕reader宣布两次的场景？
我知道根据 browsers/screen reader 的组合行为可能会有所不同，所以我想知道一般建议是否只使用 label 并避免placeholder.
中的相同文本重复
将占位符文本与标签结合使用没有任何问题。问题是当占位符属性被用作标签的替代品时。某些 screen-reader/browser 组合可能会读取标签之外的占位符，但我认为这没有什么值得担心的。
" A placeholder attribute should not be used as an alternative to a label. The placeholder is a short hint intended to aid the user with data entry so it should not be identical to the label element. The placeholder may not be available to assistive technology and thus may not be relied upon to convey an accessible name or description"
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
我想知道标记是否类似于：
<label for="cc">Credit card</label>
<input type="text" placeholder="Credit card" id="cc">
有没有"Credit card"会被屏幕reader宣布两次的场景？
我知道根据 browsers/screen reader 的组合行为可能会有所不同，所以我想知道一般建议是否只使用 label 并避免placeholder.
将占位符文本与标签结合使用没有任何问题。问题是当占位符属性被用作标签的替代品时。某些 screen-reader/browser 组合可能会读取标签之外的占位符，但我认为这没有什么值得担心的。
" A placeholder attribute should not be used as an alternative to a label. The placeholder is a short hint intended to aid the user with data entry so it should not be identical to the label element. The placeholder may not be available to assistive technology and thus may not be relied upon to convey an accessible name or description"
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