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]( Howdy, 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](#a1) 2. [Accessible Tabs](#a2) 3. [Implementing App-Wide Keyboard Navigation](#a3) 4. [Upcoming Front-End & UX Workshops](#a4) 5. [Find And Fix Accessibility Issues](#a5) 6. [Support User Preferences With prefers-reduced-*](#a6) 7. [Accessible Autocomplete](#a7) 8. [Making Icon Links Accessible](#a8) 9. [New On Smashing Job Board](#a9) 10. [Our Current Most Popular Articles](#a10) --------------------------------------------------------------- #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 Workshops]( 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 [Duda]( 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]( 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 - [Technical Manager]( at netamorphosis (Remote) - [CX Designer]( at AT&T (NYC, USA) - Data Scientist at Alliander (Arnhem, NL) --------------------------------------------------------------- #10. Our Current Most Popular Articles - [Create Responsive Image Effects With CSS Gradients And aspect-ratio]( - [State Of GDPR In 2021: Key Updates And What They Mean]( - [Building Your Own Personal Learning Curriculum]( --------------------------------------------------------------- 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 rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](