Smashing Magazine - #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 Events
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:


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 Baldwin 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


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

unsubscribe update preferences view in your browser

Older messages

#369: Interface Design & UX

Tuesday, September 6, 2022

Free UX handbooks, constructive feedback, UX checklists, interpolation in color schemes, copywriting and UX podcasts. Issue #369• September 6, 2022 • View in the browser 💨 Smashing Newsletter Salut

#368: JavaScript

Tuesday, August 30, 2022

JavaScript techniques, libraries and case studies: from building a design system with React to JavaScript visualized. Issue #368• August 30, 2022 • View in the browser 💨 Smashing Newsletter Salut

#367: Front-End Helpers

Tuesday, August 23, 2022

Little helpers for JavaScript and CSS, with a few tools for HTML email workflow and interactive timelines.Issue #367• August 23, 2022 • View in the browser 💨 Smashing Newsletter Yasou Smashing Friends,

#366: Fearless Salary Negotiation and Job Interviews

Tuesday, August 16, 2022

Better salary negotiations, job interviews, company culture and software engineering skills. Issue #366 • August 16, 2022 • View in the browser 💨 Smashing Newsletter Yasou Smashing Friends, Producing

NL #365: Design Systems

Tuesday, August 9, 2022

On motion and accessibility in design systems, naming conventions, and design systems in enterprise settings. Issue #365• August 9, 2022 • View in the browser 💨 Smashing Newsletter Howdy Smashing

From Giancarlo Valle, Young Huh, and More: 8 Design Collabs We’re Loving Right Now

Friday, January 27, 2023

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image A look at the latest collection drops in furniture, rugs, and more. Big Buds Rug

Latest stories

Friday, January 27, 2023

Submit Story Learn how to speak a new language like a local with BabbelSPONSORED Babbel is the top language-learning app that helps users start speaking a new tongue in just three weeks. That's

Neurodiversity Design, Type Trends, Astro 2.0, Linear Design, Prompt-Driven Design

Friday, January 27, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar January 27 2023 Neurodiversity Design System neurodiversity.

Lagoons, Luxury Bunkers, and More Real Estate Trends for 2023

Thursday, January 26, 2023

Plus, 9 pink paint shades designers can't live without View in your browser | Update your preferences Architectural Digest AD PRO Logo a sunroom with a pink sofa and a floor painted pink and white

Latest stories

Thursday, January 26, 2023

Submit Story Join Noom, the psychology-based program for lasting healthy outcomesSPONSORED Getting healthier means changing your lifestyle. Noom Weight helps users lose weight in a sustainable way

CSS Wishlist, Reviews And Ratings, Vasa Disaster, Product Design, UX Death

Thursday, January 26, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar January 26 2023 CSS Wishlist 2023 daverupert.com Here's my

An Iconic Frank Lloyd Wright Desk Enters Its WFH Era

Wednesday, January 25, 2023

Plus, 14 gardens every design lover must see in person View in your browser | Update your preferences Architectural Digest AD PRO Logo AN ICONIC FRANK LLOYD WRIGHT DESK DESIGN ENTERS ITS WFH ERA With

Latest stories

Wednesday, January 25, 2023

Submit Story Join Noom, the psychology-based program for lasting healthy outcomesSPONSORED Getting healthier means changing your lifestyle. Noom Weight helps users lose weight in a sustainable way

The 9 Best Paint Colors for Small Spaces

Tuesday, January 24, 2023

Plus, The Expert enters its next act View in your browser | Update your preferences Architectural Digest AD PRO Logo The Expert furniture showroom NO LONGER JUST A VIRTUAL DESIGN SERVICE, THE EXPERT

Sarah Thankam Mathews Wrote Her Hit Novel in Four Months

Tuesday, January 24, 2023

Conversations about craft, cash, and compromise, with Emily Gould. Sarah Thankam Mathews Wrote Her Hit Novel in Four Months Illustration: by Samantha Hahn To be honest — perhaps too honest — I usually