#439: Accessibility and Inclusive Design

Playbook for universal design, accessible target sizes and tools for accessible design, annotations and brand colors. Issue #439 • Jan 16, 2024 • [View in the browser]( [Smashing Newsletter]( Latha math Smashing Friends, When we think of accessibility, we often think of the usual suspects: color contrast, font sizes, keyboard navigation, mark-up, and screen reader output. But how do we [make a strong business case for accessibility]( How do we design with accessibility in mind from the start? How do we design accessible color palettes from the start? How do we craft universal, inclusive experiences? Today, we dive into just that — useful guidelines and helpers for designing accessibility experiences out of the box. [Designing Search UX In 2024]( Free 2h-session: [Designing Search UX In 2024]( with video recordings and all slides. Feb 29, 9AM Pacific / 6PM CET. We’ve just announced a free 2h-workshop on [Designing Search UX in 2024]( 🔎 — with search design patterns, autocomplete, filters, sorting and pagination UX, hosted by myself. You’ll get video recordings and slides, too. [Register for free](. [Codux]( If you’re an experience UX designer with HTML/CSS skills, [join the usability session today.]( Later today we are running a [usability testing session](. If you are an experienced UX designer with HTML/CSS skills , join us this Tuesday at 9AM Pacific / 6PM CET and get a friendly gift certificate of US$85. In the meantime, let’s dive into accessibility — and we wish you a wonderful and productive week, everyone! — [Vitaly]( --------------------------------------------------------------- 1. Playbook For Universal Design Universal design methods can help you be more inclusive in your design process, both within the context of the design workshops you’re running and how you interact with your users. To support you in developing a mindset of inclusion, DTU Skylab released the [Playbook for Universal Design](. [Playbook for Universal Design]( The playbook is a collection of methods to plan and facilitate universal design development in every step of the process, for short workshops or longer work sessions. Each method includes everything you need to get up and running quickly: a short tutorial, step-by-step instructions, inclusivity tips, materials needed, templates, and accommodation tips for different abilities. (cm) --------------------------------------------------------------- 2. Designing Better Target Sizes We all have encountered websites where we had difficulties clicking a button or link or even accidentally clicked an adjacent action element. Getting target sizes right is key to preventing misclicks and mistaps and creating frustration-free, accessible user experiences. A [comprehensive guide to designing better target sizes]( now comes from Ahmad Shadeed. [Designing better target sizes]( Ahmad’s guide explores all the little peculiarities you need to watch out for to enhance the target size area. You’ll dive deep into touch angles, spacing, and safe triangles, for example, and learn to extend target size with pseudo-elements, how to test target sizes, and much more. A must-read. (cm) --------------------------------------------------------------- 3. Understanding Accessibility Many websites still don’t meet basic accessibility requirements, although a lot of accessibility issues could be easily resolved. To address this, Alaïs de Saint Louvant and the teams at Studio Lutalica and Lattimore + Friends wrote a [practical guide to understanding accessibility](. [Understanding Accessibility]( Using the latest guidance and feedback from web designers and developers, the guide explores how to make more accessible design decisions for colors, typefaces, media, layout, and development. If you feel accessibility is overwhelming or you don’t know where to begin your research, this is a wonderful tool to build a foundation and make the web more accessible, one step at a time. (cm) --------------------------------------------------------------- From our sponsor Connect Your Teams In ClickUp [CLICKUP]( One tool does it all: [ClickUp]( offers all the features you need in one platform: Tasks, Docs, Whiteboards, Dashboards, Goals, and more. [Switch today]( to explore our 100% customizable features. --------------------------------------------------------------- 4. Uniform, Accessible Color Palettes The LCH and OKLCH color space is a real game changer when creating accessible color palettes. If you want to give it a try, the [Atmos LCH and OKLCH color tool]( is for you. It makes creating a predictable, perceptually uniform color palette with the right color contrast a matter of just a few minutes. [Atmos LCH and OKLCH color tool]( Specialized in creating UI palettes, Atmos gives you full precision over your color palette, from finding colors and generating shades with similar perceived lightness to fine-tuning the palette. The tool also displays the WCAG compliance of your selected colors and simulates what they look like to users with different vision. No more manually tweaking colors until they meet accessibility standards. (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: - [UX Strategy Masterclass]( UX with Vitaly Friedman. Jan 23 – Feb 6 - [Interface Design Patterns (Spring 2024)]( UX with Vitaly Friedman. Mar 8 – Apr 5 - [Resilient & Maintainable CSS]( Dev with Miriam Suzanne. Feb 26 – Mar 12 - [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. Accessible Brand Colors Are your brand’s colors accessible? To help you find out, the team at design and technology studio Use All Five built [Accessible Brand Colors]( a tool for checking how ADA-compliant your colors are in relation to each other. [Accessible Brand Colors]( To check your brand colors, add the hex value or use the color picker to select colors, and the tool will generate a chart that visualizes how they can be used together for accessibility. If your colors don’t meet accessibility requirements, you can adjust them directly in the chart to find similar combinations that work better. A great tool that makes getting color contrast right so much easier. (cm) --------------------------------------------------------------- 7. Neurodiversity Design System How can we create experiences with neurodiverse users in mind? Will Soward’s [Neurodiversity Design System]( is a great place to get started. It defines a set of standards and principles that combine neurodiversity and user experience design. And while it’s created particularly for designing Learning Management Systems, it offers valuable tips for all kinds of websites that need to hold a person’s attention for an extended time. [Neurodiversity Design System]( The system covers everything from numbers, fonts, typography, and color to inputs, interface, communication, and animations. You’ll also find a collection of learner personas that characterize real traits and qualities of neurodiverse users in the design system. Another fantastic example of how designing for accessibility can benefit everyone. (cm) --------------------------------------------------------------- 8. Annotating Accessibility In Figma Designer-developer collaboration is one of the keys to creating accessible digital experiences that everyone can use. To improve communication and help designers and developers fix accessibility issues before they make it into production, the accessibility and design teams at eBay created a handy Figma plugin: [Include](. [Include]( Include makes it easier for designers to spec accessibility considerations and developers to understand what is required. By hinting you at common pitfalls like missing alt texts, touch targets that are too small, or lacking color contrast, Include ensures that accessibility becomes an integral part of your project instead of an afterthought. (cm) --------------------------------------------------------------- 9. News From The 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]( … and we’re currently working on a new book: [Success At Scale]( shipping in February. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 10. Recent Smashing Articles - [Top Front-End Tools Of 2023]( - [SolidStart: A Different Breed Of Meta-Framework]( - [The View Transitions API And Delightful UI Animations (Part 2)]( - [The Magic Of New Beginnings (January 2024 Wallpapers Edition)]( --------------------------------------------------------------- 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](