October 31, 2023 Smashing Newsletter: Issue #429
This newsletter issue was sent out to 209,484 subscribers on Tuesday, October 31, 2023.
Editorial
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 detail.
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 entries. Don’t block copy/paste, and avoid CAPTCHAs or cognitive puzzles (AA). 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.
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.
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 on 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.
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)
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.
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.
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.
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)
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 →
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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.