Custom-style checkboxes that retain labels for usability and accessibility.
Checkboxes are clipped so as to be accessible to screen readers, then replaced with an empty :before element in the checkbox label that can be given checked and unchecked styles. Since the "fake" checkbox is contained inside the label, clicking it will check or uncheck the checkbox appropriately.
Mobile-friendly stacked table
Press the "Toggle mobile styles" button to switch between normal table and mobile-…
Star rating widget (no JS)
This widget for a "star rating" form element uses hidden radio buttons to enhance accessibility. The stars are background images of the radio labels, which use off-screen text to remain screen reader compatible. The widget has keyboard support, but the interaction for sighted keyboard users will be slightly difficult as the stars are reversed from LTR to RTL.
Keyboard accessible hamburger menu
A keyboard-accessible dropdown menu, designed for mobile sites. Allows for normal menu links and expandable submenus, mixed interchangeably. Fully keyboard accessible, implemented to the WAI-ARIA 1.1 menu/menubar specification. Screen reader accessible through use of visually hidden text and ARIA attributes.
Implemented here with the menu title as its opening button, but could easily…