How do I make my custom checkbox accessible?

Question

I'm trying to implement more accessibility to the website I'm working on. I have a custom checkbox inside a button, followed by a list of checkboxes. When I'm using a screenreader, I expect the screen reader to tell me whenever a checkbox is unmarked/marked. This works for all the checkboxes, except the one inside my button. The purpose of the button is to mark/unmark all other checkboxes in the list (this is done by JavaScript). Everything works, except the screenreader is not saying anything when I unmark/mark it.

Here the code:

<button id="checkAll" class="btn btn-default checkAll checkAllInit" 
data-target="#everyCheckbox">
<span class="icon icm icm-checkbox_select" role="checkbox"></span>
<span class="text">Unmark all</span></button>

What follows is basically a list of checkboxes, which all can be reached and understood by keyboard navigation and the screen reader. It's just the button that won't give the correct feedback.

Any suggestions appreciated.

Pyjamas

Answer 1

It's not valid html. You can use https://validator.w3.org/nu/ to check your code. A <button> cannot have any interactive components nested in it. See https://www.w3.org/TR/html53/sec-forms.html#the-button-element

Content model: Phrasing content, but there must be no interactive content descendant.

This will confuse the screen reader. You either need a simple button or a simple checkbox.

If you're not using a native <input type='checkbox'>, then you need role='checkbox' and aria-checked. Just toggle the value of aria-checked between true and false in your javascript and the screen reader will announce the change.

Bengal

That validator tool you provided was superb, I solved it by adding a role and manipulating the aria-checked attribute by JavaScript. Cheers. – Pyjamas

Answer 2

First of all, a button element cannot contain any "interactive content", i.e. no other form controls, audio elements, video elements, etc.

Ideally, you should use native HTML elements, i.e. a form element to wrap around the checkboxes and buttons, and the input element with its type set to checkbox. You'll also need to associate labels with the checkboxes. With these native elements, you don't need WAI-ARIA attributes such as role='checkbox' and aria-checked; these WAI-ARIA attibutes are actually redundant (see e.g. the article On HTML belts and ARIA braces .)

If you have good reasons to create custom checkboxes using a combination span, CSS and JavaScript, you will need additional markup to make these checkboxes accessible:

• tabindex="O" to make sure that keyboard users can reach the checkbox,
• role='checkbox' to enable screen readers to figure out what type of element they are dealing with,
• aria-checked (with the values true or false) to enable screen readers to figure out the state of the checkbox,
• aria-labelledby to associate a "label" with the checkbox.

As you can see, if you use custom elements where HTML has native elements, you create a lot of extra work for yourself.

Quiddity

Indeed it was some extra work involved to get this to work. Thanks for the input. – Pyjamas

Answer 3

Please see this code for better understanding that how to write accessible checkboxes. Please define the checkboxes like this:

<h1>Show checkboxes:</h1>

<form action="/action_page.php">
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car<br>
  <input type="checkbox" name="vehicle3" value="Boat" checked> I have a boat<br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>
By using this method the checkboxes will be properly accessible by default and also, screen reader will announce the state.
If there are custom checkboxes which are to be made accessible, then please refer:
https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074 

Antabuse