Smashing Magazine - #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 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:


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?

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


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

#428: Useful Front-End Tools

Tuesday, October 24, 2023

With online workshops, modern CSS, calculators, useful front-end tools and resources. Issue #428 • October 24, 2023 • View in the browser Smashing Newsletter Hello Smashing Friends, What are some of

#427: Design Systems

Thursday, October 19, 2023

SmashingConfs 2024, design systems, how to organize design tokens, best practices, design documentation and how to decide on new design system components. Issue #427 • October 17, 2023 • View in the

#426: Data Visualization & Dashboards

Tuesday, October 10, 2023

Designing and building better dashboard UIs, designing better charts, and making smarter decisions around data visualization. Issue #426 • October 10, 2023 • View in the browser Smashing Newsletter

#425: Designing for Mobile

Tuesday, October 3, 2023

State of mobile UX, accessibility target sizes on mobile, iOS and Android, optimal font size, navigation patterns and layout grids. Issue #425 • October 3, 2023 • View in the browser Smashing

#424: Design Inspiration and Eye-Candy

Tuesday, September 26, 2023

With eye candy, rebranding, pricing plans, Canadian typography archive, and Indian street lettering. Issue #424 • September 26, 2023 • View in the browser Smashing Newsletter Boa noite Smashing Friends

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏