#564: Accessibility Guidelines and Techniques

Free accessibility book, accessible tooltips, virtual scrolling, accessibility context systems and inaccessible AI-generated UIs. Issue #564 June 23, 2026 View in the browser

Smashing Newsletter

Dear Smashing Friends,

Have we fixed front-end accessibility yet? Well, not really. Pages are getting significantly denser and more complex. The number of accessibility issues has increased by 10.1% from 51 errors in 2025 to 56.1 errors in 2026.

After all these years, these errors haven’t changed at all. They are still related to poor color contrast, missing alt-text, missing form input labels, empty links and empty buttons. And: there is more ARIA code being deployed, but often implemented poorly, and so without any accessibility improvements as a result.

In this newsletter, we explore why AI doesn’t solve accessibility issues and highlight some useful accessibility techniques, tools and guidelines. We would also like to invite you to our Smashing Meets Sustainability online (free!) session tomorrow, where we’ll share a few hours of knowledge, inspiration, and practical learning! Get your ticket →

Smashing Meets Sustainability
Join three leading sustainability experts on Wednesday, June 24 at 8–11 AM PDT 🌍. Tickets are free for our community, so why not join and spread the love!

We are getting ready for SmashingConf Antwerp 2026 🇧🇪, our conference on design & UX, for designers and UI engineers who love the web. Also coming up are online workshops — a friendly way to learn practical, actionable insights from experts:

The Modern UX Practitioner


Today’s newsletter is kindly powered by our friends at Level Access, who help folks manage and maintain the accessibility of their websites, apps, digital products, and grow their brands while improving user experience.

Hats off to the Level Access team for their hard work and continued support of the web community! 🧡

Vitaly


1. AI-Generated UIs Are Inaccessible

AI code-generation tools can produce a React sidebar component in just a few seconds. And while the result looks correct, the component lacks the semantic information needed by assistive technologies. To fix that, Durgesh Rajubhai Pawar proposes a five-layer enforcement system of prompt constraints that ensures semantic correctness.

AI-Generated UI Is Inaccessible By Default


2. Accessibility Context System

Accessibility shouldn’t be an afterthought but a technical precondition for use. Following this credo, Felipe A. Carriço created A11Y.md, a context system for building accessible software by default. It is designed to integrate with AI code-generation tools to ensure the output complies with WCAG 2.2 AA and ADA standards. You can also use A11Y.md as a checklist for human-review workflows.

Accessibility Context System


3. Accessible Tooltips

Tooltips might seem like a small detail in a UI, but if they are inaccessible, they can become a dead-end for users who rely on that information. So, what could a tooltip pattern look like that works for everyone? Rembrand Le Compte tested for real-world use cases to find the best tooltip solution for different contexts.

Tooltips That Work For Everyone


4. Accessibility For Everyone

Accessibility can seem challenging, but it doesn’t have to be. To help you navigate the accessibility landscape, Laura Kalbag made her book Accessibility For Everyone available for free. Covering everything from understanding impairment challenges to learning how to plan for, evaluate, and test accessible design, the book is perfect for anyone who wants to build a solid set of accessibility best practices.

Accessibility For Everyone


5. Virtual Scrolling For Billions Of Rows

A table that can handle billions of rows, while remaining performant and keyboard accessible? The <HighTable> React component masters the challenge with ease. Sylvain Lesage provides insights into the five techniques that make the seamless scrolling experience possible. They all rely on native HTML elements. No need for a fake scroll bar, no need to render the table in a canvas, just the power of the web platform.

Virtual Scrolling For Billions Of Rows


6. Accessibility Guidelines And Design Patterns

People who rely on screen readers or their keyboards to browse the web are often the first to come to mind when thinking about accessibility. But accessibility goes much further. To reflect the diversity of accessibility needs, Vitaly put together a collection of accessibility and inclusive design guidelines that cover everything from ADHD and designing for children to cognitive load and dementia.

Accessibility Guidelines And Design Patterns


7. Accessibility Resources And Playbooks

How can disabled people be supported at work? What could a more inclusive social media presence look like? And what’s to consider when creating inclusive personas? The accessibility resources library by Stark Labs features ten themed collections with handpicked resources around different accessibility topics that answer these questions and many more.

To promote inclusive design in your team, also be sure to check out the Playbook for Universal Design. It explores methods for running inclusive innovation workshops, with step-by-step instructions and tips for including disabled participants.

Playbook for Universal Design


8. Accessible UX Research, Now Shipping 📚

We’ve got exciting news! Our newest Smashing book, Accessible UX Research by Michele A. Williams, is finally shipping worldwide! Get the book right away or order the eBook for instant download.

Accessible UX Research
Meet our brand-new book: “Accessible UX Research” by Michele A. Williams. Printed copies shipping now.

Accessible UX Research is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Download a free sample (PDF, 2.3MB) or get the book right away.


9. 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.

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:


10. Person Of The Week: Marie-Claire Dean

Please give a warm round of applause for our Person of the Week: Marie-Claire Dean. MC has a PhD in Conversational AI and has been a practitioner of AI for over a decade. She currently leads design for Google's Shopping tab and local shopping across AI Mode and Gemini.

The Person of the Week is Marie-Claire Dean.

Combining research and practice, MC runs The Percolator, a Substack where she publishes weekly essays at the intersection of AI, design, product, and creative leadership. She explores philosophical questions around AI but also shares frameworks and AI skills that designers can apply right away.

Thank you for everything you do for the community, dear MC! 🧡


11. 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, Vitaly Friedman, and Iris Lješnjanin.


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Mastadon Join us on Bluesky

Popular posts from this blog

Would you pay Meta £14.99 p/m for this?

🎧 How to Use Claude Code as a Second Brain

How I Use Claude Code to Ship Like a Team of Five