January 16, 2024 Smashing Newsletter: Issue #439
This newsletter issue was sent out to 208,086 subscribers on Tuesday, January 16, 2024.
Editorial
When we think of accessibility, we often think of the usual suspects: color contrast, font sizes, keyboard navigation, markup, 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.
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.
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.
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.
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.
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)
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.
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 visions. 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.
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.
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.
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?
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Image Optimization by Addy Osmani
- Check out all books →
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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.