Inclusive Design

🔖 Web Accessibility Toolkits and Guides.

Stark Accessibility Library https://www.getstark.co/library/all/

https://cms.ku.edu/web-writing-checklist

Inclusive Design Toolkit, by Microsoft https://inclusive.microsoft.design/

Screen Reader Accessibility Support https://a11ysupport.io/

WhoCanUse Accessibility Testing Repository https://www.whocanuse.com/

Inclusive Design Toolkit, by University of Cambridge https://www.inclusivedesigntoolkit.com/

Inclusive Design Toolkits and Templates

Inclusive Mindset Figma Workbook https://www.figma.com/community/file/1105798401848507376/inclusive-mindset-workbook-by-project-lima

Inclusive Thinking Audit Template https://www.figma.com/community/file/1019572651067229305/inclusive-thinking-audit-template

Inclusive Persona and Compassion Map, by Katie Miller https://lnkd.in/esW7_kHS

Diversity & Inclusion Workshop Miro Kit https://lnkd.in/esuKASSK

Inclusive Design Figma Toolkit, by Sara Stevanovic https://lnkd.in/eYhNuVQa

Inclusive Design Toolkit, by Microsoft https://lnkd.in/esvaVi7M

The Micropedia of Microagressions https://lnkd.in/eV-a5inf

Inclusive Design Toolkit https://lnkd.in/eqmWP_C2

The Gender-Inclusive Language Project, kindly shared by Kinneret Yifrah. https://lnkd.in/eGRf99d7

Inclusive Design Principles, by Henny Swan, Ian Pouncey, Heydon Pickering, Léonie Watson https://lnkd.in/eQBRA5gD

Inclusive Design Illustrations, by Maxime Rabot https://lnkd.in/eSGMDFTV https://lnkd.in/e5GjupQu

Universal Design Guidelines https://lnkd.in/eVixqjEv Inclusive Components Library, by Heydon Pickering https://lnkd.in/eDhvEtU4

A Beginner’s Guide To Inclusive UX Design, by Trina Moore Pervall https://lnkd.in/dN36JD9P

Building inclusive products for trans people, by Chiara Angori https://lnkd.in/efrfYGFS

A Designer’s Guide to Documenting Accessibility & User Interactions by Stéphanie Walter https://lnkd.in/eZRZT4zd

Building Accessible and Inclusive Animations by Stéphanie Walter https://lnkd.in/ei6bEhgV

Ten Ways to Design More Inclusive Products, by Danny Sapio https://lnkd.in/eUBs52VG

Useful Resources For Inclusive Design, by Trina Moore Pervall https://lnkd.in/eC98-6dP

Autism: https://www.linkedin.com/posts/vitalyfriedman_ux-design-accessibility-activity-7099294629887397888-L1d0

How To Design For Autistic People. Nearly 1% of the global population is autistic. Here’s what we need to know to design better UX ↓ ✅ Autism is a different way of experiencing the world. ✅ The experience is usually intense and tangled. ✅ 40% of autistic people have an anxiety disorder. ✅ Have a low tolerance to uncertainty and lack of control. ✅ Strongly sensitive to bright colors and high contrast. ✅ Very literal, so it’s hard to infer meaning that’s not obvious. ✅ Autistic children grow up into autistic adults. 🚫 Avoid bright contrasting colors and high luminance. 🚫 Avoid figures of speech and idioms (verbal or visual). 🚫 Avoid animations that are hard to control (blinking ads). 🚫 Avoid non-conventional scrolling behaviour (e.g. parallax). 🚫 Avoid time countdowns, time outs and a sense of urgency. 🚫 Don’t rely on jargon, abbreviations, sarcasm, idioms or sayings. ✅ Show all content about a subject on a single page. ✅ Use soft, muted colors and avoid pure white or black. ✅ Add text labels to icons and avoid icons-only buttons. ✅ Allow users to save and return to forms later. ✅ Respect user’s reduced motion preferences. ✅ Support email/chat as communication options. ✅ Autistic children tend to be visual learners. ✅ Autistic adults prefer well-structured text. There is no single, shared “autistic experience” — every person on the autism spectrum experiences the world differently. Oftentimes with their own superpowers in fast learning or keen attention to details, and sometimes with enormous frustration about the busy and noisy world around us. We can rarely design one single perfect experience for absolutely everyone. But by involving diverse users in usability testing, we can make our products more accessible. That might be a few hours of work for us, but it might be life-changing for other people — and that’s worth it. Useful resources: Designing For Autistic People, by Irina Rusakova https://lnkd.in/eX-tkzdV How to Talk and Write About Autism (PDF Guide) https://lnkd.in/eWM-e4sP Design For Autistic People: Existing Research, by Irina Rusakova https://lnkd.in/emtjWMjN Designing For Users On The Autistic Spectrum (PDF) https://lnkd.in/e6u7NqYW Usability Testing with Autistic People, by Varnagy-Toth Zsombor https://lnkd.in/eb2vwRq5 The Pattern Seekers (Book), by Simon Baron-Cohen https://lnkd.in/e6VM-ejw Connecting with the Autism Spectrum (Book), by Casey Remrov Vormer https://lnkd.in/eJQ56vie

Colorblindness: https://www.linkedin.com/posts/vitalyfriedman_ux-design-accessibility-activity-7087333591906430976-PHsN

💎 How To Design For Colorblind People. 300 million people have some kind of colorweakness or are colorblind. Here’s what we need to know to make better color choices ↓ ✅ Red-/green deficiencies are more common in men than women. ✅ Blue is the safest hue if you want users to perceive color as you do. ✅ Use any 2 colors you like as long as they vary by lightness. ✅ Colorbrlind users can tell red/green apart, but can’t see which is which. ✅ The colorblind-safest color palette is to mix blue with orange or red. 🚫 Don’t mix red, green and brown together. 🚫 Don’t mix pink, turquoise and grey together. 🚫 Don’t mix purple and blue together. 🚫 Don’t use green and pink if you use red and blue. 🚫 Don’t mix green with orange, red or blue of the same lightness. These insights come from “How Your Colorblind And Colorweak Readers See Your Colors” (https://lnkd.in/evn95YBp), a wonderful three-part series on how colorblind and colorweak readers perceive colors, things to consider when visualizing data and what it’s like to be colorblind. It’s worth noting that the safest bet is to never rely on colors alone to communicate data. Use labels, icons, shapes, rectangles, triangles, stars to indicate differences and show relationships. Be careful when combining hues and patterns: the pattern changes how bright or dark colors will be perceived. Use lightness to build gradients, not just hue. Using different lightnesses in your gradients and color palettes so readers with a color vision deficiency will still be able to distinguish your colors. And most importantly, always include colorweak and colorblind people in usability testing. Further reading: How I Live With Color Blindness, by Andy Baio https://lnkd.in/eXRNGr6n Who Can Use This Color Combination?, by Corey Ginnivan https://www.whocanuse.com/ Designing for Colorblind Access, by Alex Chen https://lnkd.in/evvNrgcx Colorblind-Friendly Design Guidelines, by Unma Desai https://lnkd.in/e2TA3qKJ How To Choose Colors For Data Visualization, by Lisa Charlotte Muth https://lnkd.in/eqHuf5XC Coblis, Color Blindness Simulator https://lnkd.in/ej2nur7m Color Blindness Simulator Figma Plugin, by Sam Mason de Caires https://lnkd.in/eBiWiw5j Colorblindly Chrome Extension, by Tom van Beveren https://lnkd.in/evxWJYUX Improving The UX For Color-Blind Users, by Adam Silver https://lnkd.in/epSQCPyc

Color contrast: https://www.linkedin.com/posts/vitalyfriedman_ux-design-accessibility-activity-7096750363969511426-BzEE
https://smart-interface-design-patterns.com/articles/color-contrast-cheat-sheet/

🚫 Poor color contrast is the most common problem on the web.

✅ Contrast captures the difference in brightness between colors.

✅ Technically, it’s calculated using relative luminance of colors.

✅ The greater the difference in luminance, the higher the contrast ratio.

✅ The higher the contrast ratio, the better the readability.

✅ White-on-white has 1:1 contrast ratio (min), black-on-white is 21:1 (max).

✅ Moderate contrast between these extremes usually works best.

✅ We use it to ensure legibility and color differentiation in our UIs.

High color contrast alone isn’t sufficient for colorblind people.

WCAG 2.1 Level AA (industry standard), minimum:

✅ 4.5:1 for regular text (7.1 for AAA)

3:1 for text larger than 24 pixels (4.5:1 for AAA)

✅ 3:1 for bold text larger than 18pt (19 pixels) (4.5:1 for AAA)

✅ 3:1 icons and graphs of any size

3:1 UI elements, buttons, borders, underlines

These guidelines are minimum recommendations, and color contrast is one of the many factors that contribute to better accessibility. We might want to add a border to create boundaries for our UI components. And it is a good idea to add an icon or an underline to clearly mark interactive components.

Useful tools:

Colorable: https://lnkd.in/edwQSHuN

Random Accessible Color Schemes: https://randoma11y.com

Closest Accessible Colors: https://lnkd.in/em7YtJeq

Color Contrast Grid: https://lnkd.in/e6sENdRW

Brand Colors Generator: https://lnkd.in/e7QHC2gx

A11y Color Contrast in Figma: https://lnkd.in/e9SUHCxQ

Leonardo: https://leonardocolor.io/#

Color Blind Figma Plugin: https://lnkd.in/eBiWiw5j

Stark Accessibility Plugin for Figma: https://www.getstark.co/

Useful articles:

Fix Color Contrast – Web Accessibility for Text & UI Design (+ PDF), by Oliver Schöndorfer https://lnkd.in/ezmgBC-T

Color Accessibility: Tools and Resources, by Stéphanie Walter https://lnkd.in/ePMzMaGD

An Interactive Guide To Colors and Contrast, by Nate Baldwin https://lnkd.in/eeUwXmrP

The “Dark Yellow Problem” in Color Palettes https://lnkd.in/eS7YqfCf

Accessible Palette: Stop Using HSL for Color Systems, by Eugene Fedorenko https://lnkd.in/e93JuJ-D

Color Contrast Guidelines With APCA, by Lisa Charlotte Muth https://lnkd.in/eKSpkG5t

How To Design For Colorblind People, by yours truly https://lnkd.in/e4_EpkNG

✂️ Accessible Numbers: How To Design With Numbers.

Dyscalculia:https://www.linkedin.com/posts/vitalyfriedman_ux-design-accessibility-activity-7111249864855810048-5qup

Approx. 3–10% of people have dyscalculia, but many are unaware of that. Guidelines to help everyone better understand numbers, measurements, dates and times ↓

✅ Dyscalculia is a persistent, life-long difficulty in understanding numbers.

✅ It makes it hard to read and spot patterns in numbers.

✅ It can be hard to tell apart numbers/letters, e.g. 7/L or 0/O.

✅ Most people are unaware of dyscalculia, but struggle with numbers.

✅ Frequent issues with phone numbers, birthdays, time tables, charts.

🚫 Don’t use decimals unless you must (money, dosage etc).

🚫 Don’t expect users to repeat or remember numbers.

🚫 Don’t rush users to enter a number accurately.

🚫 Don’t make entering a number the only option for verification.

🚫 Don’t time people out and don’t lock them out for 24h.

✅ Round values up to the nearest whole number unless it’s money.

✅ 5pm (not 5.00pm), midnight (not 12am), 6 hours 30 minutes (not 6.5hrs).

✅ “One or two 200mg tablets”, not “1 or 2 200mg tablets”.

✅ Leave space around numbers, so they don’t jump around so much.

✅ Allow people to include spaces when entering numbers.

✅ Allow people to copy/paste into forms in the format they prefer.

It might feel like a broken record, but the best way to improve design is to test with a wide range of people as a part of the design process. Whenever possible, involve people who struggle with numbers in the design process. Not only will it make it easier for them to deal with numbers — it will also help people with low numeracy and everyone make fewer mistakes and make sense of the content faster.

Useful resources:

Accessible Numbers Guidelines, by Laura Parker, Rachel Malic, Jane McFadyen https://lnkd.in/enwvujsx

Numbers, Measurements, Dates and Time Guidelines, by NHS https://lnkd.in/eXkNj9cH

What is Dyscalculia? (+ video), by Daniel Ansari https://lnkd.in/eKbR-xaq

Simulation Of Dyscalculia Through a Child’s Eyes https://lnkd.in/eKbR-xaq

Time Blindness and ADHD https://lnkd.in/eMmR8nBg

Dyscalculia and Trouble with Time, by Christen Barbercheck https://lnkd.in/e22SAMWe

Dyscalculia, from British Dyslexia Association https://lnkd.in/e-yrYRFa

Designing for People With Dyscalculia and Low Numeracy (+ PDF poster), by Jane McFadyen https://lnkd.in/eVY5xfBt