#370: Front-End Accessibility

Accessible charts, tooling, forced colors, dark mode accessibility and an accessibility checklist. Issue #370• September 13, 2022 • [View in the browser]( 💨 [Smashing Newsletter]( Hej Smashing Friends, Last week, we finally ran an in-person SmashingConf in our hometown Freiburg, Germany ([check the conference photos](. It was a truly wonderful gathering of 350 friendly designers and developers who were learning from each other and having fun along the way as well. From cable car adventures to puzzles, mysteries, and you-can’t-stop-me live DJ Tobi, it was an experience that hopefully will be difficult to forget. [SmashingConf Freiburg 2022]( For every talk, there was a Q&A with the speaker, with questions brought by the audience online and in the venue. [dina Amin]( sharing her experiences after her talk. [SmashingConf Freiburg 2022]( [Ivan Akulov]( speaking about JavaScript at SmashingConf Freiburg 2022. Photos by [Marc Thiele](. Fortunately, we have another adventure coming up just in a few weeks. [SmashingConf New York]( 🇺🇸 is coming up on Oct 10–13, with [wonderful speakers]( exploring design systems, CSS, web performance, Web3, interface design and accessibility. [Get your ticket now]( and join in — in-person or online. In this newsletter, we dive into front-end accessibility as well — exploring tooling, accessible charts, forced colors, dark mode accessibility and an accessibility checklist. We hope that it will help you make your site or app a bit more accessible. Sending you warm hugs for the times ahead! — Vitaly ([@vitalyf]( --------------------------------------------------------------- 1. Accessibility Tools For Figma Are you using Figma? Then the [Stark Suite for Figma]( is for you. It combines plugins, browser extensions, and tools that help you streamline your accessibility workflow and ensure your designs are compliant with AA or AAA requirements. [Stark Suite]( Whether it’s simulating what your design looks like for people with different types of vision, ensuring that users of assistive technologies can navigate your design, or checking that touch targets are large enough for everyone, the Stark Suite has got you covered. A powerful bundle to find accessibility issues before a design goes into production or to quickly fix what’s already in flight. (cm) --------------------------------------------------------------- 2. Color Accessibility Resources Not every user experiences color in the same way. Some might be color blind, some visually impaired, or in different environments. So when choosing colors for a project, it is important that your color choices are accessible. Stéphanie Walter collected [useful tips, tools, and resources]( that help you get started with inclusive design and color accessibility. [Color accessibility]( In Stéphanie’s collection, you will find color blindness simulator tools to check your color choice against different types of color blindness, tools for checking contrast ratio in your mockups, tools for finding alternative compliant color choices, and articles and resources to help you build accessible color palettes. Stéphanie also looks into what to do if you need to change corporate colors because of contrast issues and why you should be careful with CSS background images. An in-depth look at color from an accessibility perspective. (cm) --------------------------------------------------------------- From our sponsor Answering Tough Leadership Questions On The Postlight Podcast [The Postlight Podcast]( If you’re looking for insights on how to get to a successful product launch, why being vulnerable can help make you a better leader, or how to ship software with realistic deadlines, the [Postlight Podcast]( is for you. Each week, join Postlight CEO Gina Trapani and President Chris LoSacco alongside industry guests for candid conversations on tech, business and leadership. [Tune in today]( --------------------------------------------------------------- 3. Accessible Charts The value and insight that a chart or data visualization provides often get lost for people with vision impairments. Particularly for people who don’t use assistive technology like screen readers to consume web content — color-blind users, for example. But what can you do to make your data accessible to everyone? [An Accessibility-First Approach To Chart Visual Design]( Kent Eisenhuth’s and Kai Chang’s [case study]( explores how an accessibility-first approach led them to a better visual design. They highlight how they used WCAG in their design process and how their approach ensures that accessibility is a core to the chart’s visual design without compromising focus, sacrificing readability, or adding unnecessary chartjunk. Another practical resource for designing accessible charts comes from Denis Kryukov. He summarized [strategies and best practices]( to make your charts more accessible and convey your message more clearly — for everyone. (cm) --------------------------------------------------------------- 4. Upcoming Online Workshops That’s right! We run [online workshops on frontend and design]( be it accessibility, performance, navigation, or landing pages. 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 Workshops]( 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 an overview of our [upcoming workshops]( - [Designing Better UX With Top Tasks]( Workflow with Gerry McGovern. Sept 13–27 - [Designing Better Products Masterclass]( UX with Stéphanie Walter. Sept 21 – Oct 5 - [Architecting Design Systems]( Workflow with Nathan Curtis. Oct 6–14 - [Optimistic UI Masterclass]( Dev with Zell Liew. Oct 6–14 - [Designing for Emotion Masterclass]( UX with Aarron Walter. Oct 17–18 - [Designing The Perfect Web Forms]( UX with Vitaly Friedman. Nov 17–18 - [Smart Interface Design Patterns Video Course]( UX 8h-video course on interface design with Vitaly Friedman. --------------------------------------------------------------- 5. Accessible Colors For Design Systems Have you heard of [Leonardo]( already? More than two years ago, the Adobe open-source tool made its appearance as the first-of-its-kind contrast ratio-based color generation tool. Since then, it has evolved as both a design and engineering tool for creating accessible color palettes for design systems. [Leonardo]( Leonardo has three primary workspaces for design systems: creating an adaptive color scheme, creating color scales for data visualization, and the color toolbox. If you want to dive deeper into how they can help you streamline your workflow, Nate {NAME} [takes a closer look](. A powerful timesaver that helps you do work that usually takes hours in minutes. (cm) --------------------------------------------------------------- 6. A Practical Guide To Forced Colors Forced colors is a CSS media query that radically changes the way your site looks. Available in all versions of Windows and Ubuntu, when active, Forced colors set UI elements like text, background, links, and buttons to colors that the user chooses. To prevent bad surprises and accessibility pitfalls, there are a few things you can do to make sure your site works well with Forced colors. [Forced colors explained: A practical guide]( In his [practical guide to Forced colors]( Kilian Valkhof explores how Forced colors work and why they are used. He shares tips for how to test your design for forced colors and what you need to take care of to make it look good in them. Little changes that don’t take a lot of time but that make a real difference for everyone who sets their device’s UI to Forced colors. (cm) --------------------------------------------------------------- From our friends Level Up Your Design Career With Femke Design [Femke Design]( Product Design is more than just the visual craft and pixels — it’s strategy, storytelling, articulating rationale and having conviction in your work. As a designer who’s worked in big tech, Femke has had to build these skills on her own, but you shouldn’t have to! Level up your design career by joining the [femke.design community]( or start with her brilliant [design videos on YouTube](. --------------------------------------------------------------- 7. Dark Mode Accessibility Dark mode has become an emerging trend in user interface design in the last few years. Apart from its sleek look, it is also considered better for the eyes than light color themes. But does dark mode really reduce digital eye strain>? Dora Cee [scoured through research papers]( to find clear answers and help us make an informed decision. [Peering into the accessibility of Dark Mode]( When designing a dark theme, reusing existing colors or inverting shades usually isn’t a good idea as it could increase eyestrain and make your design harder to use in low light. In the worst case, it may even break your visual hierarchy, as Teresa Man points out. In her [article on the Superhuman blog]( she shares a systematic approach to designing dark themes that are readable, balanced, and delightful. (cm) --------------------------------------------------------------- 8. Accessibility Guidance The checklist that is not a checklist. That’s how the team at Intopia describes their [Accessibility Not-Checklist](. If you’re new to accessibility, the resource provides an overview of what you’ll need to consider to build accessible and inclusive experiences. And if you’re already familiar with accessibility, it acts as a guide to make sure you haven’t missed anything. [Accessibility Not-Checklist]( The Not-Checklist is based on WCAG requirements and also provides best practice recommendations. You can filter the content by WCAG version and level, topics, and even job roles to get only the information that matters most for your work. A handy accessibility resource you might want to keep close. (cm) --------------------------------------------------------------- From our sponsor Northwestern’s Online MS in Information Design and Strategy [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. New On Smashing Job Board - [Java Developer]( at Integrated Data Services (USA) - [UI Developer]( at Integrated Data Services (Remote) - [Software Engineer]( at Vestcom (Remote) --------------------------------------------------------------- 10. Recent Smashing Articles - [Making Sense Of WAI-ARIA: A Comprehensive Guide]( - [Meet “Smart Interface Design Patterns Checklists”]( - [One Formula To Rule Them All: The ROI Of A Design System]( - [UX Checklists For Interface Designers]( - [The Realities And Myths Of Contrast And Color]( - [Read more articles on Smashing Magazine →]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](