Smashing Newsletter: Issue #399

Editorial

Accessibility used to be an afterthought. But it’s almost impossible to imagine a competitive product that hasn’t at least considered accessibility in design or implementation. Still, often it’s difficult to get started.

We need to understand how disabled people use the web, make a case for accessibility, design and build with accessibility in mind, but also test and maintain accessibility over time. And in this newsletter, we explore some of the tools and resources all around web accessibility that will help you get there.

If you need a few more resources on accessibility, Stéphanie Walter has just put together a wonderful list of accessibility resources, from articles and checklists to tools and books.

SmashingConf SF 2023 — Meet SmashingConf SF (May 23–26), all around cutting-edge front-end — including accessibility talks and workshops as well.

On our end, we are getting ready for our adventures this year! In fact, our SmashingConf season is just about to start (in-person and remote):

Smashing Meets JavaScript (Apr 25), a free online event on JavaScript performance, security and the Canvas API.
SmashingConf SF 🇺🇸 (May 23–26) all around front-end, CSS, JS, Next.js, accessibility and web performance.
SmashingConf Freiburg 🇩🇪 (Sep 4–6) on design systems, CSS, accessibility, Figma, and all things Frontend.
SmashingConf Antwerp 🇧🇪 (Oct 9–11) on design & UX, Figma, design systems, enterprise UX and UX research.

And, of course, you could dive into some of our friendly online workshops, with new workshops from data visualization and accessibility testing to Figma workflow and React performance. Happy learning, everyone!

— Vitaly (@vitalyf)

1. More Accessible CAPTCHAs

How much time have you spent identifying all the traffic lights in a grid or decrypting warped strings of letters to prove you’re not a bot? As annoying and unintuitive CAPTCHAs might be, for blind or visually impaired users, dyslexic users, or individuals with cognitive or learning disabilities, they can be completely inaccessible.

In her post “It’s about time CAPTCHAs become accessible,” Camryn Manker dives deeper into the problem with CAPTCHAs and how we can make them more user-friendly and accessible. There is no all-encompassing solution, but avoiding image-based CAPTCHAs whenever possible can be a step towards better accessibility.

Camryn explores some of the non-image alternatives and the advantages and disadvantages they bring along in the post. A great reminder to carefully consider if a CAPTCHA is really needed and, if yes, to test it thoroughly. (cm)

2. Accessibility Annotation Kits

To help make accessibility considerations a natural part of the design phase of any project, members of the accessibility and design teams at eBay created a handy accessibility annotation tool for Figma. Please meet Include.

Currently in public beta, the idea behind Include is to make annotating for accessibility easier — easier for designers to spec and easier for developers to understand what is required. A neat little helper to document accessibility considerations with landmarks, focus grouping, headings, reading order, touch targets, alternative text, color contrast, and responsive reflow.

For more accessibility helpers, also be sure to check out the list that Vitaly compiled. It includes useful annotation toolkits, templates, and libraries. Stéphanie Walter’s “A Designer’s Guide to Documenting Accessibility & User Interactions” is also a treasure chest of tools and ideas for getting accessibility documentation right. (cm)

3. Accessibility Do’s And Don’ts

While using bright contrast helps improve the experience for users with low vision, some users on the autistic spectrum would prefer differently. To get you more familiar with the different preferences and needs that different users have, Karwai Pun and the accessibility group at GOV.UK created a set of posters with accessibility dos and don’ts.

Dos and don'ts on designing for accessibility

Each of the seven posters is dedicated to a different user group and includes five dos and five don’ts you should consider when designing for them. The posters cover the autistic spectrum, low vision, physical and motor disabilities, dyslexia, anxiety, screen reader users, and users who are deaf or hard of hearing. Available for free download in a variety of languages. (cm)

4. Smashing Workshops And Conferences

As you probably know, we run online workshops on front-end and design, be it accessibility, performance, or design patterns. We have a couple of new workshops coming up soon, and we thought that, you know, you might want to join in.

Smashing Online Events — 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 a quick overview:

UX/UI Design & Figma Introduction UX
with Christine Vallaure. Apr 20–28
New Front-End Adventures, 2023 Edition Dev
with Vitaly Friedman. Apr 25 – May 9
Architecting Design Systems Workflow
with Nathan Curtis. May 11–19
Data Visualization Masterclass Dev
with Amelia Wattenberger. May 4–18
SmashingConf San Francisco 🇺🇸 — May 23–26
Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. June 12–26
Smart Interface Design Patterns Video Course UX
9h-video + Live UX Training with Vitaly Friedman
Jump to all workshops →

5. Smart Interface Design Patterns

We’ve been working on something new again! You might have heard of the Smart Interface Design Patterns, a video course and live UX training that we launched last year. Now we are almost finished with a little something that will be released next week.

Over the year, the video library has grown to 9h, now with 30 video lessons and new chapters on drag’n’drop, autocomplete, reviews and ratings, closed captions UX and back button UX coming soon. You can still get it at a friendly discount before the price goes up. And watch out for the update coming soon! ;-)

6. Accessibility Vs. Emoji

Emoji are a fun and easy way to convey many things very quickly. However, we should be careful when we use them outside of casual conversations. Camryn Manker examined the accessibility pitfalls emoji bring along and how we can use them to ensure they are beneficial for everyone.

Due to the way screen readers handle emojis, using them sparingly is the first step towards better accessibility, as Camryn demonstrates. Camryn also explores where to best position emoji, why using them as bullet points in a list is not a good idea, and why you shouldn’t rely entirely on emoji to get your message across.

Interesting insights to create better emoji experiences without missing out on the fun they are known and loved for. (cm)

6. Web Accessibility Checklist

What do you need to remember when you test a form for accessibility? What’s to consider with navigation landmarks? And what about tooltips? The Web Accessibility Checklist that the T-Mobile Accessibility Resource Center maintains gives you step-by-step instructions on how to test different components for accessibility.

To create a custom testing checklist, you can choose the components you want to test, and the tool displays the testing criteria in Markdown (perfect for copy-pasting it into your favorite project management tool).

The testing instructions include how to test with a keyboard, screen reader, and screen reader on mobile. Each entry also contains video demos with recommended screen reader browser pairings, code examples, developer notes, and links to official WCAG and WAI-ARIA documentation. (cm)

7. Practical Accessibility Handbook

If you feel that accessibility guides usually are too prescriptive, aspirational, or charity-driven, Giving a damn about accessibility is for you. A brilliant collaboration between UX Collective and author Sheri Byrne-Haber, the book wants to bring a more candid take on the topic. It is available as a free PDF and audio version.

The handbook takes a closer look at the challenges and opportunities that designing for accessibility brings along. It introduces you to the kinds of people you will run into in corporate settings that will make life difficult for anyone who is aiming to create accessible products and explores why your first effort at accessibility won’t be outstanding.

Of course, there are also practical tips to help you up your accessibility game and turn good accessibility into great accessibility. An entertaining guide that inspires designers to care and fight for accessibility, even if it’s hard. (cm)

8. Free Accessibility Course

You want to learn more about creating accessible experiences, but don’t know where to start? Then Carie Fisher’s free Learn Accessibility course on web.dev has got your back. Created for beginners and advanced web developers, you can go through the series from start to finish to get a general understanding of accessibility practices and testing or use it as a reference for specific subjects.

The course consists of 19 lessons and covers everything from what digital accessibility is and how to measure it to evaluating patterns and components for accessibility and performing assistive technology testing. Each section provides context and examples, links to further learning resources, and a short assessment to help you confirm your understanding. An evergreen. (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).

April 4, 2023 Smashing Newsletter: Issue #399

Previous Issues