We’ve all seen these before, right?
However, this time you decide to break away from the convention of adding classes like “expanded” or “collapsed” to the panel and the button. You’re tired of the CSS classitis — that disease that’s plaguing the web. Instead, you’re feeling saucy and you reach into the WebAIM bag of tricks for some semantic ARIA labels. Why not, right? You know that the web standards nut on your team is going to nag you to put them in your app anyway (that person can be so annoying sometimes). Plus, it’s possible to style the application using CSS attribute selectors, and they have the same specificity as classes.
So, you write the HTML:
And then the CSS is simple:
Now you’ve made lots of friends with the simple gift of ARIA attributes. Your component is now more accessible — your users will love you — and that web standards nut will thank you for not forcing them to nag.
Benefits to this method
- As simple and as fast as the typical method of applying/removing classes.
- Better accessibility built-in from the start.
- More semantic since ARIA attributes provide meaning.
- Less CSS noise or classitis.
Comments & feedback
As always, I am interested to hear everyone’s thoughts and feedback on this technique as well as accessibility in general.