Excessibility.LiveViewRules.Rules.HiddenFormControlWithoutAria (Excessibility v0.14.0)
View SourceFlags visually hidden <input type="checkbox"> / <input type="radio">
elements used as the programmatic backing for custom UI, when the
visual replacement does not communicate checked state via ARIA.
What's flagged
An <input type="checkbox|radio"> whose class attribute contains
hidden or sr-only, whose enclosing <label> ancestor (if any)
does not carry aria-checked, aria-pressed, role="checkbox", or
role="radio". If no <label> wraps the input, the input is flagged
because screen readers will see an unlabeled, hidden control.
This rule is deliberately conservative; the issue tracker notes this pattern is "harder to detect reliably."
Fix
<!-- Bad -->
<label class="chip">
<input type="checkbox" class="hidden" name="color[]" value="red" checked />
Red
</label>
<!-- Good -->
<label class="chip" role="checkbox" aria-checked="true">
<input type="checkbox" class="hidden" name="color[]" value="red" checked />
Red
</label>