HTML elements like check buttons, radio buttons or select options can be hard to style with CSS in a custom design. There are many workarounds for this, based on two different approaches:
- Hide the form elements from sight and apply the styling on a container or related element
The tests that these constructions need to pass is:
- is the label attached to the input field with a proper for/id construction
- can the selection be made with keyboard only
- does a screen reader give feedback on the choice made
1: Apply the styling on a container
Some examples of styling form elements using containers or related elements. Not all are fully accessible, but can be adjusted to be.
For select drop downs:
- Style a Select Box Using Only CSS by Bavota
- The alternative to custom styling of the SELECT elements from cssglobe.com
For check boxes and radio buttons:
- Styling check boxes and radio buttons using CSS, Using the checked pseudo-class in CSS3, keyboard accessibility needs improvement here
- CSS3 Checkbox Styles, codepen, not accessible, but can be adjusted into something decent.
Advantage: the native HTML stays the same, so it’s accessible and works for every device.
Disadvantage for select options: the options are not styled, only the select box.
Advantage: all elements can be styled exactly as the designer wants
Select2 is not accessible for screen reader users. They get no feedback on the suggestions and selections. The WordPress Accessibility team did a complete review and since then nothing much happened to improve this. I’ve tested Project Clarity and that is not accessible too.
I found it. The most evil input field on the planet. (No focus state, no keyboard input, no copy paste, random number order…) pic.twitter.com/Jovx52TekV
— Marten Bjork (@martenbjork) November 21, 2017
The first technique (apply the styling on a container) is accessible for all devices because it only uses extra CSS and doesn’t touch the semantics. All the functionality is already there and default handled by the browser.
The days that a website must be pixel perfect and must look the same in every browser are over. There are so many devices these days, that an identical design for all is not doable. Or we must take a huge effort for custom form elements design.