The Accessibility of Styled Form Controls & Friends
A repository of styled and “styled” form control patterns, and how they are announced by screen readers.
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?
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.
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
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
button element can be progressively enhanced into a
switch, with the appropriate ARIA attributes.
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.
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.
Styled single and multi-select patterns.
Selects allow a user to pick one or more options from a menu of choices.
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.
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…
A search component offers users an easily discoverable way to find information in a website or application.
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.