June 22, 2021 Smashing Newsletter: Issue #306
This newsletter issue was sent out to 179,204 subscribers on Tuesday, June 22, 2021.
Editorial
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.
Meet “Image Optimization”, our new Smashing book for better image loading strategy. Photo by Marc Thiele.
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)
1. Implementing Accessible Toggles
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)
2. Accessible Current Page Navigation State
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)
3. Making Skeletons More Accessible
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)
4. Upcoming Smashing Online Events
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 →
5. A Way Forward To More Inclusive Disabled Buttons
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 disabled with 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)
6. How To Hide Content Responsibly
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)
7. A Smooth, Responsive Media Scroller Component
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.
To add some finesse, JavaScript facilitates roving-index interactions, helping keyboard users skip traversing a large number of items, and, last but not least, the experimental 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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.