Accessibility
Alt Text for E-Learning: What to Write, and What to Check
Which images need a description, which should be silent, and what to write for the ones in between. Plus the nine faults that make alt text worthless even when every image has some, and how to find them across a whole course.
Automated screen reader testing with Claude Code, VoiceOver and Gherkin
A step-by-step guide to get Claude Code to drive VoiceOver on a Mac, using Given, When, Then scenarios to describe what a screen reader user should hear.
Accessible Load More Pattern
An accessible load more pattern makes sure screen reader and keyboard users know when new results load in or fail, pick up at the start of the new batch, and can tell how far through the full result set they are.
Understanding aria-activedescendant
This article explains aria-activedescendant in plain language, starting with a familiar native <select> and then showing what changes when developers build their own custom version.
Accessibility statements now have a home on GitHub
GitHub now highlights ACCESSIBILITY.md files and helps maintainers document accessibility goals, known barriers, supported environments, and more.
CSS
A Spring Connector Using Anchor Positioning and border-shape
After the low-quality Zig-Zag connector, here is a more robust one: a spring connector. Another fun demo powered by Anchor Positioning and border-shape.
true or false in CSS
CSS has boolean values and logic, just not in the way we might expect. While a native boolean data type might still appear one day, we can use boolean principles today for programming logic and flags. Let’s see how.
Taming Typography: Building a Modern CSS Reset
CSS can now make choices about type that used to sit outside a reset. text-wrap: pretty can prevent a stranded word, container query units can scale a heading to the column it occupies, and text-box can trim the half-leading built into a line box. Some of these features are experimental and browser support is uneven, so they need guardrails rather than blind inclusion.
I’ve put together tidy-typography.css, which gathers the useful parts into a default stylesheet: rendering and fallback rules, fluid sizing, vertical rhythm, wrapping, hyphenation, and OpenType detail.
Use it whole, or take the declaration that solves the particular irritation in front of you. I’ll walk you through all the details in this article and give you the full code at the end.
Creating Diagrams and Graphs Using Modern CSS
We have a great technique to connect two elements with a line you can shape using border-shape and shape().
In this article, we will explore more types of connections commonly used to create graphs and diagrams. Of course, we can’t cover them all, but the technique is generic, so if you understand it well, you can easily tweak the code to create your own connections.
Computing with CSS Layout - Bulk math from the browser’s own layout algorithms
Not every website runs JavaScript. A browser may turn it off, a security policy or an extension may block it, or it may just not load. Meanwhile, HTML and CSS are what the web platform guarantees, even offline.
This document tries to answer one question: how much can CSS compute on its own?
Pseudo-pseudo-classes for maximum interactive demos
Have you ever wanted to display all variants of a Button next to each other in your Storybook like your designer did in Figma? But then you come to a screeching halt when you realize :hover, :active, :focus don’t work without user-interaction? Whatever can we do?
Groundbreaking Upgrade to SVG is Approaching: Linked Parameters Are Almost Here
Highlights the impending arrival of Linked Parameters for SVGs—a long-awaited feature allowing developers to finally style and pass variables/parameters into external SVGs (whether loaded via <img>, background-image, etc.) straight from external CSS.
JavaScript
React Trace
A development-time React inspector that helps you identify rendered components, resolve their source locations, and run source-aware actions.
edge-aura — organic screen-edge glow
An organic glow that hugs the edge of your screen. Zero-dependency Canvas 2D engine with a thin React adapter.
EmbedPDF — Open Source PDF Solutions
The ultimate Open Source PDF viewer for JavaScript. Choose our drop-in component for instant results, or use our headless library to build a completely custom UI.
Britecharts 3.0: Accessible D3 Charts for JavaScript and React
Britecharts 3.0 brings accessible D3 charts, keyboard navigation, dark mode, TypeScript support, and a new treemap to JavaScript and React.
Your JS Error Is Lying to You
A JavaScript Error is a runtime object, and what you learn from it depends on the tool that inspects it. Follow a failure through creation, stack traces, cause chains, runtimes, serialization, process boundaries, and logs to see what survives.
Miscellaneous
Beyond the viewport: Introducing Site Seeing
Why testing for the viewport size isn't enough, and a look at a tool I built to help in solving that.
Direct link here.
Modern Web Guidance 1.0: The web platform expertise your coding agent is missing
In this new era of agentic web development, developers expect their coding agents to be experts at building for the web. And while the latest frontier coding models are quite capable and can usually produce something that works, if you ask a web development expert to review the AI-generated code, they can almost always find ways to make the code faster, more accessible, or more secure.
Modern Web Guidance is a set of skills that embed web platform expertise, best practices, and browser compatibility data directly into your coding agents.