Accessible Styled Form Controls

Styled HTML Checkboxes

Last updated:

Cross-browser styling for native HTML checkboxes.

Pattern Demo

My related checkboxes

Pattern Details

Pattern Markup
<div class="c-cb">
  <input type="checkbox" name="c_input" id="c_input_1" checked>
  <label for="c_input_1">
    Option 1
  </label>
</div>

When customizing any form control, it must remain accessible to assistive technology and keyboard users. To keep this custom style accessible, a visually hidden checkbox form control is the cornerstone of the custom style.

Without the visually hidden checkbox input, all checkbox functionality, including keyboard focus and appropriate announcements to screen readers, would need to be rewritten using JavaScript and necessary ARIA attributes. This would significantly inflate the development effort needed to code a custom checkbox.

The wrapping div.c-cb's primary purpose is to act as a styling hook. It utilizes position: relative; to keep absolute positioned child and pseudo elements within the confines of the component.

The form control's label :before and :after pseudo elements are used to create a visual "check" effect that can be styled via CSS.

The appearance of the custom checkbox is determined by the state of the native checkbox. :checked, and :focus states, along with the form control's disabled attribute all serve as hooks to visually change the styling of the custom checkbox.

Affects on Screen Reader Announcements?

Since the native checkbox remains in the DOM, and is used as the focusable element that controls the state of the custom visualization, there are no alterations to how a screen reader announces styled checkboxes.

Continue reading

For additional information about creating minimal markup patterns for radio button and checkboxes, you should check out Under-Engineered Custom Radio Buttons and Checkboxen, by Adrian Roselli.