#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: - [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. [Building accessibility research practices]( 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? [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 [Supernova]( 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 Workshops]( 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: - [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. [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? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Check out all books →]( [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 - [Vanilla JavaScript, Libraries, And The Quest For Stateful DOM Rendering]( - [A Practical Guide To Designing For Colorblind People]( - [Mobile Accessibility Barriers For Assistive Technology Users]( - [How Accessibility Standards Can Empower Better Chart Visual Design]( --------------------------------------------------------------- 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 rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](