#461: Accessibility And Inclusive Design

EU Accessibility Act, how to make a strong case for accessibility and accessibility in design systems. Issue #461 June 18, 2024 View in the browser

Smashing Newsletter

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.

Inclusive Design Patterns For 2025
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:

And thank you for your incredible work for pushing accessibility forward, everyone!


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.

WCAG Plugin

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.

Accessibility in Design Systems

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.

Color Contrast

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.

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:

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.

How To Make A Strong Case For Accessibility

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.

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.

The European Accessibility Act

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

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

#460: Storytelling

Tuesday, June 11, 2024

Free storytelling masterclass, how to design with product storytelling and storyboarding for designers. Issue #460 • June 11, 2024 • View in the browser Smashing Newsletter Dobra večer Smashing Friends

#459: UX Motion and Motion Design Systems

Tuesday, June 4, 2024

Motion design systems, UX motion choreography, motion audits and how to document motion. Issue #459 • June 4, 2024 • View in the browser Smashing Newsletter Kalí méra Smashing Friends, How do we design

#458: Design Systems

Monday, June 3, 2024

Design systems for healthcare, car interfaces, insurance companies, digital publications and universities. Issue #458 • May 28, 2024 • View in the browser Smashing Newsletter Dobré odpoledne Smashing

#457: Figma Organization

Tuesday, May 21, 2024

Cleaner Figma files, Figma workspace template, organization template, multi-brand Figma kit. Issue #457 • May 21, 2024 • View in the browser Smashing Newsletter Shikamoo Smashing Friends, How do you

#456: How to Name Things

Tuesday, May 14, 2024

How to name design tokens, colors, UI components, HTML classes and variables. Issue #456 • May 14, 2024 • View in the browser Smashing Newsletter Konbanwa Smashing Friends, Naming is hard. As designers

You Might Also Like

The Color Trends to Watch: See Our New Trend Report

Wednesday, July 24, 2024

View in your browser | Update your preferences ADPro Image may contain: Furniture, Chair, Interior Design, Indoors, Home Decor, and Rug Inside Our Newest Trend Report “We're in a renaissance of

The One Color Risk Rodman Primack Is Always Willing to Take

Tuesday, July 23, 2024

View in your browser | Update your preferences ADPro Anne Crawford and Dudley DeZonia's Ojai refuge has been on the lips of us editors ever since we first caught a peek at the layouts earlier this

A design business story we can't stop thinking about

Tuesday, July 23, 2024

Hi ya'll, It's been a while since we sent a newsletter outside our standard formats. But last week we were so captivated by a story @Pern Bann's founder @sukrachand told on Instagram that

#466: UX Writing and Content Design

Tuesday, July 23, 2024

Error messages UX, content design system, voice and tone, experience mapping and placeholders. Issue #466 • July 23, 2024 • View in the browser Smashing Newsletter Sveiki Smashing Friends, Content

Accessibility Weekly #406: D & D and Alt Text

Monday, July 22, 2024

July 22, 2024 • Issue #406 View this issue online or browse the full issue archive. Featured: Dungeons & Dragons taught me how to write alt text "The narrative is shared amongst everyone by

The Fog of War of company onboarding

Sunday, July 21, 2024

Issue 204: How a Real-Time Strategy game concept teaches you new hire onboarding ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

168 / Feeling stuck? Open this email to get your creative juices flowing

Friday, July 19, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Jul 2024 • Part 1 View in browser Welcome to Issue 168! I took a short break from publishing as I was in the US last month for Figma's Config,

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