🇮🇪 Tráthnóna maith Smashing Friends,
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.
Friendly, inclusive and practical: that’s SmashingConf.
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):
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)
From our sponsor
Reduce Your Design Workload By 50% With Supernova
Unlock your design system’s full potential with Supernova’s end-to-end platform. Streamline your design workflow, document better, and deliver exceptional user experiences. Gain insights and unlock the full potential of your design system with our new Mapping Tool. Explore Supernova today and elevate your design system!
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.
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. 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)
Download The Marketer’s Guide to Composable Content by Contentful
True omnichannel marketing is possible. Download.
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)
From our sponsor
Northwestern’s Online MS In Information Design And Strategy
Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more →
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?
… and we’re currently working on a new book: Success At Scale, shipping in fall. 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 rock.
Follow us on Twitter • Join us on Facebook
