Smashing Newsletter #289: Front-End Accessibility

With accessible modals, tabs, autocomplete, icons, keyboard navigation and user preferences. Issue #289 Tue, Feb. 23, 2021 View in the browser 💨

Smashing Newsletter


Building accessible pages and applications isn’t easy. We have to keep in mind how our sites and applications work with a keyboard alone, whether navigation landmarks are properly assigned, how updates are announced by a screen reader, and whether we avoid any inaccessible libraries or third-party scripts. And then, for every component we are building, we need to ensure that we keep them accessible over time.

In this issue, we’ve collected a couple of useful libraries and case studies to get accessibility just right: from accessible modals, tabs, and autocomplete to keyboard navigation and accessible icon links. Our sincere hope is that they will help you improve the accessibility and usability of your products, so next time you have to find a solution, it will be less daunting and more straightforward than before you opened this very newsletter.

And if you are looking for a deeper dive into psychology and usability, we have some online workshops on UX & front-end that you, or your wonderful colleagues, may find useful as well.

Stay smashing, everyone!
— Vitaly (@smashingmag)

Table of Contents

1. Accessible Modals
2. Accessible Tabs
3. Implementing App-Wide Keyboard Navigation
4. Upcoming Front-End & UX Workshops
5. Find And Fix Accessibility Issues
6. Support User Preferences With prefers-reduced-*
7. Accessible Autocomplete
8. Making Icon Links Accessible
9. New On Smashing Job Board
10. Our Current Most Popular Articles

1. Accessible Modals

You might have a simple modal or overlay on the page, perhaps to confirm the customer’s input, or to show a couple of photos in a gallery, or just to confirm the user’s preferences. In all these cases, building an accessible modal will turn out to become quite an adventure, also known as a focus trap.

Accessible Modals

As Eric Bailey explains in detail, you’ll need to identify the bounds of the trapped content, including the first and last focusable item, then remove everything that isn’t within it, move focus into the trapped content, listen for events that escape the boundary, restore the previous state and move focus back to the interactive element that triggered the trapped content.

Ideally, we’d use something as simple as the dialog element in HTML, but unfortunately, it has massive accessibility issues. We’ll soon be able to use the inert attribute to remove, and then restore the ability of interactive elements to be discovered and focused. For the time being though, we can look into Hugo Giraudel’s a11y-dialog, a lightweight (1.6 KB) script that traps and restores focus, toggles aria–* attributes, closes dialog on overlay click and Escape, and even allows you to leverage the native dialog element if desired. (vf)

2. Accessible Tabs

If you’ve been looking for a responsive and accessible solution for tabs, TabPanelWidget might be just what you need. It relies on plain old semantic HTML, is keyboard-friendly and turns into an accordion whenever the tabs cannot fit entirely (thanks to ResizeObserver but there’s a polyfill for browsers that don’t support it).

Accessible Tabs

The script is not only a semantic and accessible solution, but also a responsive and versatile one to help you create Tabpanel and accordion widgets for the web. It is available as a vanilla JS library (or as a widget for View, React and Angular). (vf)

From our sponsor

A Massive Library Of 600+ Pre-Built Websites

BAW Media
$59 only. Use it for any type of project. Discover more!

3. Implementing App-Wide Keyboard Navigation

A well-thought-out concept for keyboard navigation benefits everyone: It enables people who can’t comfortably use a mouse, assists screen reader users in interacting with an application, and it provides power users with more keyboard shortcuts to work as efficiently as possible. Usually, keyboard support is limited to specific shortcuts, but the team at Discord decided to go a step further with their application and expand keyboard support to, well, everything.

How Discord Implemented App-Wide Keyboard Navigation

The case study “How Discord Implemented App-Wide Keyboard Navigation” shares valuable insights into how they tackled the task — and the challenges they faced along the way, of course. One turned out to be particularly difficult: How to consistently indicate where the focus is on the page? As existing solutions for Focus Rings didn’t work out, the team had to build their own solution from scratch and made the code open source. If you’re facing a similar challenge, this one’s for you. (cm)

4. Upcoming Front-End & UX Workshops

The web is beautifully diverse and fragmented, but it provides incredible opportunities, and we want to keep it this way. So as it happens, we have some friendly online front-end & UX workshops dedicated to design systems, web performance, and front-end in 2021.

Smashing Online Events

Our workshops are packed with practical examples, video recordings and friendly Q&A sessions. Each and every workshop has been a truly smashing experience with wonderful folks from all over the world. There are still some early-birds left, with a lil’ friendly discount. Perhaps you’d like to join us and recommend to others — just sayin’! ;-)

5. Find And Fix Accessibility Issues

Does your text have enough contrast? Does your site work well in bright sunlight? And is it usable for people who prefer reduced motion? Built with a focus on accessibility, the Polypane browser offers a number of tools to make finding and fixing potential accessibility issues like these more effective.

Find and fix accessibility issues with Polypane

If you are already using Polypane, the team published a great blog post that shows you how to use Polypane to audit and fix common accessibility bottlenecks such as contrast issues, page structure, code quality, and more. And even if you aren’t a Polypane user, the post is still worth a read as the tips are universal and bound to help you create accessible experiences no matter which tools you use. (cm)

From our sponsor

Time For A Great Partnership

Been waiting for the right time to partner with a website builder? That time is now. Partner with Duda and get the entire white label editor under your brand. Includes free AWS domain hosting, high-quality integrations, and award-winning customer support! Save 50% on selected new plans. The sale ends Feb 24th. Save now with Duda →

6. Support User Preferences With prefers-reduced-*

Not every user is the same, and while some users love animations, others may have medical issues concerning motion. The prefers-reduced-motion media query lets you toggle animations on and off, but there are even more solutions to manage animations depending on a user’s preference. In his blog post, Elijah Manor addresses different techniques such as @media, matchMedia, and a custom React hook to address CSS, SVG SMIL, and JavaScript animations.

Use the prefers-reduced-motion media query to toggle CSS and JavaScript animations

When it comes to making your content accessible to everyone, there’s another prefers-reduced-* media query that is worth knowing about — even though it isn’t supported by browsers yet (but you can emulate it in Polypane, Firefox and Chromium browsers): prefers-reduced-data. It indicates when a user wants to use as little data as possible — if their connection is slow, for example, or if data is limited. The Polypane team summarized what you need to know about the media query to future-proof your site already today. (cm)

7. Accessible Autocomplete

Every time you have to deal with a larger data set, be it a map, a data visualization, or just a country selector in checkout, autocomplete can speed up customer’s input massively. But just as it helps with the input, it needs to help with announcing the options and the selection to the screen reader users as well.

AlphaGov, the team behind the Government Digital Service in the UK, has open-sourced accessible-autocomplete (among many other things), a JavaScript component that follows WAI-ARIA best practices. You can choose when to start displaying suggestions, and allows you to display the menu as an absolutely positioned overlay, or select the first suggestion by default. The team also provides a demo page, with a dozen of accessible autocomplete examples and implementations. (vf)

From our sponsor

Get Paid For Your Feedback

Wynter is looking for designers and developers to join its research panel. Give feedback to digital products and copy, get paid $90-$180/hr. Super low key commitment, 10-15 mins per survey. Learn more about Wynter Research panels →

8. Making Icon Links Accessible

It’s not uncommon to have a link or button that visually has no text but consists only of an icon — a compact navbar, for example, or social icons. But how do you make sure that these kinds of icon links are fully accessible? As it turns out, it’s not as straightforward as one might think.

Accessible icon links

To show how we can do better, Hugo Giraudel dedicated an article to the issue. He uses an icon link consisting of an SVG with the iconic Twitter bird to illustrate the point, and shows step by step how to make it accessible: with a descriptive text that is visually hidden, then removing the SVG markup from the accessibility tree with aria-hidden, and, finally, correcting the fact that svg elements can be focused on Internet Explorer by adding the focusable attribute. At the end of the article, Hugo also shows how to turn all of this into a little React component. A detail that will make a huge difference for a lot of users. (cm)

9. New On Smashing Job Board

10. Our Current Most Popular Articles

That’s All, Folks!

Wow, you’ve made it this far! We hope you’ve found at least one useful, practical tidbit that will help you get better at what you do. As you see, there are so many talented folks out there working on so many brilliant projects, and we’d sincerely appreciate it if you could help spread the word and give them all the credit they deserve!

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

Smashing Newsletter #288: Useful Little CSS/JS Helpers

Tuesday, February 16, 2021

With VS Code Settings sync, responsive debugging and blurred image placeholders. Don't forget to share your thanks and appreciation, dear folks! Issue #288 • Tue, Feb. 16, 2021 • View in the

Smashing Newsletter #287: Interface Design Edition

Tuesday, February 9, 2021

With useful Figma and Sketch Plugins, interface design tools, web typography helpers and generative doodles. Issue #287 • Tue, Feb. 9, 2021 • View in the browser 💨 Smashing Newsletter Meow, There were

New Live Workshops On Front-End & Design.

Thursday, February 4, 2021

Live workshops on web performance, design systems, CSS, SVG, navigation and smart interface design patterns. From front-end to design — to help your boost your skills online. Live workshops on front-

Smashing Newsletter #286: Accessibility

Tuesday, February 2, 2021

With accessibility tools, techniques and useful resources to make your websites and apps more inclusive. Issue #286 • Tue, Feb. 2, 2021 • View in the browser Smashing Newsletter Dear Friend, Everyone

Smashing Newsletter #285: JavaScript Edition

Tuesday, January 26, 2021

With clean and tidy JavaScript, vanilla JavaScript snippets, async JavaScript, architecture of large applications, Puppeteer and Playwright. Issue #285 • Tue, Jan. 26, 2021 • View in the browser

Hollywood Regency Meets the Upper East Side in Manolo Blahnik's New Manhattan Flagship

Monday, June 21, 2021

Plus, 7 ways to save a project before things start to go wrong (image) Architectural Digest AD PRO Logo Image may contain: Grass, Plant, and Lawn Move Over, Marie Antoinette—These Giant Animal

✏ What’s Coming in WordPress 5.8, Free Developer Stuff, 12 CSS Parallax Effects, and more...

Monday, June 21, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU What's Coming in WordPress 5.8 (Features and Screenshots) WPBEGINNER.COM COMMENTS How to Use Dynamic Imports in

🖥 Sleek Landing Page Designs + 🏆 Challenge Updates

Monday, June 21, 2021

The Designer Digest Is Floating Your Way 🎈 To begin, we'd like to congratulate Faiz Abiyandani, the winner of our latest 🏃‍♀️Fitness App Challenge! Next, don't forget that the second week to

Camping Out in a 3,000-Square-Foot Loft

Monday, June 21, 2021

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman The living room. Photo: Annie Schlechter

Accessibility Weekly #245: When CSS Isn’t Enough

Monday, June 21, 2021

Sponsored by Automattic. They're hiring. June 21, 2021 • Issue #245 View this issue online or browse the full issue archive. Featured: When CSS isn't enough: JavaScript requirements for

Voice UI, Sharp Images, Philip K. Dick, Windows Layers, CSS Paint API

Monday, June 21, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 21 2021 An Alternative Voice UI To Voice Assistants

✏ How to Avoid SEO Disaster, 6 Types of Web Design, Simply Markdown, and more...

Sunday, June 20, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU An Alternative Voice UI to Voice Assistants SMASHINGMAGAZINE.COM COMMENTS Simply Markdown - Easy Create Markdown with

✏ Is AMP Dead and Do We Care? React Markdown Editor, Bad vs Good Designs, and more...

Saturday, June 19, 2021

Poll: Is AMP Dead, and do We Care? WEBDESIGNERDEPOT.COM COMMENTS Bad Vs Good Accessible Designs USABILITYGEEK.COM COMMENTS Client-Side Routing in Next.js SMASHINGMAGAZINE.COM COMMENTS React Markdown

The 25 Best Accent Chairs, According to AD100 Designers

Friday, June 18, 2021

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our new weekly roundup of the best designs to source

✏ 40 Javascript Memes, CSS Specificity Calculator, HTML Semantic Tags Sheet, and more...

Friday, June 18, 2021

The Problem with UX/UI Portfolios MARKBOULTON.CO.UK COMMENTS CSS Specificity Calculator POLYPANE.APP COMMENTS Your Image is Probably not Decorative SMASHINGMAGAZINE.COM COMMENTS Top 40+ Javascript