Salut,

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)

---

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Earn your master’s degree online.

---

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!

Web dev and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

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)

---

From our friends

Subscribe for Emerging Tech News ☕

Emerging Tech Brew Newsletter is packed with tech insights to make you smarter in 5 minutes, 3 times a week. That’s why it’s trusted by 275,000+ techies from organizations like Amazon, AppDynamics, Honeywell, Intel, Magic Leap, Salesforce, Verizon, and more. This week, Senator Jeff Merkley retweeted their scoop about a US Federal facial recognition ban.

Satisfy your curiosity. Make better business decisions. Subscribe now.

---

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)

---

8. New On Smashing Job Board

• UX Benchmarker
  at Baymard Institute (Remote)
• User Experience Designer
  at Bitovi (Anywhere)
• Full Stack Developer
  at DLH (Silver Spring, MD)

---

9. Our Recent Articles

• Designing With Code: A Modern Approach To Design (Development Challenges)
• An Alternative Voice UI To Voice Assistants
• Client-Side Routing In Next.js
• Your Image Is Probably Not Decorative
• A Complete Guide To Accessibility Tooling

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Follow us on Twitter • Join us on Facebook