Browsing Tag

a11y

CSS

CSS Hacks and accessibility – Part 1

One of the conversations that took me by surprise in the hallway at CodeStock was a developer from Europe (I believe from the Czech Republic, and I am very sorry I did not get his name fully — so if anyone knows who that was, please let me know — I was grateful for the discussion). He asked me about the accessibility price of using the checkbox hack for mobile menu toggling — the example where it’s a checkbox visually hidden from the user, which then shows or hides the menu when an image is clicked (maybe a hamburger-menu styled button).

This especially becomes an issue when using a framework like React where the section that is being toggled on/off may be added to the page with the toggle rather than just hidden and shown — the code may not be present, so special accessibility tools may not be able to see the hidden menu if the checkbox isn’t picked up properly to select. Of course, the deeper the content is coming from a JS framework, the easier it is to simply avoid the hack and use a button with a click activated function, but it’s the deeper question of “how” to best compensate for the checkbox hack concept that’s important here.

My first reaction was that since it is a checkbox which is acting like a toggle we could label it better to increase accessibility. The whole idea has been bothering me since then, because I like to be very accessibility friendly and I love to focus in great detail on accessibility, but I hadn’t given this one much prior thought, because I only use this hack on sites I’m currently developing, on mobile, and I haven’t been great at checking my accessibility on mobile. (Shame on me, that’s pretty important and something I’ve been personally revisiting the last couple weeks.

Investigating this idea has led me to articles like these:

http://dev.edenspiekermann.com/2016/03/07/introducing-a11y-toggle/ 

http://alistapart.com/article/radio-controlled-web-design

I believe that the second article truly lays out what is needed to address accessibility in these cases, and it met the basics of what I was thinking, but it’s a few years old. So the question to be addressed here is: am I finding articles that back up my theories because I’m looking to be right, or are they really the correct answer? I’d love feedback from anyone interested in web accessibility, especially on the concept of checkbox hack for toggling content.