<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.
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
: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.
: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.
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.