February 18, 2025 Smashing Newsletter: Issue #495
This newsletter issue was sent out to 191,802 subscribers on Tuesday, February 18, 2025.
Editorial
When it comes to accessibility, there are quite a few misonceptions and wrong assumptions. Accessibility doesn’t mean boring, it doesn’t mean using Comic Sans or Open Dyslexic, and it most certainly doesn’t mean optimizing for edge cases. Accessibility is better for everyone, and everyone can only benefit from it.
And in this newsletter, we aim to uncover just that — a diversity of accessible fonts, inclusive design patterns, accessible drag-and-drop, and how to design for people with ADHD. We hope you’ll find it helpful.
We also would love to see you at our upcoming online workshops and conferences:
- Smashing Meets Accessibility Free with Stéphanie Walter, Sarah L. Fossheim and Kardo Ayoub (+ Geoff Graham as MC!),
- Smashing Meets CSS Free with Adam Argyle, Julia Miocene and Miriam Suzanne (+ Geoff Graham as MC!),
- Advanced Design Systems Workflow with Brad Frost,
- Figma Workflow Masterclass Workflow with Christine Vallaure,
- Smart Interface Design Patterns UX (+ video course) with Vitaly Friedman,
- Enterprise UX Masterclass UX with Marko Dugonjić.
We hope you’ll find them useful — and of course, we are looking forward to seeing you online and offline, everyone!
— Vitaly
1. Free Accessible Web Fonts
According to estimates, one out of ten people have dyslexia, and 70–80% of people with poor reading skills are likely dyslexic. By choosing highly legible typefaces for our UIs, we can improve comprehension, not only for people with dyslexia but also for people with ADHD and poor vision. But which typefaces are a good choice in terms of legibility and design-wise?
Designed in 2019, Braille Institute’s family of Hyperlegible Fonts is already a modern classic, which has made it the Cooper Hewitt, Smithsonian Design Museum’s permanent collection. With clear, highly distinctive letters and numbers, it makes reading easier and more accessible.
The latest addition to the family was introduced just recently: Atkinson Hyperlegible Next. It comes with seven weights — Light to Extrabold in upright and italic styles. A variable version is also available.
For more options, also be sure to check out Vitaly’s compilation of free accessible web fonts. Designed to maximize character distinction and support dozens of languages and styles, they are a great choice for both long-reading text and UIs, even in AR/VR environments. (cm)
2. Inclusive Design Patterns 2025
What does the European Accessibility Act mean for you? How would you design for young children and older adults? What about users with dyslexia and color blindness? How do we test with screen reader software? What about multilingual UX and localization issues? And what should we keep in mind when designing sustainable, inclusive, and privacy-friendly experiences — e.g., for mental health applications or LGBTQI-friendly forms?
Back in September, Vitaly ran a practical 3.5h-workshop in which he dived deep into UX and design guidelines, hundreds of real-life examples, best practices, and guidelines for truly accessible, inclusive, universal design. The full video recording is available on Zoom and YouTube, and in the accompanying Google Doc, you’ll find links to slides, collaborative notes, and useful inclusive design resources. Happy watching! (cm)
3. Accessibility Annotations Plugin
To help make accessibility considerations a natural part of the design phase of any project, members of the accessibility and design teams at eBay created a handy accessibility annotation tool for Figma: Include.
The idea behind Include is to make annotating for accessibility easier — easier for designers to spec and easier for developers to understand what is required. A neat little helper to document accessibility considerations with landmarks, focus grouping, headings, reading order, touch targets, alternative text, color contrast, and responsive reflow. (cm)
4. The Book On Accessibility
While there are a lot of guides out there on how to write accessible code, finding actionable advice on how to adopt an accessibility mindset and build an accessibility program is rather difficult. Charlie Triplett wanted to fill that space in the digital accessibility landscape and wrote a plain-language operational guide that describes accessibility in ways everyone can commit to: The Book on Accessibility.
Packed with insights and straightforward approaches for building a culture that values inclusion, the playbook helps you create an accessibility compliance program in your company.
From getting leadership buy-in and setting strategic goals to turning commitment into action and solving common problems, the guide offers a 360-degree look at creating a structure capable of supporting digital accessibility. You can read the guide online for free. However, a few chapters require a paid account. (cm)
5. Upcoming Workshops and Conferences
That’s right! 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 Token & UI Component Architecture Workflow
with Nathan Curtis. Feb 20–28 - Deep Dive on Accessibility Testing Dev
with Manuel Matuzović. Feb 26 – March 13 - Building Modern HTML Emails dev
with Rémi Parmentier. Mar 3–11 - Accessibility & Inclusive UX UX
with Vitaly Friedman. May 7–15 - The Secrets of Web Performance dev
with Ryan Townsend. May 7–21 - Jump to all workshops →
6. Accessible Drag-And-Drop
Drag-and-drop is a visual, pointer-based interaction. So, how can we translate it into a delightful experience for assistive technology users? That’s the question the Atlassian team asked themselves when redesigning their drag-and-drop solution. Apart from making it more consistent and performant, they also wanted their drag-and-drop to be more accessible across the board.
Instead of trying to get assistive technologies to perform drag-and-drop operations, Atlassian’s “pragmatic drag and drop” enables them to achieve the same outcomes by adding an action menu to draggable entities, which includes menu items that allow all movement outcomes to be achieved.
If you want to dive deeper into accessible drag-and-drop, the team also published a set of guidelines for creating accessible drag-and-drop alternatives, and if you want to use the pattern in your work, you can find it open source on GitHub. (cm)
7. Designing For People With ADHD
When talking about accessibility, people most often think of three types of disabilities: blindness, deaf and hard of hearing, and mobility impairments. Cognitive disabilities like dyslexia, ADHD, or Autism Spectrum Disorder are seldom part of the discussion. Time to change that!
Product designer Eva Katharina Wolf was diagnosed with dyslexia and ADHD and combines her personal experience and her UX knowledge to shine a light on how UX designers can improve the experience for neurodivergent people.
In her article “Software accessibility for users with Attention Deficit Disorder (ADHD),” she dives deeper into typical ADHD symptoms and shares practical examples of how good design can help mitigate ADHD effects. Small changes that, as so often when it comes to accessibility, create a better experience for everyone. (cm)
8. Recently Published 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 by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Check out 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.