Checkboxes — Accessibility Specification

Code Examples (HTML, ARIA, JS)

<!-- Native checkbox with label -->
<input type="checkbox" id="news" name="news">
<label for="news">Send me product updates</label>

<!-- Grouped checkboxes with fieldset/legend -->
<fieldset>
  <legend>Notification channels</legend>
  <label><input type="checkbox" name="ch" value="email"> Email</label>
  <label><input type="checkbox" name="ch" value="sms"> SMS</label>
  <label><input type="checkbox" name="ch" value="push"> Push notifications</label>
</fieldset>

<!-- "Select all" (tri‑state) -->
<label><input type="checkbox" id="all"> Select all</label>
<label><input type="checkbox" class="item"> Item 1</label>
<label><input type="checkbox" class="item"> Item 2</label>
<script>
  const all = document.getElementById('all');
  const items = Array.from(document.querySelectorAll('.item'));
  function syncAll() {
    const checked = items.filter(i => i.checked).length;
    all.indeterminate = checked > 0 && checked < items.length;
    all.checked = checked === items.length;
  }
  items.forEach(i => i.addEventListener('change', syncAll));
  all.addEventListener('change', () => items.forEach(i => i.checked = all.checked));
  syncAll();
</script>

<!-- Custom checkbox (only when native cannot be used) -->
<div role="checkbox" aria-checked="false" tabindex="0" id="cbxCustom">Email me weekly tips</div>
<script>
  const c = document.getElementById('cbxCustom');
  function toggle(e) {
    const v = c.getAttribute('aria-checked') === 'true';
    c.setAttribute('aria-checked', String(!v));
  }
  c.addEventListener('click', toggle);
  c.addEventListener('keydown', (e) => { if (e.code === 'Space') { e.preventDefault(); toggle(); } });
</script>