We’ve been covering front-end accessibility a few times already — it’s just one of the topics that are quite difficult to wrap your head around. We kept looking for reliable, accessible solutions and we’ve updated our complete guide to accessible front-end components, and we’ve just published a complete guide to accessibility tooling, too.
In today’s newsletter edition, we look into some of the accessibility issues that we haven’t tackled before: accessible toggles, navigation, disabled buttons, hidden content, media scroller component. With an overview of techniques to get them right when working on pretty much any project.
In other news, we’ve just released Addy Osmani’s new book on “Image Optimization,” our new guide to improve your image loading strategy and be more deliberate and informed when dealing with images. The book is now shipping worldwide.
Beyond that, we hope that you’ll have a bit of time during the next couple of months to work a bit less, and perhaps spend more time outside with your family, friends and loved ones. It’s been such a rollercoaster time for all of us, so perhaps closing down that laptop for a little bit longer is quite a good idea.
— Vitaly (@smashingmag)
Toggles tend to be straightforward, yet they can bring along quite some accessibility pitfalls. To help you do better, Kitty Giraudel shares a tutorial for a small HTML- and CSS-only implementation of an accessible toggle that you can tweak at your own convenience.
The base for the accessible toggle is a properly-labelled checkbox. It conveys its status with both iconography and color and doesn’t leave any artifacts if CSS is not enabled. The toggle comes with native focus styles that can be customized, a disabled state, and it supports right-to-left orientation, too, if necessary. (cm)
Color is an effective way to convey meaning, but it’s always a good idea to have a second visual indicator for people with low vision or color vision deficiencies, too. An icon, for example. Callum Hart relies on a color/icon combination to indicate the page a user is currently on. In his blog post “An Accessible Current Page Navigation State”, he shares valuable insights into the considerations behind this design decision.
From inlining the SVG icon in the HTML and using
aria-hidden to hide it from assistive technologies to using ems instead of pixels and conveying additional context for screenreader users with the
aria-current attribute, the post provides an in-depth look at how to cater for a truly accessible navigation state. (cm)
Skeleton patterns tend to lack a meaningful way of presenting themselves to screen readers. They often use
aria-busy=“true” when a widget is loading, but only few screen readers actually honor the attribute. So how to do better?
As Adrian Roselli suggests, you could use CSS to find any node with
aria-busy=“true” and set it to
display: none to achieve the same effect for screen reader and non-screen-reader users. In his article “More Accessible Skeletons”, he takes you through the process step by step. The demo works across browsers with current releases of JAWS, NVDA, VoiceOver, and TalkBack. (cm)
Direct from the Smashing family, we are very proud and honored to invite you to our upcoming online event — Smashing Meets — the CSSummer edition. The event will take place online, on July 8th, with sessions by Miriam Suzanne and Ahmad Shadeed on what’s happening in CSS — with a particular focus on CSS container queries. We’d love to see you there, as it will be good fun, of course!
In general, web performance is pretty much at the heart of the online workshops that we run here at Smashing — whether it’s around accessibility, design or front-end.
For the next workshops, we have coming up:
- Creating & Maintaining Successful Design Systems Dev
with Brad Frost. June 29 – July 13.
- Level-Up With Modern CSS Dev
with Stephanie Eckles. July 8–22.
- Designing Websites That Convert UX
with Paul Boag. July 22–30.
- The TypeScript Masterclass Dev
with Stefan Baumgartner. August 5–19.
- Designing The Perfect Navigation UX
with Vitaly Friedman. August 26–27.
- Vue.js: The Practical Guide Dev
with Natalia Tepluhina. September 14–28.
- Jump to all online workshops →
There are some use cases where disabled buttons make sense. When adding a number of tickets to a shopping cart, for example, you might want to disable the “Add to cart” button if there are not tickets to add to the cart. That’s the example that Sandrina Pereira uses to illustrate how we can improve disabled buttons to make them more inclusive.
As Sandrina shows in her article on CSS-Tricks, the common way of using
<button disabled> prevents not only the click but also the focus. While this might seem harmless, it causes confusion for screen reader users. Swapping
aria-disabled makes the experience more enjoyable: although marked disabled, the button is still accessible by focus and it can trigger a tooltip, too. (cm)
How do you hide content responsibly to make it invisible but still accessible for screen readers? Kitty Giraudel summarized different ways of hiding something, be it with HTML or CSS, and when to use which.
As Kitty suggests, you might want to avoid having too many discrepancies between the visual content and the underlying content exposed to the accessibility layer. The more they are in sync, the better. Kitty defines three different scenarios to help you assess when to use which technique: If you need to hide something both visually and from the accessibility tree (show/hide widgets, offscreen navigation, or a closed dialog, for example), use
display: none or the
hidden HTML attribute.
If you need to hide something from the accessibility tree but keep it visible, use
aria-hidden=“true” (valid cases are visual content void of meaning, icons). And, last but not least, if you want to hide something but keep it accessible, use the visually hidden CSS declaration group (e.g., for complementary content that provides more context, such as for icon buttons or links). A great overview. (cm)
How would you go about creating a responsive media scroller component that works on TVs, phones, and desktops alike? Adam Argyle takes you through the process step by step.
Designed to host thumbnails of media or products, the scroller component is built upon a
<ul> with accessible markup. CSS transforms the humble list into a smooth scroll experience that showcases the images and snaps them to a grid.
prefers-reduced-data media query turns the media scroller into a lightweight experience, if necessary. Clever! (cm)
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next week!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
- Interface Design Patterns
- Web Performance Optimization
- Designing and Building Dark Mode
- CSS Tools, CSS Data Charts and Fluid Typography
- Front-End Accessibility
- Color Palettes Generators and Tools
- Front-End Boilerplates and Starter Kits
- VS Code Extensions
- Figma Plugins and Tools
- Front-End Boilerplates
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.