#429: Front-End Accessibility

With WCAG 2.2 explainers, how to make a strong case for accessibility, accessibility testing and accessible data visualizations. Issue #429 • October 31, 2023 • [View in the browser]( [Smashing Newsletter]( Dzień dobry Smashing Friends, With [WCAG 2.2 released in October]( we now have 6 new success criteria for level A + AA, and 3 new success criteria for Level AAA. Most websites aim to achieve WCAG A + AA compliance. In fact, Geoff Graham [has recently collected WCAG 2.2 explainers]( which cover the update in details. [A Roundup Of WCAG 2.2 Explainers]( [WCAG 2.2 Map (PDF)]( with an overview of all WCAG updates, put together by Intopia. [Quick summary](. Most notably, guidelines suggest UI controls for dragging movements and never obscure a focused element (e.g. with sticky headers or modals). Also, avoid redundant entry. Don’t block copy/paste and avoid CAPTCHAs or cognitive puzzles (AA). And if possible, auto-populate repeated content or allow previous input to be selected. It’s worth mentioning that accessible experiences go way beyond compliance. Test with a wide range of users early to avoid wrong assumptions and expensive last-minute fixes. And as a very minimum, aim for A + AA compliance, which makes websites widely accessible to everyone, including people with and without disabilities. Of course, you can dive deeper into accessibility with our [online workshops]( and [SmashingConfs in 2024](. — [Vitaly]( --------------------------------------------------------------- 1. Mobile Accessibility Testing With Screen-Reader Users Testing accessibility with real users is key to making sure it works for the intended audience. If you feel you do not have the expertise or budget to conduct user testing sessions with users with disabilities, Nielsen Norman Group published a [practical guide to user testing with screen-reader users]( that shows that the undertaking isn’t as intimidating as it might seem at first. [Conducting Mobile Accessibility Research with Screen-Reader Users]( Inspired by a round of in-person user testing sessions that Nielsen Norman Group conducted, the guide outlines suggestions for mobile-usability research with users who are blind or have low vision. It covers everything from recruiting participants to planning the research and running and recording the in-person session. As Tanner concludes, although accessibility testing can be challenging in some ways, it has been some of the most insightful and rewarding research they have ever conducted. (cm) --------------------------------------------------------------- 2. How To Make A Strong Case For Accessibility With many myths and wrong assumptions revolving around accessibility, stakeholders often are reluctant when it comes to accessibility efforts. Let’s fix that! Vitaly shares [strategies and practical techniques to convince stakeholders]( to support and promote accessibility in your company. [How To Make A Strong Case For Accessibility]( To get stakeholders on your side, Vitaly compiled a checklist of things to keep in mind when making a strong case for accessibility. You’ll also get tips for what you can answer to common concerns stakeholders might have, such as considering accessibility an edge case or assuming your product doesn’t have any disabled users. Useful tips to make accessibility more approachable and get the ball rolling in your company. (cm) --------------------------------------------------------------- 3. Getting Color Contrast Right Getting text contrast right is often the first step on a visual designer’s accessibility journey. Of course UI components need to have a minimum color contrast, but it also depends where they live. Oliver Schöndorfer summarized [what’s crucial and required when it comes to color contrast]( to not only meet legal requirements but also make your next web or UI design project more robust and future-proof. [Fix Color Contrast]( In a nutshell: UI elements like buttons need to have a minimum contrast of 3:1 against their background. As Oliver points out, this isn’t always necessary, though, if you have additional signifiers or a clear enough context. For a quick overview of how to meet WCAG 2.2 Level AA requirements, Oliver also created a color contrast cheat sheet with five simple guidelines that help you make your design more accessible to more people. (cm) --------------------------------------------------------------- From our sponsor 🧟 Make Design Less Spooky — Use Drag-and-Drop UI Builder [UX Pin]( Build beautiful and interactive layouts in minutes — without design skills. Prototype with coded components, use React built-in libraries such as MUI, and copy clean JSX code off your design. 👻 [No need to dress up as a designer, use a design tool for devs](. --------------------------------------------------------------- 4. Accessible Interactive Charts Data visualizations are a great way to convey complex information. However, they are often inaccessible, particularly to users with visual or cognitive disabilities. Providing text alternatives can help change that. But how do you tell the story of a complex interactive chart in an engaging way? Huw Alexander shares an interesting approach to creating rich, immersive descriptions: [focus/LOCUS](. [How to write accessible descriptions for interactive charts]( Focus/LOCUS breaks down text alternatives into two parts: First, you provide a brief overview of the content and a structural description of the chart to facilitate spatial awareness and understanding; from there, you can build a logical pathway through the chart’s data elements to tell its story. To give you a better idea of how this works, Huw explores different types of charts and how to describe them — from data-heavy graphs to pie charts and VENN diagrams. (cm) --------------------------------------------------------------- 5. Upcoming Workshops and Conferences Of course we run [online workshops on frontend and design]( be it accessibility, performance, or design patterns. 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. [Smashing Online Workshops]( 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: - [Design KPIs Masterclass]( UX with Vitaly Friedman. Oct 31–Nov 9 - [Accessibility for Designers]( UX with Stéphanie Walter. Nov 6–15 - [Building Modern HTML Emails]( Dev with Rémi Parmentier. Nov 9–17 - [Advanced Modern CSS Masterclass]( Dev with Manuel Matuzović. Nov 27 – Dec 11 - [Successful Design Systems]( Workflow with Brad Frost. Nov 28 – Dec 12 - [Design Management Masterclass]( UX with Slava Shestopalov. Nov 30 – Dec 8 - [Streamlining Your Websites Content]( Workflow with Paul Boag. Dec 7–15 - [Smart Interface Design Patterns]( UX 9h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 6. Screen Reader Testing Setup In times of automated accessibility testing tools, it’s tempting to assume there’s no need for manual accessibility testing anymore. However, automated tools can’t catch every accessibility issue, so to be on the safe side, it’s always a good idea to set up a screen reader testing environment and run some manual tests. Sara Soueidan wrote a comprehensive [guide]( on how to do so. [Setting up a screen reader testing environment on your computer]( The guide walks you through the process of setting up a testing environment on your computer, from downloading virtualization software to installing screen readers and setting up keyboard configuration. You’ll also learn what screen reader and browser combinations are most relevant for your testing work. Handy! Sara has also released [Practical Accessibility]( a wonderful self-paced video course all around building more accessible websites and applications. Highly recommended! (cm) --------------------------------------------------------------- From our sponsor Set up Core Web Vitals Tracking in Minutes! [SpeedCurve]( As a Google search factor for site speed and UX, Vitals are key metrics for you to track. Continuously measure Vitals on your site. Quickly see what you need to fix. Set up alerts to fight regressions and stay fast. [Sign up by December 31 for an extra 10% discount!]( --------------------------------------------------------------- 7. Smashing Books 📚 Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing. In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as [printed books](. Have you checked them out already? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Jump to all books →]( [Success At Scale]( … and we’re currently working on a new book: [Success At Scale]( shipping in fall. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 8. Recent Smashing Articles - [Passkeys: A No-Frills Explainer On The Future Of Password-Less Authentication]( - [What I Wish I Knew About Working In Development Right Out Of School]( - [An Actionable And Reliable Usability Questionnaire With Only 7 Items: Inuit]( - [The Fight For The Main Thread]( - [Read more on Smashing Magazine →]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](