January 18, 2022 Smashing Newsletter: Issue #336
This newsletter issue was sent out to 176,731 subscribers on Tuesday, January 18, 2022.
Editorial
With so many variables involved when building for the web, it’s difficult to get everything just right every single time. Luckily there are plenty of resources that will highlight some of our oversights? Good examples of it are remarkable front-end accessibility tools and resources.
A while ago, we created (and still maintain) a complete guide to accessible front-end components which features plenty of solid implementations out of the box. On top of it, we could run accessibility tests with @axe-core/react, eslint-jsx-a11y or eslint-vuejs-accessibility.
You can find many more accessibility tools in another round-up Nic Chan has written earlier.
It doesn’t stop there though. In this issue, we want to highlight some tools and resources just around that — accessibility extensions, plugins, books, courses and useful resources. We hope you’ll find them useful.
Quick reminder from our side: we have new upcoming online workshops on accessibility, frontend, HTML email, design systems and UX coming up soon — with a few early birds still available. The next one by Carie Fisher is coming up this Thursday, with 5 interactive, live sessions on accessible front-end patterns. Jump to all workshops.
And, of course, please don’t forget to join the next free Smashing Hour with Sara Soueidan (happening this Thursday!) and our next Smashing Meets with Laura Kalbag and Trine Falbe on February 9, 2022. We’d love to see you there!
Without further ado, let’s dive into front-end accessibility!
— Vitaly (@smashingmag)
1. Accessibility Myths Debunked
There are quite a lot of myths revolving around accessibility. For example, that accessibility only affects a small group of users or that making a website accessible is costly and time-consuming. To debunk myths like these and show that accessibility isn’t as daunting as it might seem at first, Sergei Kriger created Accessibility Myths.
The site lists 22 common accessibility myths and gives reasons why the assumptions aren’t correct or why it’s worth to reconsider your point of view — in a few concise words. If you want to learn more, further reading resources are also included. By the way, if your manager is still hesitant about accessibility, the site might convince them to see accessibility in a different light. (cm)
2. VS Code Extensions To Improve Accessibility
A powerful duo to help you fix accessibility bugs as you’re coding are the VS Code extensions webhint and Error Lens. webhint combines best practices and suggestions from sources such as axe-core and MDN into one single tool, giving you real-time feedback on cross-browser compatibility, accessibility, performance, and security as you write your code. Error Lens inlines the feedback with your code. If you want to learn more about using both extensions in combination, Rachel Simone Weil shares more details.
Another handy VS Code extension that helps you write more accessible code comes from Max van der Schee: Web Accessibility. Once installed, it gives you feedback on what parts need your attention in order to be accessible. It highlights elements that you should consider changing and gives a hint on how to improve them.
Another extension worth adding to your accessibility toolkit is axe Accessibility Linter by Deque Systems. It checks your React, Vue, Angular, HTML, and Markdown files to help you avoid common accessibility defects. (cm)
3. Developer-Friendly Accessible Color Palettes
Colors are a part of your brand’s identity and are instantly recognizable as such — a fact that makes the task of adjusting a color palette a few years after you first implemented it quite daunting. The team at Doctolib was confronted with just that challenge. As it turned out, the corporate blue which they had used since the birth of the product back in 2013 was causing contrast issues.
If you find yourself in a similar situation and need a bit of encouragement to tackle the challenge, Jérôme Benoit shares some valuable insights into how he and his team enhanced their color palette to achieve AA compliance. A great side effect: The overhaul also removed clutter and legacy issues that had piled up over the years.
More fantastic tips for accessible color palettes come from Lucas Zhang. He and his team at Société Générale created an adaptive, accessible, and automated color system based on four base colors. They spent several months creating variable color attributes for each of the four colors that adjust color tone and lightness depending on the immediate background color to preserve readability and recognizability.
To prevent any hassle that could arise when working with too many color variations, they came up with an automated system that automatically adjusts the element’s color based on background color, font size, and other factors. All of this gets by without any JavaScript, the solution relies entirely on SCSS. Inspiring! (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:
- Smart Interface Design Patterns, video course UX
with Vitaly Friedman. Late January 2022 - New Adventures In Frontend, 2022 Edition Dev
with Vitaly Friedman. Feb 3–17 - Front-End Testing Masterclass Dev
with Gleb Bahmutov. Feb 8–16 - Building Modern HTML Emails Dev
with Rémi Parmentier. Feb 24 – Mar 4 - Jump to all online workshops →
5. Accessibility In Vue And React
JavaScript frameworks have a reputation for poor accessibility. But this doesn’t mean you can’t build accessible sites and apps with Vue, React, and Angular. As Web Accessibility Specialist Marcus Herrmann points out, the frameworks’ strengths like component-based architecture, statefulness, and related tooling also benefit accessibility. In his eBook Accessible Vue (also available as a free web version), he explains how.
If you’re using React, Irek Róg and Stanislav Naborshchikov wrote a practical article that helps you ensure that all your users get equal access to your application. Based on a real-life example, they take you step by step through the process of improving accessibility for keyboard and screen reader users, explaining in detail what you need to pay attention to. (cm)
6. Accessibility Courses And Workshops
Do you want to dive deeper into accessibility but you don’t know where to begin? How about an accessibility course? For beginners, Microsoft has a free course on accessibility fundamentals. It is 2.5 hours long and consists of four modules that introduce you to accessibility concepts and cover how to create accessible and inclusive content for mobile apps and the web.
If you’re looking for something more comprehensive that is also suitable for experts, Deque offers different accessibility courses for all skill levels and professions — developers, designers, content creators, and everything in between.
Fable Upskill’s video-based courses are designed specifically for your team and also targeted at different roles. To gain a first-hand look at accessibility, Fable’s training also involves people with disabilities who are uniquely qualified to teach about accessibility through their lived experience.
Last but not least, it’s also worth keeping an eye on Sara Soueidan’s upcoming accessibility course on everything from WCAG and ARIA to writing semantic HTML, accessibly styling CSS, and adding interactivity with JavaScript. Marcy Sutton is also working on a series of accessibility workshops which are about to launch early this year and that will look at accessibility from different perspectives. By the way, shameless plug, we’ll be hosting an accessibility online workshop later this week, too: the Accessible Front-End Patterns Masterclass with Carie Fisher. Happy learning! (cm)
7. Accessible Names For Interactive Controls
Challenging our own biases and assumptions is crucial when we want to create inclusive experiences. Take the phrase “Click the button below”, for example. It’s a common phrase that we see often on the web. However, if you look more closely, it could be confusing for people who use the web differently.
Eric Bailey’s article “The endless search for ‘here’ in the unhelpful ‘click here’ button” raises awareness for the fact that there is a lot of nuance behind even the simplest-seeming words. Eric dissects phrases like “Click the button below” and shows why they could turn into accessibility pitfalls.
Apart from tips for constructing meaningful, accessible names for interactive controls, he also shines a light on two aspects that we all should keep in mind when building for the web — not only when naming interactive controls: First, think about your audience in terms of digital literacy. And second, use language that will hold up in different consumption contexts. (cm)
8. Design Trends From An Accessibility Perspective
At the beginning of the year, you’ll often come across articles predicting the newest website trends. However, as innovative as some of these trends are, some of them could turn out to be problematic for accessibility. Meg Miller decided to dig deeper and compiled a list of fifteen common web design trends which she reviewed last year based on their accessibility.
The trends that Meg examined revolve around color and typeface aesthetic, layout and organization, graphics, animation, and audiovisual. As it turns out, it is very difficult to label any of them “accessible” or “not accessible”. Often, their accessibility is subjective or completely depends on how they were developed. A great reminder of what accessibility is all about: The users who come to our sites come from an infinite variety of situations that need to be considered — some of them might juggle kids and a phone, others might have a broken arm, some might be blind, autistic, or depressed, others in a hurry and some just had too much to drink. As Meg puts it: “At the end of the day, they are the client. (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.