Browsing Category

CSS

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.

CSS

Codestock 2018 Slides and References

Abstract:

CSS: Can you? !== Should you?

Many developers have not taken the time to stay immersed in what CSS can do, and most take advantageonly of the most minimal levels of what it can do when applying styles to a project. However, CSS is capable of far more things now than many developers realize. This presentation reveals some of the things CSS can do that many people use JS frameworks and plugins for, and discusses performance and usage pros and cons. We can make a pure-CSS party parrot, but that doesn’t mean we really should… or should we?

Slides:

Codepens used as examples in the talk:

To answer questions raised after the talk – for those brand new to CSS:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
https://developers.google.com/web/tools/chrome-devtools/

CSS

CSS Fun

I get a little frustrated when people think everything needs Javascript. I’m using a lot of Javascript these days, primarily React, but there are so many things you can do with CSS instead. It’s a magical balancing act — should you use Javascript? Should you use CSS? Should you even do it at all?

Since December, I’ve been working with a social media site called Rezli, and this morning I decided to make the Rezli logo — and then I decided to animate it, all with CSS. There is no original design of mine here, the animation is a replica of the current avatar of Rezli’s CEO. 🙂 I’m not a designer, I’m an implementer. 😉

See the Pen Rezli Logo CSS Only with animation by Alice (@ambrosey) on CodePen.0