March 15, 2022 Smashing Newsletter: Issue #344
This newsletter issue was sent out to 176,410 subscribers on Tuesday, March 15, 2022.
Editorial
Tomorrow, we will be running Boosting Web Performance in 2022 , a 2.5h-long online workshop, focused on improving Core Web Vitals by taking a close look at CSS/Javascript delivery, web fonts, images and 3rd-party scripts. You can set your own price, and all proceeds from the workshop will be donated for humanitarian aid in Ukraine. Thank you.
Later this month, we’ll also host another Smashing Hour with Sara Soueidan, speaking about front-end accessibility, CSS and shiny new features coming to the web platform. You’ll have time to ask all your questions, and probably learn a few useful tools along the way. Of course, the event is free to attend, so please join in and bring your friends as well.
Speaking of accessibility, in this newsletter issue, we take a look at some of the useful accessibility resources for better focus indicators, toggles, charts and ways to document accessibility, among other things.
And if you want to dive a little bit deeper into accessibility in modern applications, we have an accessibility workshop with Marcy Sutton coming up next week as well. We’d love to see you there.
— Vitaly (@smashingmag)
1. Accessible Focus Indicators
Imagine you’re visiting a website to buy something, and as you move your cursor onto the page, it suddenly disappears. Maybe you’re hovering over a link or a button or any other form control, but you don’t know which it is. A nightmare of an experience, isn’t it? Unfortunately, for keyboard users, all too often this is the frustrating experience they get. Let’s do better!
Since focus styles are a recurring discussion she keeps having with designers, Sara Soueidan published a helpful reference guide to designing accessible, WCAG-compliant focus indicators. The guide is aimed at both designers who want to learn about accessibility considerations, as well as developers who want to implement them. A thorough exploration of the topic. (cm)
2. Accessible Switch Components
A switch component might sound like a simple thing to do, but it is packed with quite some complexity. Adam Argyle takes us step-by-step through the process of building a switch that is responsive and accessible.
At the core of Adam’s approach is a checkbox <input type=“checkbox” role=“switch”> inside a <label> which has the advantage that it doesn’t need CSS or JavaScript to be fully functional and accessible. Loading CSS brings support for right-to-left languages, verticality, animation, and more. Loading JavaScript makes the switch draggable and tangible. A great overview. (cm)
3. Accessible Data Visualizations
When Torstein Hønsi was looking for a simple charting tool for updating his homepage with snow depth measurements from the local mountain where his family keeps a cabin, he was frustrated with what he found. And, well, that’s when he decided to build his own solution and share it with the world. The result is Highcharts, a flexible charting library that comes with all the tools you need to create reliable and secure data visualizations.
Built on JavaScript and TypeScript, Highcharts works with any back-end database or server stack and includes all essential chart types — line, bar, area, column, advanced, and more. All charts intelligently adapt to any device and screen size, and they are accessible to visually impaired users, too. You can download and try out Highcharts for free. There’s also a completely free option for non-profit organizations, personal websites, and school projects. (cm)
4. Upcoming Front-End & UX Workshops
You might have heard it: we run online workshops around 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.
As always, here’s an overview of our upcoming workshops:
- Accessibility In Modern Applications Dev
with Marcy Sutton. Mar 22 – Apr 5 - DevOps Masterclass Dev
Denys Mishunov. Apr 4–18 - Designing For Complex UI Masterclass UX
Vitaly Friedman. Apr 6–14 - Successful Design Systems Workflow
with Brad Frost. Apr 18 – May 12 - Jump to all online workshops →
5. Documenting Accessibility In UX
How can a UX design team that doesn’t talk about software accessibility or inclusive design adopt an accessibility mindset? Elise Livingston shares some of the processes and tools she created to help her team at Qualtrics design more accessible software.
The process that had the greatest impact on building an accessibility-focused culture in Elise’s team was adding accessibility information to all of their design documents. Each design that they hand over to engineering includes things like keyboard behaviors, labels, and semantics. By doing that, they not only improve product accessibility but it also helps the team to think about accessibility and disability-centered scenarios already at the beginning of the design process. (cm)
6. Smart Interface Design Patterns
Late February, we’ve finally launched “Smart Interface Design Patterns”, a 10h-video course with Vitaly Friedman, focused on fine little details that make for better interface design. In the course, you’ll explore 100s of hand-picked examples — from complex navigation to filters, tables and web forms. It’s not just a video course though; it’s a growing video library with 25 lessons available today, and more added every few months. Check the free preview.
The course is created specifically for interface designers, UI engineers and developers who’d love to be prepared for complex UI/UX challenges. And if you’d like to dive even deeper, there is a live UX training that with UX certification that happens twice a year. The next one will be taking place in a few weeks. There are some early-bird-prices left. Jump to the details.
7. Learning Accessibility Made Easy
You’re new to web accessibility? Then you might want to check out a11yphant. A master’s project created by six students at the Salzburg University of Applied Sciences, it teaches you accessibility, one step at a time.
There are no lengthy texts to read; instead, a11phant breaks everything down into manageable pieces and little coding challenges that help you put your newly-aquired skills to the test. Four beginner challenges are currently available that teach you how to set up a valid and accessible HTML document, how to use headings correctly, how to structure a page with content elements, and how to use semantic HTML tags to communicate more information to the browser. Perfect for beginners. (cm)
8. Real-World Color Palettes
Color palette generators are great if you need some color inspiration. However, most of them provide you with a flat color palette and leave it up to you to decide how to apply it. If you’re looking for a more convenient solution, Huemint might be for you.
Powered by machine learning, Huemint generates color palettes based on how each color will be used in the final design. It knows which colors are meant for the background, which for the foreground, and which for accents. To make the colors fit your project’s needs, you can select different design templates for brands, websites, or graphics, and to ensure that your color combinations don’t cause any accessibility issues, you can also predefine the desired contrast between each color on the palette. A handy little helper. (cm)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.