Good morning Smashing Friends,

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.

Free workshop on accessibility and inclusive design. Save your free spot.

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 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 for 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, 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)

From our sponsor

Only A Few Days Left For You To Fill In The State Of Frontend 2024 Survey

We're close to closing the State Of Frontend 2024 survey and need your insights! Join thousands of frontend folks, from newbies to battle-hardened managers, who already completed the survey. Soon, we will wrap up a free report, so it’s now or never. Last chance: vote now!

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, for 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.

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:

• 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)

From our sponsor

Upcoming Workshop: Frontend Issues With Backend Solutions

Frontend issues are often triggered by backend problems. Join us as we discuss common sources for poor web vitals and how to use Tracing to connect issues through your stack at the code-level. Register here.

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, 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)

From our sponsor

Build Prototypes That Can Be Copied As Code

Leverage MUI or Tailwind components to build beautiful and fully functional prototypes faster. Get your building blocks with AI prompts, React libraries, and create a code-backed layout that you can push to production. Try UXPin Merge.

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 →

It’s here, and it’s shipping! Success At Scale, a new book by Addy Osmani. Get the book or browse the complete library.

9. Recent Smashing Articles

• Useful Email Newsletters For Designers
• What Are CSS Container Style Queries Good For?
• The Scent Of UX: The Unrealized Potential Of Olfactory Design
• How To Hack Your Google Lighthouse Scores In 2024
• Useful CSS Tips And Techniques

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