Smashing Magazine - #316: Front-End Accessibility

With tips for automating accessibility testing, assessing third-party components accessibility, as well as useful accessibility extensions for Figma and VSCode. Issue #316 August 31, 2021 View in the browser 💨

Smashing Newsletter

Howdy Smashing Friends,

Front-end accessibility lies at the very heart of the work we all, designers and developers, do on the web. Although we’ve learned a lot throughout the years, there is still so much that remains to be learned.

In this newsletter, we highlight some of the less-known accessibility issues that are worth highlighting. How do we document accessibility? How do we assess how accessible a component is? How do we design in Figma and code in VS Code with accessibility in mind? Well, let’s find out!

Free online workshop on How To Find, Fix, And Prevent Accessibility Issues, by our friends at Deque.
Free online workshop on How To Find, Fix, And Prevent Accessibility Issues, by our friends at Deque. Taking place on September 14–15.

If you’d like to dive deeper into accessibility, we’ve got a few useful workshops coming up soon:

Let’s make the web more inclusive, everyone!
— Vitaly (@smashingmag)

1. Documenting Accessibility As A UX Designer

Accessibility is still an afterthought in a lot of UX design teams. An easy but very efficient strategy to help you adopt an accessibility mindset comes from Elise Livingston and her team at Qualtrics. They started to add accessibility docs to all design documents before handing them over to engineering. Not only to improve product accessibility but also to see potential accessibility issues much earlier in the design process.

Mockup for a ‘Welcome back’ component showing recent projects. It is labelled with notes on accessibility.

Elise suggests tackling accessibility documentation in two steps: first, defining keyboard behavior, then, specifying semantic labels that can be understood by assistive technology. If you want to give it a try, Elise summarized everything you need to know about the approach in an article. A great opportunity to rethink your current process. (cm)

2. Third-Party Component Accessibility

Reusable components like custom selects, autocompletes, or date pickers are powerful helpers. However, a lot of third-party components that claim to be accessible turn out to be only partially accessible once you dig a bit deeper. As Hidde de Vries points out, even components that implemented the ARIA Authoring Practices Guide 1:1 can be critical because the guide doesn’t make claims about screenreader accessibility or user experience. So how do you find those components that are truly accessible?

Accessible front-end components: claims vs reality

Hidde published a checklist of questions you can ask to have a little more certainty about the accessibility of a component: How did they test? Who did they test with? Are they open about pros and cons of their approach? And who created the component? He also shares some valuable tips from the community that help you assess whether a component that claims to be accessible will live up to its promise. (cm)

From our sponsor

Advance What’s Possible In Your Technology Career

Advance What’s Possible In Your Technology Career
Interested in working with some of the best minds in the tech business and expanding your skill set? CapTech’s developers, technologists, and tech executives work on a variety of unique projects, utilize different tech stacks, and collaborate on internal innovation challenges. Join us.

3. Automating Accessibility Testing With GitHub Actions

Have you ever considered automating the accessibility tests of your source code with GitHub Actions? No matter if you haven’t gotten around to wrap your head around GitHub Actions yet or just need a little bit of help setting up a proper workflow, Adrián Bolonio’s tutorial is for you. It shows you step by step how to automate your accessibility tests with libraries like axe, pa11y, Lighthouse, and unit tests directly in your GitHub repository.

GitHub Action warning that all checks have failed.

You’ll learn how to configure your repository so that GitHub Actions are executed as soon as you create or update a pull request to the main branch. If any of the GitHub Actions find accessibility vulnerabilities, the pull request will crash and disable merging until you’ve resolved the found errors. A small detail that makes a big difference. (cm)

4. Upcoming Front-End & UX Workshops

You might have heard it: we run online workshops around front-end 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
Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

As always, here’s an overview of our upcoming workshops:

5. Accessibility In Figma

We all want to design better and inclusive experiences, but sometimes we might be forgetting about just the right color contrast or a proper tab order. Luckily, there are plenty of Figma plugins for accessibility.

Stark for Figma

Stark, for example, is a full powerhouse on everything accessibility. It includes contrast checking and vision simulators and it also allows you to reorder your sequences in focus order. It also displays the contrast ratio for any two objects that you select. Alternatively, you can use Contrast as well.

For accessible color palettes, is a reliable and sophisticated tool that lets you create, maintain, sync, and test color palettes and their variations. It’s really difficult to imagine any Figma setup that doesn’t have this plugin installed!

And if you need to test how a different font size will impact your layout, Text Resizer helps you see what exactly happens with increased or decreased font sizes.

From our sponsor

Senior Product Designer At Close (100% Remote)

Senior Product Designer At Close
Close is looking for an experienced product designer with a wide set of skills who enjoys the challenge of designing for deeply technical problems.

6. Accessibility Linter For VS Code

If you’re a VS Code user, you might want to give the free axe Accessibility Linter extension a try that the team at Deque Systems created. To help you avoid common accessibility bottlenecks, it checks React, Vue, HTML, and Markdown files for you.

axe Accessibility Linter checking source code

Consistent with the open-source axe-core rule engine, the linter won’t show false positives, so you don’t have to worry about writing ignore flags. To get you up and running immediately, there’s no configuration required, but you can select the accessibility standard and individual rules you want to use, of course. By the way, there’s also a free axe browser extension to expand your test coverage by testing in the browser. (cm)

7. Little Helpers To Pronounce Names Correctly

Business partners, clients, people you got in touch with over the Internet — when meeting them in real life or in a call for the first time, there’s often that awkward little moment when you hesitate to call them by name because, well, you’re not quite sure how to pronounce it correctly. If you want to be well-prepared in situations like these, technology is here to help.

Examples of pronounced names in NameShouts.

The service NameShouts, for example, works with native speakers and linguistic experts to record name pronunciations for more than 20 languages. Their database already counts over 400K names, so if you are looking for a name, just type it in, select its language of origin, and the search engine will find the audio and phonetic pronunciation for you.

The site Pronounce Names works similarly. You can enter a name to search for its pronunciation, browse the alphabetic list, or add names that are missing in the database yourself.

Another approach to the topic comes from Atif Azam. To remove the initial friction of having to clear up his name when introducing himself, he built Vocalizer, a JavaScript library that you can use on your website to show how to pronounce your name correctly. A clever solution. (cm)

From our sponsor

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

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.

8. New On Smashing Job Board

9. 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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#315: CSS Refactoring and JavaScript Migration

Tuesday, August 24, 2021

On refactoring CSS, migrating from JavaScript to TypeScript, optimizing for Next.js, and front-end case studies.Issue #315 • August 24, 2021 • View in the browser 💨 Smashing Newsletter Howdy Smashing

#314: Front-End Games on CSS and JavaScript

Tuesday, August 17, 2021

With front-end games and challenges in CSS and JavaScript to take your coding skills to the next level. Issue #314 • August 17, 2021 • View in the browser 💨 Smashing Newsletter Dobry dzień Smashing

#313: Open-Source Icons, Fonts and Goodies

Tuesday, August 10, 2021

With free icons, gradients, and illustrations to give your project the finishing touch. Issue #313 • August 10, 2021 • View in the browser 💨 Smashing Newsletter Howdy Smashing Friends, I remember

#312: Next.js Boilerplates and Guides

Tuesday, August 3, 2021

With Next.js boilerplates and tutorials to help you get started or boost your existing Next.js setup. Issue #312 • August 3, 2021 • View in the browser 💨 Smashing Newsletter Howdy Smashing Friends,

#311: CSS Global Resets, Gradients and Transitions

Tuesday, July 27, 2021

Transitioning CSS gradients, CSS charts, CSS scrollbar gutters, whimsical 3D CSS Button, CSS clamp() generator and CSS margin collapsing.Issue #311 • July 27, 2021 • View in the browser 💨 Smashing

Hermits, Math Concepts, Probable Futures, Geometric Art, Theatre.js

Friday, September 24, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 24 2021 These tiny MIT-designed robots can transform

You’re Invited: The Iconic Home

Thursday, September 23, 2021

Meet the designers behind our virtual showhouse ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

✏ Actionable Color Palettes, Best JS Frameworks, Transforming CX with Live Chat, and more...

Thursday, September 23, 2021

7 Tips for Transforming CX with Live Chat WEBDESIGNERDEPOT.COM COMMENTS 15+ CSS Particle Backgrounds - Free Code + Demos CSSHINT.COM COMMENTS Actionable Color Palettes - Collection of 30+ Color

Inside Wayfair’s $1.5 Billion Trade Division

Thursday, September 23, 2021

Plus, what to do if your Instagram account gets hacked, stolen, or deleted (image) Architectural Digest AD PRO Logo Image may contain: Human, Person, Face, and People The Iconic Home: 13 Black

Now Hiring: Senior Interior Designer at Rinfret, Ltd. (and More!)

Thursday, September 23, 2021

Visit our job board to view more opportunities. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

✏ Issue #505: Mechanic, 21 Exceptional Google Fonts, How to Get Your First 1000 Subscribers, CSS Cascade Layers, and more…

Thursday, September 23, 2021

View this newsletter online Unsubscribe NEWSLETTER ISSUE #505 SEPTEMBER 23, 2021 Mechanic Mechanic is an open-source framework for building web-based design tools that can export assets right from your

Accessible Palette, Ocean Photography, Container Units, Div Soup, Motion One

Thursday, September 23, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 23 2021 Accessible Palette: stop using HSL for color

Template: Discovery research interview questions for B2B or SaaS customers

Wednesday, September 22, 2021

Questions to kick off your B2B or SaaS research ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Aston Martin Designs Hudson Valley Manse + More Real Estate News

Wednesday, September 22, 2021

Plus, beautiful sketches by design talents who still work by hand (image) Architectural Digest AD PRO Logo Living room interior with a fireplace, bookshelves, and sofas Sherwin-Williams Names Evergreen

✏ 18 Designs That Impacted 2021, 4 Tips for RWD, All the Details on iOS 15, and more…

Wednesday, September 22, 2021

How to Get your First 1000 Email Subscribers GHOST.ORG COMMENTS Location History: How your Location is Tracked and How You Can Limit Sharing it BLOG.MOZILLA.ORG COMMENTS 4 Tips for Using Responsive Web