View on GitHub

a11y_styled_form_controls

Various styled accessible form controls

The Accessibility of Styled Form Controls & Friends

A repository of styled and “styled” form control patterns, and how they are announced by screen readers.

Why?

Form controls are necessary in many interfaces, but are often considered annoying, if not downright difficult, to style. Many of the markup patterns presented here can serve as a baseline for building more attractive form controls without having to exclude users who may rely on assistive technology to get things done.

In some cases, there may be a lack of support, or complications that arise when controls are styled. Those instances will be noted as well.

How to use?

Largely, many of these form controls can be copied and pasted into your pattern library, project, or pattern library project. Each form control has its own CSS file, and only when needed, JavaScript file. Each form control shares the –demo-only–.css and –shared–.css files. These files are largely only needed for presenting on these demo pages, and much of the shared styles are merely ports of a few normalize.css selectors.

Wait, JavaScript?

Yes, while many of these form controls can be styled with some thoughtful maneuvering of markup and CSS, controls such as file uploads, toggle buttons and switches need a bit of JavaScript (and sometime ARIA) to function and correctly convey state.

The Different Form Elements

The following controls and elements each have demo pages with additional documentation pertaining to implementation, UX, and screen reader announcements.

Regarding screen reader announcements...

Note the documentation of screen reader announcements is based on using the indicated versions of each screen reader and browser, per test. The test results are up to date per the "updated" date on each test page.

Things may change as browsers and screen readers are updated, so please refer to these as a snapshot in time, rather than being definitive results.

If you find that announcements have changed, please file an issue!

Checkboxes and Radio Buttons

Styled HTML checkboxes, and radio button patterns.

Checkboxes can be used as a single form option, or grouped with similar checkboxes. Within a group, one or more checkboxes may be checked by the user. In contrast, radio buttons provide users two or more options to choose from, but only one option may be chosen from a single radio button grouping.

  1. Styled Checkboxes
  2. Styled Radio Buttons
  3. Radio Button Star Rating
  4. Radio Button Pill

Switches & Toggle Buttons

Switches are a type of form control that are often visually represented as an on/off toggle. A toggle button may be styled similarly, or as a button that has a clear difference between the default and active (pressed) state. A toggle button is created when a button has the aria-pressed attribute set to true or false.

Unlike checkboxes, which are largely used in the context of forms where a user submits data after filling out all necessary information, switches and toggle buttons can be used to perform an instant change to a component or application’s state. As there is no “switch” in HTML, a checkbox or button element can be progressively enhanced into a switch, with the appropriate ARIA attributes.

  1. Switch Checkbox
  2. ARIA Switch Button (external link)
  3. ARIA Toggle Button
  4. Switch Radio Button Group

File Upload

A styled file upload form control that relies on the native HTML input type="file" for providing the appropriate announcements to screen readers.

A file upload allows users to add one, or more, file(s) to submit with a form.

  1. File Upload

Range Slider

A styled input type="range" form control that takes multiple browser’s CSS implementations into consideration.

Range sliders allow users to select a point, or a scoped range, from a series of data.

  1. Range Slider

Select Boxes

Styled single and multi-select patterns.

Selects allow a user to pick one or more options from a menu of choices.

  1. Select (single)

Progress Bar & Meter

Progress bars indicate the current status of a particular task, or tasks, on a scale of 0 to completion. A meter acts as a gauge and indicates a value within a finite value set.

The progress and meter elements are considered form elements, but they are not focusable form controls.

Unfortunately, neither of these elements are consistently accessible to screen readers. Styling each can actually make them even more inaccessible…

  1. Progress Bar
  2. Meter

Search Component

A search component offers users an easily discoverable way to find information in a website or application.

  1. Search Component

License, Thanks, and such

Everything here is under an MIT license.

Special thanks to Eric Bailey for helping me review many of these components.

While I was unaware of WTFForms when starting this project, it is still a great example of what can be done with only CSS, and served as an excellent baseline to compare against. Thank you mdo and to those involved with that project.

Additional thanks to Josh Drumm, Adrian Roselli, Sara Soueidan, Heydon Pickering, Richard Keizer and Alexander Farkas. They have each provided inspiration or excellent resources that have been quite helpful in the building of these components.