Enable

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.

Example code explanation

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

☜ 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.

Example code explanation

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

☜ 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.

The following people will have my soul when I die:
You must choose at least one of the following.

Example code explanation

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

☜ Scroll to read full source ☞