Search Input

This search form uses role, a visually hidden label that's still readable for a screen reader, input type, and a button.

CSS styled checkbox inputs

These checkbox inputs use only CSS with native elements and no additional elements to manage animations on hover, focus, active and checked states.

Choose multiple options:

Native HTML Details/Summary Expander

The details/summary element natively allow an area of content to be expanded and collapsed with user interaction. Expanded/collapsed states are built in, as is tabindex/keybaord interaction

Details Something small enough to escape casual notice.

Responsive horizontal product kiosk

The scrolling element will always make the last item fit partly outside the container.

CSS styled checkbox toggle switches

These checkbox inputs use only CSS with native elements and no additional divs or spans to manage animations on hover, focus, active and on/off states.

Choose your options:

Select styled with CSS

This select uses minimal extra markup and CSS to create a stylized select with hover and focus states.

CSS styled radio inputs

These radio inputs use only CSS with native elements and no additional elements to manage animations on hover, focus, active and checked/selected states.

Which is your favorite NATO letter:

More CSS styled radio inputs

These horizontal radio inputs use only CSS with native elements and no additional elements to manage animations on hover, focus, active and checked/selected states.

Choose your size:

Table

This table uses a figure element to build a relationship between the data, the author and the source.

Morse Code and NATO Phoenetic Alphabet Chart
Letter A B C D E F G H I J K
Morse .- -... -.-. -.. . ..-. --. .... .. .--- -.-
NATO Alpha Bravo Charlie Delta Echo Foxtrot Golf Hotel India Juliet Kilo
Source: Juliet, Whiskey Tango Foxtrot

Accordion "Radio" Group

This accordion radio group uses checkboxes with role="radio" and minimal jQuery to act like radio inputs

Choose your plan:

Accordion checkbox group using native details/summary expander

Activate your favorite NATO letters
Alpha is the first letter of the NATO alphabet
Bravo is the second letter of the NATO alphabet
Charlie is the best letter of the NATO alphabet

No JS Filter Accordions

This group of filters uses native HTML elements: fieldset, legend, details, summary and checkbox to create a series of filters. Aria was added to the fieldset to reinforce the group relationship as some screen readers don't pick up on it.

Filter by operating system

Date option selection using radio buttons

This radio group and separate datepicker appear to be a singular module, but are separate inputs.

Select an effective date:

Date option selection using a checkbox

This version uses a single checkbox that toggles the disabled attribute on the datepicker.

Select an effective date

A Bunch of Input Elements

Enter all of your personal information

Payment Information

These elements should use minimal masking that does not interfere with a screenreader user.

Enter your payment information
Range Inputs

Styling ranges is very difficult across browsers, and is a good case for using custom elements.

Specialized Inputs

Progress bar

Uses the progress native element. It's difficult to style across browsers and is a good use case for a custom element.

25%
Comments and Feedback

Let us know what you think

Blockquote

This blockquote uses a figure element to build a relationship between the quote, the author and the source.

Accessibility is not a requirement.
It's a design tool.
Derek Featherstone, SimplyAccessible.com

Comparison Chart

This comparison chart is responsive and uses unordered lists to structure content.