Accessibility
CSS-only solutions are not accessible
In response to my article on my quest for the best progressively-enhanced dropdown nav menu, I had a lot of people ask me about CSS-only options that use :hover or :focus-within to toggle visibility.
Today, I wanted to talk about why CSS-only solutions like that are often worse for accessibility than other options.
Animated sites are unique, but not always accessible
Like many, I visit portfolios to design-winning websites to get inspiration or observe trends. With each visit, I see something new…kinetic typography, scroll effects, or 3D elements — each creating a distinct experience and keeping my eyes peeled.
But I also notice the lack of accessibility in these websites — especially when it comes to looped animations (GIFs) and autoplaying videos.
Yellow, Purple, and the Myth of “Accessibility Limits Color Palettes”
Let’s address the myth head-on. Accessibility does not limit your color palette choices. What feels limiting is often a lack of knowledge about WCAG color contrast criteria, how to build accessible color palettes in tools like Figma. And sometimes, a lack of creativity.
Can components conform to WCAG?
We can build UI components with accessibility in mind. We can also document accessibility specifics alongside them, or review them for obvious barriers during development. All helpful and recommended. What about claiming conformance? In this post, I'll talk about how WCAG technically doesn't allow for that, and why I believe WCAG is right.
How much should you spend on accessibility?
In a business environment increasingly shaped by regulation, risk, and reputation, the question “How much should you spend on digital accessibility?” is more than a budgeting decision—it’s a strategic one. As organizations allocate growing portions of their revenue to compliance activities, digital accessibility is emerging not only as a legal requirement but also as a vital pillar of inclusive, ethical, and sustainable business practices.
What's the European Accessibility Act got to do with my design system?
Not sure how the European Accessibility Act (EAA) impacts your design system? This guide explains who’s affected, what compliance involves, and how to make your system more accessible, even if you’re starting late.
CSS
The attr() function in CSS now supports types
The attr() function in CSS is a powerful function that allows you to use the value of an attribute of an HTML element as the value of a CSS property. This function is commonly used with the content property in pseudo-elements to display the value of an attribute on the page.
With the latest CSS specification, the attr() function has been updated to support types. This means that you can now specify the type of the value that the attribute should be treated as.
Should responsive images work with container queries?
Container queries are slowly moving towards cross-browser support, and it got me wondering: how is image loading supposed to work in a container-based world?
Another article about centering in CSS
This one is different, I promise. It's my advice on approaching the options we have to center an element with CSS now and what pragmatic choices we should make.
Circular gallery of rounded images
In a previous post, we saw how to place images around a circle. We can use the same trick to create a circular gallery of images. Thanks to a combination of :nth-child and sibling-index(), we need fewer than 10 CSS declarations to correctly place up to 61 images.
CSS Properties - List of all CSS properties
Complete reference of CSS properties with their release dates and documentation links. Explore the evolution of web styles from the beginning to the present day.
There's a new stretch keyword in CSS?
There's a new stretch keyword that we can use for CSS height and width properties. But how is that different from 100%? And how is that different from 100vh when we want a full-height layout?
Resize any DOM element using two lines of CSS
I recently came across this video by Kamran Ahmed, where he demonstrates how to resize any DOM element using just two lines of CSS. And I was like, “What the heck, how did I not know about this all this time?”
Creating Fluid Typography with the CSS clamp() Function
This article will talk about a term known as “fluid typography”. It’s a new technique that leans heavily on the use of a new CSS function called clamp(). The foundational concepts of fluid typography can be difficult to really get to grips with, so it’s my hope that this deep dive will both explain the core concepts and also leave you excited about implementing fluid typography in your next project.
Rolling the Dice with CSS random()
Random functions in programming languages are amazing. You can use them to generate variations, to make things feel spontaneous and fresh. Until now there was no way to create a random number in CSS. Now, the random() function is on its way. You’ll be able to create a random animation delay, layout content at a random place on the screen, create a random color, or anything you want — all without any JavaScript.
HTML
Covering hidden=until-found
Short story: Slapping hidden=until-found on an element in HTML enables any hidden content within the element to be findable in the browser with in-page search.
JavaScript
The joy of recursion, immutable data, and pure functions: Generating mazes with JavaScript
Generating mazes might not be something you do a lot in your typical front-end job. Some might call it a waste of time. Why bother if you’re not a game developer? Who needs that kind of thing? Sure, it might not be essential, but it’s a lot of fun. Building mazes also presents interesting real-world challenges. How do we deal with random numbers if we’re creating pure functions? How do we implement a repetitive algorithm without using loops? How do we work effectively with immutable data structures?
restore-scroll - Vanilla JavaScript scroll restoration for overflowing elements
Vanilla JavaScript scroll restoration for overflowing elements and the window using history.state.
Repo here.
How to Start Making Games in JavaScript with No Experience
It’s been a while since I started making web games in JavaScript. In this post, I’d like to share tips that would be helpful for beginners wanting to do the same.
Lazy Brush - Smooth Canvas Drawing
JavaScript library to draw smooth curves and straight lines with your mouse, finger or any pointing device.
Repo here.
The Power Of The Intl API: A Definitive Guide To Browser-Native Internationalization
Internationalization isn’t just translation. It’s about formatting dates, pluralizing words, sorting names, and more, all according to specific locales. Instead of relying on heavy third-party libraries, modern JavaScript offers the Intl API — a powerful, native way to handle i18n. A quiet reminder that the web truly is worldwide.
Miscellaneous
An Interactive Guide to SVG Paths
SVG gives us many different primitives to work with, but by far the most powerful is the <path> element. Unfortunately, it’s also the most inscrutable, with its compact Regex-style syntax. In this tutorial, we’ll demystify this infamous element and see some of the cool things we can do with it.