Category: Accessibility

Design-System Maturity: A 6-Dimension Framework

Summary:  Use this maturity model to assess your design system’s health and identify where to focus next. Design-system maturity frameworks often follow a linear progression: you start by building components, move to driving adoption, hit the growing pains of scale, and eventually reach a steady state of governance and evolution. But design systems don’t mature… Continue reading Design-System Maturity: A 6-Dimension Framework

Day 86: the initial-letter property

The initial-letter property specifies size and sink for initial letters. @supports (-webkit-initial-letter: 1) or (initial-letter: 1) { p::first-letter { -webkit-initial-letter: 3; initial-letter: 3; } } The property takes two arguments. The first one defines the size of the initial letter in terms of how many lines it occupies. The optional second argument defines the number… Continue reading Day 86: the initial-letter property

Day 87: mask properties

You can use mask properties to apply a mask to an element. .post img { border: none; } .mask { -webkit-mask-image: url(/blog/2023/100daysof-day87/htmhell_logo.svg); mask-image: url(/blog/2023/100daysof-day87/htmhell_logo.svg); } .mask-size { -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .element { max-width: 400px; aspect-ratio: 1; background-color: red; -webkit-mask-image: url(/blog/2023/100daysof-day87/htmhell_logo.svg); mask-image: url(/blog/2023/100daysof-day87/htmhell_logo.svg); -webkit-mask-size: contain; mask-size:… Continue reading Day 87: mask properties

Day 89: higher-order custom properties

Style queries may change the way we write CSS significantly. Caution: If you’re a fan of Tailwind or similar utility frameworks, you might find this post offensive because it suggests using fewer classes instead of more. On day 80 I’ve introduced you to container style queries. I’ve showed you a practical example from a project… Continue reading Day 89: higher-order custom properties

Progressively enhancing Grid Lanes

This post is a follow-up on my previous post. I was wondering whether it’s safe to use Grid Lanes today. I came up with a solution I find okay, but there is a caveat. Note: This post contains interactive demos. If you want to see them instead of screenshots, enable the CSS Grid Lanes Layout flag… Continue reading Progressively enhancing Grid Lanes

Kick the Bots Out of Your Survey Data

Summary:  Learn to spot and filter out survey bots’ responses before analysis so fake data doesn’t distort your findings. If you distribute surveys through open channels like social media, online communities, or public links, there’s a good chance some of your responses aren’t coming from real participants. Instead, they may be coming from survey bots,… Continue reading Kick the Bots Out of Your Survey Data

Your New UX Habit: Establishing Baselines for Impact

Summary:  Gather baseline metrics before starting a project so your team can demonstrate its impact. Between delivery timelines and limited resources, cutting data collection upfront seems like an efficient choice. Without benchmarks to compare to, however, it’s impossible to demonstrate improvement. (Don’t worry, we have some other options for reducing UX waste.) In fact, one… Continue reading Your New UX Habit: Establishing Baselines for Impact

Your Grid Lanes will likely fail WCAG 2.4.3

I saw a great introduction to CSS Grid Lanes, aka Masonry Layouts, by Patrick Brosset at CSS Day 2026. I liked the versatility of its use cases, but I was also concerned that it’s inaccessible by default. Note: This post contains interactive demos. If you want to see them instead of screenshots, enable the CSS… Continue reading Your Grid Lanes will likely fail WCAG 2.4.3

Recapping our multi-city European roadshow celebrating the EAA’s one-year anniversary

When the European Accessibility Act (EAA) came into effect in June of 2025, it was a milestone for digital accessibility that sent positive reverberations across Europe and around the world.  As we approached the EAA’s first anniversary, we knew exactly how we wanted to mark the occasion: meeting across Europe and engaging directly with the… Continue reading Recapping our multi-city European roadshow celebrating the EAA’s one-year anniversary

Day 98: oklab() and oklch()

oklab() and oklch() are okay versions of lab() and lch() because lab() and lch() are not okay. I will not pretend that I really understand this whole color on the web thing, how it works or why one color function offers many more options to developers than the other, but I did learn several things… Continue reading Day 98: oklab() and oklch()

Incentive Structures for Diary Studies

Summary:  A mindful incentive structure can keep diary study participants engaged and responding, without overloading you with low-quality responses. Compared to other UX research studies, diary studies — especially longer ones — are particularly vulnerable to high participant attrition — when participants stop submitting entries or responding. One of the strongest levers against attrition is… Continue reading Incentive Structures for Diary Studies

Zen, Zed, and Zits

Don’t worry, this post is not about zits, but something comparably annoying: Zen and Zed. One is a browser and the other an editor. Even writing this, I don’t know which is which. Their names and icons are so similar that I keep getting them confused. I couldn’t take it anymore; I had to take… Continue reading Zen, Zed, and Zits

CSS! CSS! CSS!

I just came home after three beautiful days in Amsterdam, where I gave a talk at the CSS Day conference. I’ve watched many inspirational and engaging presentations and had many interesting conversations. My biggest takeaway: The CSS community needs you! First things first: CSS Day is a wonderful event, and the community is lovely. If… Continue reading CSS! CSS! CSS!

The Core Skill of Design in the AI Era: Critique

Summary:  To build useful and usable AI-powered systems, our understanding of users’ needs and our design judgement must be encoded into well-defined evaluation criteria. Design Decisions in Generative AI Systems Imagine asking a large language model a question like “How’s the weather today?” The response might include too much information (“it’s 72 degrees, and it… Continue reading The Core Skill of Design in the AI Era: Critique

Syntax podcast episode 623: “Nothing in CSS” errata

I just listened to the Syntax podcast for the first time because they were discussing topics near and dear to my heart, HTML and CSS. The episode is called “Nothing in CSS – 0 vs 0px, no, none, hidden, initial and unset”, and they’re talking about all the things that can be 0, none, or… Continue reading Syntax podcast episode 623: “Nothing in CSS” errata

Context Architecture

Summary:  Context architecture applies information architecture principles to AI systems, helping agents interpret information and produce better, user aligned responses. From Prompts to Context The way we shape AI products has evolved quickly. It started with prompt engineering. Early on, success depended on crafting the right instruction. A well-written prompt could unlock surprisingly strong results,… Continue reading Context Architecture

the article element and screen readers

I wanted to know how and if common screen readers expose the <article> element. Here are my results: Summary tl;dr: shit’s complicated. Some screen readers don’t announce articles and have no default quick nav shortcuts. Some don’t announce them but treat them as landmarks. Others announce them as articles and treat them as landmarks. There’s… Continue reading the article element and screen readers

Pros and cons of using Shadow DOM and style encapsulation

When I started to work with web components, I compared different options and decided to go with lit. I knew the extra performance cost would pay off quickly, and it fit into my performance budget. I’m still happy with my decision. .pro { color: green; } .con { color: red; } I was new to… Continue reading Pros and cons of using Shadow DOM and style encapsulation

The Four Design Jobs AI Created (So Far)

Summary:  “AI design” is one label but has forked into four different types of work. What Does “AI Design” Mean? When someone says “AI design,” everyone in the room pictures something different. One person is thinking about using AI to generate component variations for a design system. Another is designing a chat interface. A third… Continue reading The Four Design Jobs AI Created (So Far)

Skip links on ikea.com

I am always pleasantly surprised when I find useful skip links. That’s why I decided to collect examples here on my blog. I’ll start with ikea.com. The first focusable element on every page is a skip link that allows you to skip the entire header, which makes sense because there are 15 interactive elements in… Continue reading Skip links on ikea.com