Smashing Magazine - #445: Web Accessibility

WCAG 2.2, colorblindness, accessibility research, accessible numbers, design systems and designing for mental health. Issue #445 Feb 27, 2024 View in the browser

Smashing Newsletter

Konbanwa Smashing Friends,

Web accessibility is often seen as a technical challenge. Yet it also comes with accessibility strategies and design considerations and that go way beyond technical implementation, legible font sizes and sufficient color contrast. Accessible features aren’t edge cases, but a reliable way to ensure design resilience.

In this newsletter, we look into designing data visualization for colorblindness, how to make numbers more accessible, what WCAG 2.2 brings along, examples of accessible design systems and how to build accessibility research practice.

Free Workshop with Vitaly Friedman
Designing Search UX In 2024, a free 2h-online workshop with Vitaly.

Later this week, on Thu, Feb 29, we’ll be running a Designing Search UX In 2024 🌎 — diving into all the fine details of how people search, design patterns for search UX, autocomplete, filtering and sorting. Invite your friends and colleagues and get your free ticket.

And if you’d like to dive a bit deeper into accessibility, we of course have a few workshops and conferences in 2024 — with early-bird tickets and friendly bundles for teams:

Happy reading, everyone — and thank you so much for your incredible efforts to make digital products more accessible and inclusive for everyone!


1. Accessibility Research From Scratch

Inclusive design goes beyond being compliant with accessibility requirements. Maya Alvarado, Senior Accessibility Researcher at, rather compares it to building a door that can be opened by anyone and lets everyone in. In her case study “Building accessibility research practices,” she shares valuable insights into how her team at built accessibility practices and inclusive design into their UX research process.

Building accessibility research practices

To meet specific user needs and explore different dimensions of disabilities across their product,’s accessibility research includes participants with permanent, temporary, and situational impairments.

They run automated and manual testing to understand if their products work with different technologies and comply with accessibility guidelines. User research with real users of assistive devices helps them explore if the flow of an experience matches expectations. (cm)

2. What’s New In WCAG 2.2

In October last year, WCAG 2.2 was published, the successor to the accessibility gold standard WCAG 2.1. It has six new level A and AA success criteria and three new level AAA criteria. So what do the new guidelines mean for designers?

WCAG 2.2 Accessibility Map

Vitaly summarized key pointers to keep in mind to comply with WCAG 2.2. Keeping focus always visible, consistently offering help across all pages, offering UI controls for dragging movements, and avoiding cognitive puzzles and object recognition for authentication are some of the new additions to the guidelines.

Another fantastic resource to help you navigate WCAG 2.2 is the WCAG 2.2 Map by the folks at Intopia. It maps out the success criteria you need to consider to meet accessibility requirements, highlighting success criteria levels and what’s new in WCAG 2.2. One for the bookmarks. (cm)

3. Accessible Numbers

Whether it’s managing money, arranging appointments, or doing calculations, numbers are everywhere. Yet, many people struggle with them: Four out of five adults have low functional math skills and half of the working-age adults in the UK are affected by low numeracy.

However, unlike for plain language, there is only little guidance on presenting numbers and data so that everyone can make sense of them. Accessible Numbers attempts to change that.

Accessible Numbers

Created by Dave Smyth, Accessible Numbers explores how designers can help people better understand numbers. And as so often when it comes to making a product more accessible, it’s the little details that make a huge difference and benefit everyone: rounding up numbers, leaving space around numbers, and letting people make mistakes when entering numbers, for example.

A must-read on a topic that is often overseen in the discussions around accessibility. (cm)

From our sponsor

Transform Your Product Workflow With Supernova 2.0

Experience unparalleled efficiency with our biggest update yet, featuring multiplayer editing, all-new and improved user experience. Streamline how your entire organization works and take your design system to the next level — explore Supernova 2.0 today.

4. Colorblindness And Data Visualizations

About 8% of European men and 0.5% of European women have some kind of red-/green colorweakness or colorblindness. What does this mean for data visualizations where color often plays an important role? Lisa Charlotte Muth wrote a three-part article series in which she explores colorblindness and colorweakness and what you should be aware of to prevent accessibility bottlenecks when visualizing data.

How your colorblind and colorweak readers see your colors

As Lisa explains in the first part of the series, color combinations to avoid are red/green/brown, pink/turquoise/gray, and purple/blue. Mixing blue with orange or red, on the other hand, is the safest color combination if you need multiple colors, or, generally, mix colors of different lightness.

In the second part of the series, Lisa explores how you can add additional meaning to your data visualizations with symbols, shapes, and patterns so you don’t need to rely on color alone.

The third part is particularly interesting for everyone who doesn’t know any colorblind or colorweak people, as Lisa shares findings from talking to colorblind people about how they perceive their colorblindness in daily life. (cm)

5. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:

6. Design Patterns For Mental Health

With the awareness for mental health topics growing, the number of mental health and wellbeing apps being launched is on the rise, too. If you are working on a digital mental health product, be sure to check out the Mental Health Patterns Library.

It features principles, patterns, and best practices to ensure mental health products and services work for the people who use and deliver them.

Mental Health Patterns Library

The principles and patterns are based on extensive mental health research and evidence, user research conducted by major health institutions and service providers, and testing with youth charities.

They cover everything from keeping users safe to providing them with multiple ways to engage with the service. Short real-life case studies illustrate how actual services and products apply the patterns. (cm)

7. Accessible Design Systems

Public services are a fantastic source when you are looking for accessible design guidelines. The design system by the City of Helsinki, for example, is a wonderful design system focused on accessibility and form design. With guidelines, do’s and don’ts, and design principles, it includes everything needed for building a consistent and accessible digital brand across the city.

Helsinki Design System

If you’re looking for more real-world design system inspiration, Vitaly collected design systems from cities, statistical offices, employment agencies, and governments that put accessibility first. Among them the Scottish Government Design System, the design system by the City of Calgary, Oslo’s design system, and many more. You might need a translation for some of them, but the effort is well worth it. (cm)

8. Smashing Library 📚

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?

Success At Scale
Also meet our newest Smashing Book: Success At Scale. Print shipping in early March, eBook now available. Pre-order your copy or browse the complete library.

9. Recent Smashing Articles

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 time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#444: UX Writing

Tuesday, February 20, 2024

Voice and tone, content design process, plain language guidelines and UX writing in design systems. Issue #444 • Feb 20, 2024 • View in the browser Smashing Newsletter Howdy Smashing Friends, Words

#443: UX Research

Tuesday, February 13, 2024

A complete guide to user interviews, UX research launch pad and how to build up UX research from scratch. Issue #443 • Feb 13, 2024 • View in the browser 💨 Smashing Newsletter Tere õhtust Smashing

#442: Sustainable Front-End and UX

Tuesday, February 6, 2024

Product design guidelines for sustainable UX, podcasts, books, newsletter, checklists, UX patterns and front-end optimizations. Issue #442 • Feb 6, 2024 • View in the browser Smashing Newsletter

#441: Legacy Systems and UX Migration

Tuesday, January 30, 2024

How to manage legacy code base, UX migration, redesign and how to design with legacy systems. Issue #441 • Jan 30, 2024 • View in the browser Smashing Newsletter Labą dieną Smashing Friends, Legacy isn

#440: Interface Design

Tuesday, January 23, 2024

Design better animations, typography, icons and use Gestalt principles in product design. Issue #440 • Jan 23, 2024 • View in the browser Smashing Newsletter Konbanwa Smashing Friends, Interface design

You Might Also Like

100 Interior Photographers to Hire Now

Thursday, July 18, 2024

View in your browser | Update your preferences ADPro Ready, Set, Shoot! You've spent months—years, even!—perfecting your client's space. Now it's time to capture it for your portfolio, or (

Do this in your next PR pitch subject line...

Tuesday, July 16, 2024

Exciting announcement before we jump into subject line tips! Along with Nora, Kirsten is now also available for 1-1 consulting. Since we founded Wolf Craft, Nora has worked 1-1 with creatives to help

#465: CSS

Tuesday, July 16, 2024

CSS container queries, style queries, custom functions, native CSS mixins, inline conditionals, transition to auto. Issue #465 • July 16, 2024 • View in the browser Smashing Newsletter Grüezi Smashing

Accessibility Weekly #405: New Class Action Lawsuit against AccessiBe

Monday, July 15, 2024

July 15, 2024 • Issue #405 View this issue online or browse the full issue archive. Featured: New class action lawsuit against AccessiBe "On June 24, 2024 Tribeca Skin Care, a small skin care

Crafting a talk

Sunday, July 14, 2024

Issue 203: Developing an idea worth sharing ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The Color Secrets Pros Swear By

Thursday, July 11, 2024

View in your browser | Update your preferences ADPro Keeping Up With Color It seems there's a new hot topic in color every week. This year alone, we've seen the “unexpected red” theory take

What’s Behind a Microtrend?

Tuesday, July 9, 2024

View in your browser | Update your preferences ADPro If you've ever wondered about the next big decor moment or debated dipping a toe into TikTok, AD's Senior Digital Design Editor Sydney Gore

#464: Friendly Little Helpers

Tuesday, July 9, 2024

Radio time machine, reverse dictionary, micropedia and templates on how to say No and Goodbye with grace. Issue #464 • July 9, 2024 • View in the browser Smashing Newsletter Gamarjoba Smashing Friends,

Accessibility Weekly #404: Overlays Misunderstand Accessibility

Monday, July 8, 2024

July 8, 2024 • Issue #404 View this issue online or browse the full issue archive. Featured: Overlays misunderstand accessibility "Accessibility overlays are a peculiar approach to accessibility

Reflections from Config

Sunday, July 7, 2024

Issue 202: Thoughts from the annual Figma conference ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏