Accessibility
Here’s how to instruct a LLM to reference the ARIA Authoring Practices Guide
Say you’re working with a LLM and training it to write good frontend code. Good frontend code is accessible code, so of course you want to instruct the LLM to produce it.
However, the bulk of frontend code on the web is inaccessible to some degree. Also know here that LLMs are trained on the majority of the world’s frontend code. Similarly, many contemporary LLM-friendly UI libraries claim to be accessible, but may have varying degrees of support when manually evaluated.
The deck is a bit stacked, folks.
Given that, you need to get creative about how to handle the LLM’s training. It might seem like a good idea to instruct an LLM—reference, skill, agent, sub-agent, what have you—to reference the ARIA Authoring Practices Guide, because it lists a lot of common UI patterns, right?
Well, sorta.
Accessibility Agents
Accessibility review agents for Claude Code, GitHub Copilot, and Claude Desktop. Eleven specialists that enforce WCAG 2.2 AA compliance so AI coding tools stop generating inaccessible code.
AI and automated tools are not perfect. They miss things, make mistakes, and cannot replace testing with real screen readers and assistive technology. Always verify with VoiceOver, NVDA, JAWS, and keyboard-only navigation. This tooling is a helpful starting point, not a substitute for real accessibility testing.
Using the browser console for accessibility testing
Did you know that with some simple JavaScript, you can highlight headings, display accessible names, check image alternatives, outline landmarks, and inspect many other accessibility features on any page?
Let’s explore how to open the console and use a few simple scripts to inspect accessibility features on any page.
CSS
CSS Animation Triggers: Playing animations on scroll without scrubbing
Scroll-driven animations have been one of my favorite features to land in CSS. Being able to play animation progress to scroll positions opens up so many possibilities. But I always felt that something was missing: sometimes you don't want to scrub through an animation. Sometimes you just want the scroll position to determine when an animation plays, not how it plays, which for me was a far more common pattern in the past. Well, with scroll-triggered animation, this final piece of the puzzle is there
Reduce the JS Workload with no or low-JS options
The web is choking on JS. So as HTML and CSS continue to get stronger, we should transfer any JavaScript workload possible to them.
This is an organic collection of common JS patterns that can be replaced with just HTML, CSS, and no, or very low, JS. As HTML and CSS continue to mature, this collection should expand.
Tailwind CSS v4 Container Queries: Modern Responsive Design
You build a responsive card component with md:flex-row and lg:gap-6, test it in a full-width grid, and everything looks perfect. Then a designer drops that same card into a 300px sidebar, and the layout crumbles. This is the fundamental flaw that Tailwind CSS v4 container queries fix: media queries respond to the viewport, not to the space a component actually occupies.
Tailwind CSS v4 ships native container query utilities that let components query their parent container's dimensions instead of the browser window. In this CSS container queries tutorial, I'll walk through the new syntax, migrate a real component from viewport breakpoints to container breakpoints, and lay out practical guidelines for when each approach still makes sense. Browser support? Container queries hit Baseline 2023. Chrome 105+, Firefox 110+, Safari 16+. You can ship this today.
BEMoji — The Emoji-First CSS Framework
BEMoji is a production-grade utility and component framework built entirely on emoji class names. Semantic, systematic, and completely illegible to anyone without the docs.
It works. We're as surprised as you are.
Underlining Links With CSS
For years, styling underlines on links meant either accepting the default look or hiding underlines entirely with text-decoration: none; and relying on other styling methods like borders or box-shadows to indicate interactivity. But CSS now gives us a whole set of text-decoration properties that let us get really specific about how our underlines should look and behave.
Typographic Scales in CSS with :heading(), sibling-index(), and pow()
Learn how to build flexible, mathematical typographic scales using :heading(), sibling-index(), and pow() for cleaner CSS design systems.
border-shape: the future of the non-rectangular web
Creating non-standard shapes on the web, like a speech bubble or a heart have typically required you to cut off your actual borders with clip-path. More recently, corner-shape landed in Chrome, which gives us more options for styling how a corner looks, but is still quite limited.
border-shape is currently available for testing in Chrome Canary 146+ with the experimental web platform features flag turned on. Part of the CSS Borders and Box Decorations Module Level 4, this property allows developers to define the geometry of an element’s border using the same flexible syntax we use for paths and shape().
Tailwind CSS Style Guide — Visual Reference & Cheat Sheet
A comprehensive visual Tailwind CSS reference with live examples. Built by the engineering team at Winkelstraat.nl.
Scroll indicators on tables with background colours using animation-timeline
Imagine a HTML table, with alternating rows with different background colours. The table content overflows the container on the right but on a mobile browser, with no obvious scrollbar, there is no affordance to know the table is overflowing. I want to have a shadow/indicator on the side of the table that is overflowing the container.
An in-depth guide to customising lists with CSS
Richard Rutter helps you to make sense of list-style, list-item, ::marker, counters(), counter(), @counter-style, symbolic, symbols(), symbols and more to push your HTML and CSS lists to the next level.
The Hidden Trick of Style Queries and if()
Explains how modern CSS supports conditions using two related features — inline if() expressions and style queries — both of which use the style() function to check a condition. It highlights an important nuance: using style(--var: value) does a strict match of computed values, while style(--var = value) performs a numeric comparison, so the same condition can behave differently depending on which syntax you use.
Everything you never wanted to know about visually-hidden
Discusses the .visually-hidden CSS class, a standard technique for concealing content from sighted users while keeping it fully accessible to screen readers and assistive technologies. It explains the precise CSS properties that ensure the element remains in the accessibility tree without altering layout or causing issues in older browsers or specific screen readers like NVDA and JAWS. Also covers refinements for focusable elements (skip links) using :not(:focus) to make them visible on keyboard interaction, emphasizing robust, cross-compatible implementation for better web accessibility.
120+ Beautiful CSS box-shadow Examples
Discover 120+ stunning CSS box-shadow examples ready to copy and paste. From subtle shadows to dramatic effects, find the perfect shadow for your next web project.
HTML
Standard HTML Video & Audio Lazy-loading is Coming
A quick update on my team's work to bring video and audio lazy loading to browsers today.
JavaScript
Don't Use Next.js If You're Building for the Long Term
This isn’t an argument that Next.js is unusable. It’s an argument that it optimizes for a different goal than long-term durability.
KeyframeKit - Play CSS-defined animations with JavaScript
While working with the Web Animations API, I was surprised there wasn't an easy way to import animation keyframes directly from your CSS. You had to re-define them in JS, using a completely different format. So I wrote a typed, spec-compliant library to convert from one to the other, letting you play your CSS-defined animations right in JS. Along the way, I also added some other useful utilities for working with the API.
Goodbye innerHTML, Hello setHTML: Stronger XSS Protection in Firefox 148
Cross-site scripting (XSS) remains one of the most prevalent vulnerabilities on the web. The new standardized Sanitizer API provides a straightforward way for web developers to sanitize untrusted HTML before inserting it into the DOM. Firefox 148 is the first browser to ship this standardized security enhancing API, advancing a safer web for everyone. We expect other browsers to follow soon.
From instanceof to Error.isError: safer error checking in JavaScript
Why instanceof Error fails across realms in JavaScript, and how Error.isError() fixes it.
JavaScript now has Error.isError(value), a realm-safe way to answer, “Is this actually an error?” It’s one of those APIs that feels obvious in hindsight.
A Complete Guide to Bookmarklets
Browsers don't just let you bookmark web pages. You can also bookmark JavaScript, allowing you to do so much more than merely save pages.
Miscellaneous
Remix Icon - Open source icon library
Open-source neutral-style system symbols elaborately crafted for designers and developers. All of the icons are free for both personal and commercial use.
Claude Code Frontend Design Toolkit
Everything I've found that actually makes Claude Code output better-looking frontends. Skills, plugins, MCP servers, CLAUDE.md tricks — organized by what you're trying to do.