Manuel Matuzović

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 in Edge or Chrome or use Safari 26.4+ or Polypane 29+. In my last blog post, Your Grid Lanes will likely fail WCAG 2.4.3, I explained how Grid Lanes are inherently inaccessible by default unless you…

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 Grid Lanes Layout flag in Edge or Chrome or use Safari 26.4+. Intro to Grid lanes CSS Grid Lanes is a new layout technique in CSS. Although the name suggests it, you don’t create grids…

The field-sizing property is coming to Firefox 152, making it available across all major engines. It allows you to control the sizing behavior of elements with a default preferred size, such as form elements.I'll take a closer look at the field-sizing property in another blog post, but I wanted to show you a cool feature first. By default, the width of a select element is determined by its largest option. Pick a city Amsterdam Rotterdam Scheveningen Utrecht Show code <label for="place">Pick a…

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 drastic measures. That's why I replaced the icon of the Zen browser application with a nice-looking e logo. Here's how to do it on macOS: Close Zen. Create or download an alternative icon. Highlight the…

A common issue that we've probably all faced at some point is having a component that includes a heading, which sometimes should be an H2 and sometimes maybe an H3, depending on where it's used. We solved this by giving editors an option to pick the appropriate heading level in the CMS. That works, but it means more work for them, because they need to keep track of the document outline, and it's also a potential source of error. The headingoffset attribute Yesterday, I heard about a new…

The title already tells most of the story, but here's why you must avoid labeling generic elements like divs or spans using aria-label or aria-labelledby. <div aria-label="News"> … </div> Don't do this Looking at the ARIA spec, you'll find section "5.2.8.6 Roles which cannot be named (Name prohibited)". It lists all roles that cannot be named. It includes “generic”, which is the default role of divs and spans. caption code deletion emphasis generic insertion paragraph presentation