Smashing Magazine - #399: Web Accessibility

With accessibility tools, handbook, annotation kit, checklists, free courses and accessibility posters for free download. Issue #399 April 4, 2023 View in the browser

Smashing Newsletter

Boa noite Smashing Friends,

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.

It’s about time CAPTCHAs become accessible

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.

Accessibility Annotations

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:


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.

Smart Interface Design Patterns

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.

Accessibility Vs. Emojis

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.

Web Accessibility Checklist

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.

Giving a damn about accessibility

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.

Learn Accessibility

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)


9. New On Smashing Job Board


10. 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
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#398: Knowledge Hubs For UX Designers

Tuesday, March 28, 2023

Useful hubs on accessibility, design, UX research, design toolkits and front-end components — all neatly packed in one single newsletter. Issue #398 • Mar 28, 2023 • View in the browser Smashing

#397: Sustainable Design Toolkits 🌱

Tuesday, March 21, 2023

With sustainability checklists, Figma kit, ethical design, sustainability-related nudges in design and useful resources all around prioritizing what matters and reducing waste. Issue #397 • Mar 21,

#396: Web Typography

Tuesday, March 14, 2023

With the typography cheat sheet, type combinations, the right font-size, free eBooks on typography and fonts in data visualization. Issue #396 • Mar 14, 2023 • View in the browser Smashing Newsletter

#395: UX and Design Process

Tuesday, March 7, 2023

Multi-platform design system, UX psychology glossary, motion in UX design and qualitative research methods. Issue #395 • Mar 7, 2023 • View in the browser Smashing Newsletter He lā maikaʻi Smashing

#394: Better Meetings and Career Paths

Tuesday, February 28, 2023

With a little surprise, better meetings, career paths, design critiques and product management. Issue #394 • Feb 28, 2023 • View in the browser Smashing Newsletter Goeije 'n avend Smashing Friends,

You Might Also Like

At Home With Gloria Steinem

Thursday, December 26, 2024

View in your browser | Update your preferences ADPro Glory, Gloria Every year our AD100 honorees fill out a survey of projects that they're working on. A year or so ago, longtime AD100 designer

Celeb Homes at the Holidays—and a Few More Things to Make You Merry

Tuesday, December 24, 2024

View in your browser | Update your preferences ADPro Holiday Cheer Whether your taste leans traditional, modern, or all-out extravagant, AD is rife with inspiration for your holiday. In the spirit of

#488: Fun And Useful Gems

Tuesday, December 24, 2024

Radio garden, Zoom backgrounds, visual history of the alphabet and fun interactive experiences. Issue #488 • Dec 24, 2024 • View in the browser Smashing Newsletter Hello Smashing Friends, As we are

Accessibility Weekly #428: Putting AI to the (Accessibility) Test

Monday, December 23, 2024

December 23, 2024 • Issue #428 View this issue online or browse the full issue archive. Hey accessibility friends! It's the time of year where news and information slows down as many people take

2024 magic moments

Sunday, December 22, 2024

Issue 225: The year from my personal lens ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Planning mode

Friday, December 20, 2024

Lessons from our first-ever annual planning sprint ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

We Co-Sign This AD100-Approved Trend

Thursday, December 19, 2024

View in your browser | Update your preferences ADPro Emboldening the Bath Marble, marble, everywhere, and every drop is chic. According to AD100 designer Jake Arnold, “material drenching”—that is,

177 / Keep calm by listening to these ambient sounds

Thursday, December 19, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Dec 2024 • Part 1 View in browser Welcome to Issue 177 Lately, I've been driving a lot of inspiration from the things I see in real life. The range

The Year in Color: Hella Jongerius, Mocha Mousse, and More

Thursday, December 19, 2024

View in your browser | Update your preferences ADPro Color Our World Since the summer, AD PRO has kept its finger on the pulse of color predictions. Overall, the vibe right now is down to earth,

🐺Get Media Features in 2025

Thursday, December 19, 2024

A BIG Wolf Craft announcement!! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏