#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: - [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. [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 [THE SOFTWARE HOUSE]( 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 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: - [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. [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 [SENTRY]( 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 [UXPIN]( 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 →]( [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 - [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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](