Skip to Main Content
Toggle

Using CSS to Customize Standard Checkboxes and Radio Buttons for an Accessible Interface

Heidi Jungel 04/07/15

Standard HTML radio buttons and checkboxes are often some of the most difficult controls to customize for visual appearance. Authors often resort to alternative methods to implementing these controls rendering them inaccessible to people with disabilities.   Relevant accessibility standards such as the Web Content Accessibility Guidelines (WCAG) 2.0 SC 4.1.2 and address accessibility properties for user interface controls.  The goal is clearly stated in the current Section 508 requirements: “When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.”  Therefore, authors must consider the implications of customizing checkboxes and radio buttons using elements other than the standard input methods.  While ARIA techniques can be used to create accessible customized controls — use of standard input elements is achievable and provides support for a wider range of assistive technology and user agents.

When implementing checkboxes and radio buttons using div or span elements, several issues can arise:

  1. As opposed to standard input methods, screen readers are not able to render the input type, state of the input, label, and keyboard interaction hints. Screen reader users will have difficulty identifying and interacting with these elements.  While ARIA may be an alternative, authors must accommodate for keyboard interactions.
  2. Standard keyboard interactions are lost. As stated in the previous issue, authors must code ensure the simulated control behaves identical to the standard radio button or checkbox. Otherwise, keyboard-only users, including sighted keyboard-only users, will have difficulty interacting and selecting an option.   Authors must also ensure the code supports multiple browsers and assistive technologies.
  3. When images are not available, the nature of the input elements is lost.  Users with low vision, who use Windows High Contrast mode or disable colors in Internet Explorer, may have difficulty identifying these elements as form controls.  Authors must ensure that when images are not available, the input element is still rendered to users.

However, authors do not need to go to great lengths in creating customizable checkboxes and radio buttons.  Authors can create customizable and accessible checkboxes and radio buttons using purely CSS. This ensures the form controls are supported across all browsers and assistive technologies.  The following example depicts CSS only checkboxes and radio buttons. This also includes the outcome of using such methods.

Examples

In the example below a CSS background image is applied over the standard checkbox or radio button providing a customized appearance when CSS images are available.  The CSS outline property is also used to customize the focus rectangle that is display when the control focused or hovered.

Checkboxes

Favorite Music heading with two check boxes for Rock and Roll and Jazz
Figure 1. Favorite Music CSS checkboxes 

Radio Buttons

Heading of "Gender" with radio buttons for Male and Female
Figure 2. Gender CSS radio buttons 

CSS Code

<style>

body{
font-family:arial, verdana, ‘sans-serif’;
font-size:100%;
}

fieldset{
width:25%;
}
fieldset legend{
font-weight:bold;
}

.custom{
padding-bottom:25px;
}

#a11yForm > .custom  fieldset div{
position:relative;
z-index:1;
}

#a11yForm > .custom  fieldset input {
height: 16px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 16px;
z-index:1;
}

#a11yForm > .custom  input + label {
background: url(inputs.png) 0 -1px no-repeat transparent;
height: 18px;
padding: 0 0 0 18px;
position:relative;
z-index:2;
}

#a11yForm > .custom.checkbox  input + label {
background-position: 0 -1px;
}
#a11yForm > .custom.checkbox  input:checked + label {
background-position: 0 -80px;
}

#a11yForm > .custom.radio  input + label {
background-position: 0 -162px;
}
#a11yForm > .custom.radio  input:checked + label {
background-position: 0 -260px;
}

#a11yForm > .custom  input:focus + label,
#a11yForm > .custom  input:hover + label{
outline:1px solid green;
}

/* FOR IE 10 AND ABOVE; must be placed at end of css */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#a11yForm > .custom  input + label {
background-color: transparent;
}
}
</style>

HTML Code

<form id=”a11yForm”>
<div class=”custom checkbox”>
<h3>Check boxes</h3>
<fieldset>
<legend>Favorite Music</legend>
<div>
<input type=”checkbox” value=”rock” id=”cbRockandRoll” />
<label for=”cbRockandRoll”>Rock and Roll</label>
</div>
<div>
<input type=”checkbox” value=”Jazz” id=”cbJazz”/>
<label for=”cbJazz”>Jazz</label>
</div>
</fieldset>
</div>

<div class=”custom radio”>
<h3>Radio buttons</h3>
<fieldset>
<legend>Gender</legend>
<div>
<input type=”radio” value=”male” id=”rbMale” name=”gender” />
<label for=”rbMale”>Male</label>
</div>
<div>
<input type=”radio” value=”female” id=”rbFemale” name=”gender”/>
<label for=”rbFemale”>Female</label>
</div>
</fieldset>
</div>
</form>

Outcome

Advantages

  • No JavaScript required
  • Supports default keyboard navigation
  • Ensures a11y across all assistive technologies
  • Easily changed/updated
  • Requires basic HTML experience

Disadvantages

  • May not work well for older browser versions, such as IE9 and below
  • IE 10 and above requires a little CSS hack to ensure that the content is displayed when images are ignored through the Accessibility features

Leave a Comment

Your email address will not be published. Required fields are marked *