Dziękuję Smashing Friends,

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.

Coming up soon: Smashing Hour with Sara Soueidan.

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)

From our sponsor

HubSpot CMS Hub: Build Powerful CRM And CMS Experiences

Create sites your customers’ customers will love! Build dynamic digital experiences using the power of data-driven personalization and automation. CMS Hub Starter lets developers use the tools, technologies, and workflows that you prefer to create flexible themes for your marketers and clients to work within. The HubSpot App Marketplace has over 1,000 applications to connect your favorite tools.

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.

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:

• 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 6h-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.

From our sponsor

Communicate At The Speed Of Thought With Whimsical. Free To Get Started.

Whimsical offers versatile boards that enable you to collaborate across wireframes, diagrams, mind maps, and more. Designers and UX Engineers love Whimsical for the rich library of configurable elements, thousands of built-in icons, and intuitive keyboard shortcuts. Keep ideas moving forward faster.

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)

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Earn your master’s degree online.

9. New On Smashing Job Board

• Front End DevOps Engineer
  at APG (Amsterdam)
• UX Designer
  at Sensei Productivity Pty Ltd (Melbourne)
• (Senior) Web Developer PHP / Drupal / TYPO3 (w/m/x)
  at Avenga Germany (Remote)

10. Recent Smashing Articles

• A Recipe For A Good Design System
• Improving The CI/CD Flow For Your Application
• An Introduction To AWS Cloud Development Kit (CDK)
• A Guide To Audio Visualization With JavaScript And GSAP
• Read more of the latest 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