5

This is an old css-tricks article demonstrating some of the cool things you can do without javascript using checkboxes. I want to use an updated version of this pattern on my site, but I am worried about some of the accessibility concerns.

Is there anything I should add to make sure the checkbox is controllable with the keyboard, or accessible to screen readers?

Improve this question
2
  • I don't know if it's mentioned in the CSS Tricks article, but using display: none on the checkbox (to hide for custom design or checkbox hack) or on the toggable area will make it unreadable for screen readers. So you might want to keep that in mind
    – Paul van den Dool
    Commented Jul 7, 2015 at 13:51
  • What's the reason for doing this, other than that it's neat that it's possible?
    – Wendy Wojenka
    Commented Jun 9, 2020 at 9:18

2 Answers 2

Reset to default
4

Accessible checkboxes usually require two operations to control: first the user needs to 'focus' the checkbox (usually by using the 'tab' key to move through the interface until they reach the right control) and then they need to change the state of the checkbox (usually using the 'space' key). Sighted users will skip through the page using visual cues such as headings or images but a visually impaired user will tab through the page from link-to-link or control-to-control until they reach the one they want without reading any text in between.

That's your first hurdle: how does the user know what the control is or does? - Your control will need to be well labelled so that the user knows exactly what the control does without relying on any text, icons or images around it. You might also want to look into 'ARIA roles' to help with marking interactive elements in a more accessible way.

Looking at the code you're proposing to use, I can also see another issue: How does the user know that a change has taken place once they have operated the control? In the code you linked to, the only non-visual change is that the checkbox reports as 'checked' when activated. I don't think that alone is enough to signal the full extent of the control's purpose and status.

I assume that you're proposing to use this technique in order to avoid using other technologies but I don't think you can make this an accessible solution without using other technologies. I would abandon this and look for an accessible solution using JavaScript.

Improve this answer
0

You will need to take into account several pitfalls:

  • Tab order with position of checkbox and its label in the content and the targeted toggle-able element
  • Enable activating the checkbox and its label by Space or Enter key
  • Add ARIA role=button on the triggering element
  • Add aria-expanded attribute on the triggering element with true or false depending on state of the targeted element
  • Add aria-controls with id reference on targeted element
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.