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!
If you’d like to dive deeper into accessibility, we’ve got a few useful workshops coming up soon:
- free online workshop on how to find, fix and prevent accessibility issues, powered by our friends at Deque.
- Join Carie Fisher’s Accessible Front-End Components Masterclass with accessibility best practices, guidelines, testing tools and front-end techniques,
- Join Deep Dive On Accessibility Testing with Manuel Matuzović to learn how screen readers work and how to run automated and manual accessibility tests.
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.
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?
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)
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.
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.
- Microcopy and UX Writing
- Front-End Cheatsheets
- Front-End Accessibility
- Open-Source Icons, Fonts and Goodies
- Next.js Boilerplates and Guides
- CSS Global Resets, Gradients and Transitions
- Interface Design Patterns
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.