axe-core rule: form-field-multiple-labels
Form fields have multiple conflicting labels
What it is
A form field is associated with more than one label element. Assistive technology may announce only one of them, and which one varies by screen reader.
Who it blocks
Screen reader users may hear the wrong label, or only part of the intended instruction, and fill in the wrong information.
How to fix it
Keep exactly one label per field. Move any extra hint text into a separate element referenced via aria-describedby.
Example fix
<!-- Before -->
<label for="phone">Phone</label>
<label for="phone">Include area code</label>
<input id="phone" type="tel">
<!-- After -->
<label for="phone">Phone</label>
<input id="phone" type="tel" aria-describedby="phone-hint">
<span id="phone-hint">Include area code</span>This is one of the barrier types BarrierScan checks for on every scan. Request a free accessibility scan to see whether it appears on your site, alongside the rest of the automated findings.