Accessible Checkboxes

This page shows different ways a checkbox can be marked up to see how screen readers will describe them to users.

A real styled HTML5 checkbox

This is the best solution to use, especially when building from scratch.

You can style an HTML5 checkbox using CSS easily. You don't need to make faux chekcboxe using <div> tags.

I agree to sell my soul to Zoltan

Code Walkthrough of the Above Example

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

Wrap text

☜ Scroll to read full source ☞

A DIV with a role of checkbox

If you already are using a component similar to this in existing work that is not accessible, go to the developer walkthrough of this section to see we made our implementation accessible.

If you come across a <div> in existing code that is marked up like a checkbox, you can fix it this way. It is preferable to use the HTML5 version instead, if you can implement it quickly.

I agree to sell my soul to Zoltan:

I will not fight Zoltan in a lawsuit about this matter:

Code Walkthrough of the Above Example

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

Wrap text

☜ Scroll to read full source ☞

HTML checkbox group

This is the best solution to use, especially when building from scratch.

If you have a group of checkboxes, this is the proper way to style them. Instead of fieldsets, you could use <role="group">, which is described in the ARIA form role example.

Code Walkthrough of the Above Example

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

Wrap text

☜ Scroll to read full source ☞