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

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!


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

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

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

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

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

#438: Free Books and Guides

Tuesday, January 9, 2024

With books, templates and guides for product designers and front-end engineers. Issue #438 • Jan 9, 2024 • View in the browser Smashing Newsletter Boa noite Smashing Friends, Roll up your sleeves! In

#437: New Ways of Working in 2024

Tuesday, January 2, 2024

New work practices for 2024, UI Stack, “How to work with me”-manuals and useful tools for Figma and SVG. Issue #437 • Jan 2, 2024 • View in the browser Smashing Newsletter God kveld Smashing Friends,

#436: State of Front-End, AI and UX 2024

Tuesday, December 19, 2023

New opportunities and challenges ahead of us — from new CSS and JavaScript features to state of AI, UX, email design and graphic design in 2024. Issue #436 • Dec 19, 2023 • View in the browser Smashing

#435: Figma

Tuesday, December 12, 2023

Figma file organization, advanced Figma techniques, optimizing large and slow Figma files, wireframing toolkits and accessibility plug-ins. Issue #435 • Dec 12, 2023 • View in the browser Smashing

#434: Magical Front-End Features

Tuesday, December 5, 2023

New front-end technologies, CSS nesting, JavaScript and TypeScript Features, INP and useful tooling. Issue #434 • Dec 5, 2023 • View in the browser Smashing Newsletter Konbanwa Smashing Friends, The

You Might Also Like

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

Accessibility Weekly #405: New Class Action Lawsuit against AccessiBe

Monday, July 15, 2024

July 15, 2024 • Issue #405 View this issue online or browse the full issue archive. Featured: New class action lawsuit against AccessiBe "On June 24, 2024 Tribeca Skin Care, a small skin care

Crafting a talk

Sunday, July 14, 2024

Issue 203: Developing an idea worth sharing ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The Color Secrets Pros Swear By

Thursday, July 11, 2024

View in your browser | Update your preferences ADPro Keeping Up With Color It seems there's a new hot topic in color every week. This year alone, we've seen the “unexpected red” theory take

What’s Behind a Microtrend?

Tuesday, July 9, 2024

View in your browser | Update your preferences ADPro If you've ever wondered about the next big decor moment or debated dipping a toe into TikTok, AD's Senior Digital Design Editor Sydney Gore

#464: Friendly Little Helpers

Tuesday, July 9, 2024

Radio time machine, reverse dictionary, micropedia and templates on how to say No and Goodbye with grace. Issue #464 • July 9, 2024 • View in the browser Smashing Newsletter Gamarjoba Smashing Friends,

Accessibility Weekly #404: Overlays Misunderstand Accessibility

Monday, July 8, 2024

July 8, 2024 • Issue #404 View this issue online or browse the full issue archive. Featured: Overlays misunderstand accessibility "Accessibility overlays are a peculiar approach to accessibility

Reflections from Config

Sunday, July 7, 2024

Issue 202: Thoughts from the annual Figma conference ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏