Demos

These demos may contain work-in-progress code that isn't ready for production. Always run accessibility testing over widgets before deploying them to your production sites.

Styled Checkboxes

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

This mobile-friendly table is accomplished with pure CSS and HTML, though Javascript can be helpful if you don't have full access to the table source. Since the solution is CSS-based, it can be triggered on small screens with media queries, though for this demo we've linked the style change to a button.

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…