August 29, 2023 Smashing Newsletter: Issue #420
This newsletter issue was sent out to 209,210 subscribers on Tuesday, August 29, 2023.
Editorial
Accessibility isn’t easy to get right. There are many myths and assumptions, from colorblindness to older adults — and often it’s difficult to find reliable techniques to get reliable results. Everyone benefits from better accessibility, and in this newsletter we cover some techniques to help us all design and build more inclusive digital experiences.
Accessibility will be a part of almost every session at our upcoming SmashingConf Design & UX — our brand new conference all around UX & design, in the very heart of lovely city of Antwerp in Belgium (Oct 9–12):
- About the conference and speakers,
- Accessibility For Designers workshop by Stéph Walter,
- Successful Design System workshop by Brad Frost,
- Tickets and bundles for teams.
We absolutely can’t wait to see you in-person or online in Antwerp — and perhaps we will see you beforehand in Freiburg (next week!) or at Meets Magical UX , our free online community event on Sept 14. Don’t forget to say hello! :-)
— 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.
You can star your favorite methods to create a custom workshop plan with just a few clicks, or use one of the preplanned workshop plans in case you’re in a hurry. (cm)
2. Inclusive Design Toolkit
If you’re looking for a guide that helps you understand your users better, particularly those from underrecognized groups, Sara Stevanovic’s Inclusive Design Toolkit might be for you. The Figma file includes inclusive design exercises that teach you the basics of inclusive design and how to apply its methods to your design process.
The toolkit consists of three modules, grouped by three main principles of inclusive design: recognizing bias, recognizing world diversity, and recognizing exclusion. The exercises are useful for designers, product and project managers, brand managers, or anybody interested in learning about inclusive design.
Another great resource to help you create an inclusive mindset comes from Project Lima: the Inclusive Mindset Workbook. If you haven’t checked it out already, be sure to do so. (cm)
3. How To Document Accessibility
Why fix something later when you could do it right from the very beginning? Unfortunately, accessibility is still an afterthought in many projects, making it much harder to correct accessibility issues once they arise. Good documentation prevents this from happening and helps you identify and fix issues before they reach your users.
Stéphanie Walter wrote a comprehensive guide to documenting different aspects of accessibility and user interaction requirements. If you don’t have the time to document everything in your design mockups, Stéphanie suggests to focus on the things where there might be the biggest issues and misunderstandings. Practical tips that lay the foundation for a more inclusive approach to design.
You can also get Steph’s Web Accessibility Kit and Checklists woth a helpful Figma, Sketch and Penpot Accessibility kit — very recommended, and for just $6 literally a steal.(cm)
4. Accessibility Support
Will your code work with assistive technologies? Accessibility Support helps you find out. The community-driven project informs developers about what code features (roles, states, properties, elements, etc.) are supported by assistive technologies and what this support looks like.
Apart from featuring accessibility support data for various HTML, ARIA, CSS, and SVG features, the site also provides tips on using different assistive technologies and detailed instructions about performing tests.
Another handy tool to help you find accessibility bottlenecks in your project is Who Can Use. It brings attention and understanding to how color contrast can affect people with different kinds of visual impairments.
When checking a color combination, you not only get the contrast ratio and WCAG rating but also a visualization of what the combination looks like to people with different kinds of vision impairments. (cm)
5. Upcoming Workshops and Conferences
You’ve seen them before! 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:
- Interface Design Patterns UX Training UX
with Vitaly Friedman. Sep 8 – Oct 6 - Accessible UI Components Dev
with Carie Fisher. Sep 14–22 - Design Management Masterclass Workflow
with Slava Shestopalov. Oct 5–13 - Typography Masterclass UX
with Elliot Jay Stocks. Oct 16–30 - Customer-Centric Product Strategy Workshop UX
with Debbie Levitt. Oct 18–26 - Design KPIs Masterclass UX
with Vitaly Friedman. Oct 31 – Nov 8 - Accessibility for Designers UX
with Stéphanie Walter. Nov 6–15 - Smart Interface Design Patterns Video Course UX
9h-video + Live UX Training with Vitaly Friedman - Jump to all workshops →
6. Web Accessibility Library
How can we support disabled people at work? How can we make our social media presence more inclusive? And what do we need to consider when creating inclusive personas? These are just a few of the questions that the accessibility resources library by Stark Labs attempts to answer.
The library features ten themed collections with handpicked resources around different accessibility topics. Whether you’re a designer looking to kickstart your design with WCAG references and levels, a developer looking for tools to improve the accessibility of a site or app, or you’re looking for accessible design patterns and UI libraries, the collection is a treasure chest of accessibility helpers. (cm)
7. Accessible Color Palettes
“Stop using HSL for color systems!”, argues Eugene Fedorenko. While HSL and HSV are fine choices for choosing a single color, they are unsuitable for color systems. But why? In his post on accessible palettes, Eugene explores what’s wrong with them and which alternatives might be better suited for your color system.
As Eugene explains, HSL and HSV transform the RGB model and ignore the complexities of human perception. A much better solution for color systems would be CIELAB or LCh, where, contrary to HSL and HSV, colors with the same specified lightness have the same perceived lightness and WCAG contrast ratio.
Design tools don’t support this powerful color space, but Eugene built an app that closes the gap and helps you build color systems with consistent lightness and predictable contrast ratios across color levels: Accessible Palette. A neat little helper! (cm)
8. Accessible Brand Colors
Are your brand’s colors accessible? The team at design and technology studio Use All Five built the Accessible Brand Colors tool that makes it easy to check how ADA-compliant your colors are in relation to each other.
To check your 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. You can also adjust the colors directly in the chart to find similar colors that work better. A great tool that makes getting color contrast right so much easier. (cm)
9. Smashing Book Updates
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.