Excessibility.LiveViewRules.Rules.HiddenFormControlWithoutAria (Excessibility v0.14.0)

View Source

Flags 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>