Accessibility

For designers

• All states (default, hover, selected, disabled, focus) must maintain accessible contrast.
• Focus styles must remain visible and meet WCAG AA contrast requirements. Focus should be clearly distinguishable from hover.
• Colour tokens used should be semantic (e.g. foreground/neutral/default) rather than fixed values. This ensures the component adapts correctly to different themes or surfaces.
• The interactive area (checkbox + label) must be large enough to support touch accessibility.

For developers

To ensure the Checkbox meets WCAG 2.1 AA and supports assistive technologies, follow these implementation standards:

1. Semantic HTML
   • Use a native <input type="checkbox"> element. Do not recreate checkboxes using <div> or <span>.
   • The checkbox must be associated with a <label> using the for attribute or by wrapping the input inside the label.
   • Avoid adding click handlers to non-semantic elements to toggle the checkbox.
2. Keyboard Navigation
   • The checkbox must be reachable using Tab navigation.
   • Users must be able to toggle the checkbox using Space.
   • Do not override default keyboard behaviour unless providing a fully accessible alternative.
3. Focus Ring / Visible Focus
   • The checkbox must display a visible focus style when focused via keyboard.
   • The focus indicator must be clearly distinguishable and not rely only on colour.
   • Never remove the browser default focus outline unless replacing it with an accessible equivalent.
   • Focus styles must remain visible even when the checkbox is hovered or checked.
4. Screen Reader Support
   • The checkbox label must clearly describe the option or action it represents.
   • Use aria-describedby when additional helper text or error messages are present.
   • The checked and unchecked states must be correctly announced by assistive technologies.
   • If the checkbox is disabled, ensure the disabled state is conveyed programmatically.
5. Interaction Feedback
   • The checked state must be communicated via the native checked attribute.
   • Visual changes (check icon, background, border) should reinforce state changes.
   • Avoid relying solely on colour to indicate checked or unchecked status.
   • Error states must be clearly communicated visually and programmatically.
6. Responsive and Tap Targets
   • The interactive area (checkbox + label) must be at least 44 px in height to support touch accessibility.
   • Ensure sufficient spacing between checkboxes when presented in a list to avoid accidental activation.

Semantic markup

Use a native <input type="checkbox">. The <label> wrapping pattern keeps the label clickable and announced by screen readers. Do not replace checkbox behavior with non-semantic elements.

Keyboard interaction

• Tab moves focus to each checkbox.
• Space toggles checked/unchecked.
• Focus visibility is handled by the tng-focus-within utility.

Keys	Actions
Tab	Moves focus on the element or outside
Space	Activate or deactivate the element

Label and supporting text

Each checkbox needs a clear visible label. If additional helper or error text is present, connect it with aria-describedby.

Indeterminate state

There is no HTML attribute for the indeterminate state — set it via JavaScript (checkbox.indeterminate = true). Screen readers announce it as “mixed”.