June 18, 2024 Smashing Newsletter: Issue #461
This newsletter issue was sent out to 201,570 subscribers on Tuesday, June 18, 2024.
Editorial
In September, we’ll run a free 3.5h online workshop on Inclusive Design Patterns in 2025. While accessibility is often perceived as a technical issue with color contrast and screen readers, in the workshop, we’ll dive deeper and go broader — with all the fine details of accessibility and inclusive design.
We’ll explore how to design for people with neurodiversity, young children and older adults, how to consider deafness, dyslexia and autism. And we’ll make sense of the EU Accessibility Act (EAA) and WCAG 2.2. The workshop is free for everyone, so save your spot, and invite your friends to join, too.
Of course, accessibility will also be a topic at our upcoming SmashingConfs and workshops this year in Freiburg, New York, and Antwerp — with technical and UX sessions.
And if you’d like to dive into UX, design, and CSS, we also have a few wonderful events coming up this month:
- Smashing Meets Web Design (free!), today, June 18
- Designing For Complex UIs, with Vitaly Friedman,
- Advanced Modern CSS with Manuel Matuzović,
- Behavioral Design Workshop with Susan Weinschenk.
And thank you for your incredible work in pushing accessibility forward, everyone!
— Vitaly
1. Better With The WCAG Plugin
How do you keep track of WCAG guidelines when designing? The open-source WCAG Plugin integrates accessibility guidelines into your Figma files to make them a central part of your design process.
Once installed, the plugin not only lets you search for WCAG guidelines directly from within your design file, but it also recommends accessible design tokens, which you can import as Figma variables. To increase your team’s awareness of accessibility requirements, you can use the plugin to add WCAG notation cards to your Figma files. A handy little helper. (cm)
2. Accessibility In Design Systems
There’s more to accessibility than ensuring that components are accessible. By going a step further and providing accessibility support in your design system documentation and assets, you can educate others on creating more inclusive products.
A great look at what this could look like in a real-world design system comes from Cintia Romero: She shares insights into how the team behind Pinterest’s Gestalt design system embedded accessibility into their documentation and assets, with accessibility scorecards, an inclusive language page, and a Design Handoff Kit. A great example of how to put accessibility considerations at the center of every design decision. (cm)
3. Color Contrast Best Practices
Getting color contrast right can seem daunting when you look at the official WCAG guidelines. But it doesn’t have to be. To make the topic easier to approach, Javier Cuello wrote an introduction to color contrast, with examples and visual content to help you better understand how accessible color contrast works in UI design.
In his guide, Javier covers the difference between color contrast of text and non-text elements. He dives deep into what you need to consider for text on different kinds of backgrounds, links, and UI components. The peculiarities of icons, charts, illustrations, and infographics are also covered. Practical tips that you can start using right away. (cm)
4. Upcoming Workshops and Conferences
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:
- Designing For Complex UI Masterclass ux
with Vitaly Friedman. June 20 – July 2 - Advanced Modern CSS Masterclass dev
with Manuel Matuzović. June 24 – July 8 - Design Patterns For AI Interfaces ux
with Vitaly Friedman. July 9–23 - Fast and Budget-Friendly UX Resaerch and Testing workflow
with Paul Boag. Jul 11–25 - Successful Design Systems workflow
with Brad Frost. Aug 27 – Sept 10 - Jump to all workshops →
5. How To Make A Strong Case For Accessibility
With many myths and wrong assumptions revolving around accessibility, stakeholders often are reluctant when it comes to accessibility efforts. Let’s fix that! Vitaly shares strategies and practical techniques to convince stakeholders to support and promote accessibility in your company.
To get stakeholders on your side, Vitaly compiled a checklist of things to keep in mind to make a strong case for accessibility. You’ll also get tips for what you can answer to common concerns stakeholders may have, such as considering accessibility an edge case or assuming your product doesn’t have any disabled users. Useful tips to make accessibility more approachable and get the ball rolling in your company. (cm)
6. Understanding The WCAG 2.2 Map
Level A, Level AA, Level AAA — keeping track of WCAG success criteria can be challenging. Particularly now that the new WCAG 2.2 version has brought along some updates. To help you make better sense of WCAG 2.2, the team at Intopia created the WCAG 2.2 Map.
The map provides a visual overview of WCAG 2.2, breaking down success criteria by level of conformance so that you see at a glance where each success criterion fits under the WCAG principles. The map is available for download in PDF format, and you’re welcome to print it out and share it with your network. (cm)
7. The European Accessibility Act
Access to digital products and services is a fundamental human right and a legal obligation. To protect this right, the European Accessibility Act (EAA) imposes accessibility requirements on organizations. It will be enforceable starting from June 28, 2025, and non-compliance can result in fines and penalties. Norbert Pap summarized what the European Accessibility Act is all about and what you can do to prepare for it.
In his rundown of the EAA, Norbert not only takes a closer look at the details of the act, but he also dives deeper into accessibility basics. He explains what accessibility and WCAG are, explores the benefits of accessible products and services, and shares the steps you need to take to ensure compliance. A must-read. (cm)
8. Recently Published Books 📚
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 by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- 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.