February 27, 2024 Smashing Newsletter: Issue #445
This newsletter issue was sent out to 206,458 subscribers on Tuesday, February 27, 2024.
Editorial
Web accessibility is often seen as a technical challenge. Yet it also comes with accessibility strategies and design considerations, and that goes 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.
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:
- Accessibility For Designers, with Stéphanie Walter,
- SmashingConf Freiburg 🇩🇪 — The Web, Sep 9–11
- SmashingConf NY 🇺🇸 — Front-End & UX, Oct 7–10
- SmashingConf Antwerp 🇧🇪 — Design & UX, Oct 28–31
Happy reading, everyone — and thank you so much for your incredible efforts to make digital products more accessible and inclusive for everyone!
— Vitaly
1. Accessibility Research From Scratch
Inclusive design goes beyond being compliant with accessibility requirements. Maya Alvarado, Senior Accessibility Researcher at Booking.com, 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 Booking.com built accessibility practices and inclusive design into their UX research process.
To meet specific user needs and explore different dimensions of disabilities across their product, Booking.com’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?
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.
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.
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 color weakness and what you should be aware of to prevent accessibility bottlenecks when visualizing data.
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.
As always, here’s a quick overview:
- Interface Design Patterns (Spring 2024) UX
with Vitaly Friedman. Mar 8 – Apr 5 - Design System Planning and Process UX
with Nathan Curtis. April 18–26. - Scalable CSS Masterclass Dev
with Andy Bell. May 9–23 - Smart Interface Design Patterns Video Course UX
10h-video + Live UX Training with Vitaly Friedman - Jump to all workshops →
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.
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.
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?
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Image Optimization by Addy Osmani
- Check out all books →
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 Geoff Graham (gg), 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.