Series: Reviewing my old content - Checkboxes

I'm going through my favorite A11y with Lindsey blog posts and seeing if I cringe. I wanted to see how I felt with 5 more years of accessibility expertise. The first one is my blog post about creating custom styled accessible checkboxes. The goal was to show how to use semantic HTML when creating custom functionality.

I went through the tutorial and it still worked well! The beauty of that good ole' semantic HTML! But I have thoughts about what I wished I had covered in the blog post.

Testing on Mobile

Something that I felt was missing from my former blog post was talking about how this works on mobile, so I went ahead and tested it. Overall it works well. The nice thing about using a label with pseudo elements is that labels also trigger checking the box.

However, I wanted to modify the box to be at least 24px height and width. As I've gained more experience, I'm less intimidated at looking at the WCAG criterion pages. My first thought was "Hmm, I don't think that height and width are enough, especially for mobile." And I was correct. According to the 2.5.8 Target Size criterion, it needs to be at least 24px by 24px. That is to help people with dexterity limitations.

Screen Readers

I wish I provided examples of how a screen reader user would perceive the custom checkbox. Would it sound the same as an unaltered checkbox without any CSS? Considering the code didn't hack the checkbox, I figured "probably not." But this time, I went through JAWS and VoiceOver to actually verify this. One unscientific observation I have is a correlation between the amount of assumptions you make about accessibility without testing and how accessible something is. Unless you go through and test in a variety of ways, you can never actually know how accessible something is. This is why a lot of my other blog posts rely heavily on showing users why things are accessible.

Additionally, I want screen reader usage to be more common for developer and QA use. After working with many developers and QA folks over the years, I've realized the only way to reduce your intimidation of using a screen reader is to pop one open and actually use it.

Hopeful future

In the future, I hope the checkbox element has more customization without pseudo-elements. I recently learned about the accent-color feature and this feels like a step in the right direction.

Final thoughts

I'm surprised to say that I would reference my old blog post to create accessible checkboxes. I'm not sure what I was expecting, I thought I may cringe the entire time. But past Lindsey took a lot of pride in her content, maybe I should have a bit more faith in her 😊.