I'm trying to find out if markup looks something like:
<label for="cc">Credit card</label>
<input type="text" placeholder="Credit card" id="cc">
Is there a scenario where "Credit card" will be announced twice by the screen reader?
I understand that the behavior might be different depending on the combination of browsers/screen readers, so I wonder if the general suggestion is to use only the label
and to avoid duplication of the same text in placeholder
.
There's nothing wrong with using placeholder text used in conjunction with a label. The problem is when the placeholder attribute gets used as a replacement for a label. Some screen-reader/browser combinations may read the placeholder in addition to the label, but I don't believe that's anything to be concerned about.
" 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
It's also worth noting that placeholder text should meet the contrast requirements of WCAG 2.0 SC 1.4.3.
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html