Accessibility
Essential Visually Hidden CSS Techniques for Web Accessibility
Fix vanishing focus indicators & conflicting sr-only classes. Learn the 3-state visibility model that transforms CSS hacks into logical accessibility decisions.
What State ARIA In?
ARIA attributes play a vital role in communicating dynamic interface states to assistive technologies. However, attributes like aria-selected, aria-pressed, aria-current, and aria-checked are often confused because they all express some form of “state” or “selection.”
In this article, we’ll clarify what each of these attributes does, when to use them, and common mistakes developers make, helping ensure your ARIA implementation accurately reflects the user interface state and supports a predictable experience for assistive technology users.
Star raters are more challenging to make accessible than you might think
You see them everywhere: on e-commerce and hotel booking sites, or in your favorite music app. Star ratings seem simple—just a click, and you're done. However, designers and developers must consider significant accessibility concerns.
Should you outsource accessibility or build it in-house?
Could I just outsource accessibility and hire an accessibility specialist instead of upskilling my existing team?
What you're really asking is if you can just throw money at the problem.
CSS
Dynamic Tooltip Position with Anchor Positioning (Part 3)
Here is another idea of implementation (after the first and second ones), where the tooltip adjusts its position to remain visible and follow its anchor.
CSS Finally Gets Inline Conditional Logic With New if() Function
Powerful inline conditional logic comes to stylesheets for the first time. Here's how it works and what it means for developers.
The CSS Reset, again
For the first time in years, I recently looked into the stylesheet of this very website and decided to modernise a few bits. As part of this, I looked into some resets carefully crafted by others, and wanted to share my thoughts, things I liked, and popular snippets that I’m going to stay away from.
The Big Gotcha With @starting-style
CSS has been on fire lately, with tons of great new features. @starting-style is an interesting one; it allows us to use CSS transitions for enter animations, something previously reserved for CSS keyframe animations. But is the juice worth the squeeze?
Solved By Modern CSS: Section Layout
The author takes a common section layout (header + grid of cards) and shows how to enhance it using modern CSS features like the :has() selector, container queries, query units, and clamp() for fluid sizing. The result is a highly responsive and content-aware layout that adapts based on container size, number of cards, and other conditions.
Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up
There’s a new type of CSS scroll-state query coming: scrolled.
Unlike the scrollable scroll-state queries, scrolled remembers the last direction you scrolled into, which you can use to build “hidey bars”: when scrolling down (or having scrolled down), the hidey bar hides itself. When then scrolling back up, the hidey bar reveals itself.
HTML
HTML dialog: Getting accessibility and UX right
The HTML dialog element gives us powerful native modal capabilities, but creating dialogs that work well for all users still requires intentional accessibility and UX decisions.
Howto Use the HTML <output> Tag for Smarter, Accessible UI
Everyone knows <input> — the workhorse of the web. But few developers have ever touched <output>, even though it’s been in the HTML spec since 2008. That’s unfortunate, because <output> solves a long-standing problem: showing dynamic results with built-in accessibility — no extra JavaScript or ARIA attributes required.
JavaScript
Circalify - A flexible, zero-dependency JavaScript library for creating circular timeline visualizations
Why Circular Timelines? Circular layouts excel at showing:
- Cyclical patterns - Annual processes, seasonal data
- Year-at-a-glance - See the entire year in one view
- Multiple layers - Compare different event types side-by-side
- Space efficiency - Fit more information in less screen space
Traditional linear timelines are better for sequences and chronology. Circular timelines are better for cycles and patterns.
Demo here.
Refactoring an Angular form to an Angular Signal Form
In this blog post we will refactor an existing Angular form to use the new Signal Forms feature, which will be introduced in Angular 21 as an experimental feature. This won't be a detailed introduction to Signal Forms, for that I highly recommend looking at the Extra Resources section at the end of this post, these resources have helped me during the refactoring process.
Rethinking async loops in JavaScript
Struggling with await in loops? Explore common mistakes and modern solutions to optimize async code for performance.
Building an Async Combobox with useSuspenseQuery() and useDeferredValue()
React concurrent features have unlocked new ways to build performant and responsive applications. In this blog post, I’ll show you how to create a declarative combobox component using useDeferredValue() and useSuspenseQuery(). We’ll explore how these hooks work together to deliver smooth user experiences, simplify loading and error state management, and provide automatic caching for optimal performance.
Links and anchors: ancient HTML and JS magic in your browser
Learn about ancient JavaScript collections and String methods in browsers that define anchors and links and what the difference is.
React DataGrid
An open-source, high-performance data grid for modern React applications with virtual scrolling, advanced filtering, editing, tree data, and full TypeScript support.
JustGage - Modern SVG Gauges
Modern ES6+ JavaScript library for creating animated dashboard gauges using native SVG APIs. Zero dependencies, resolution independent, and self-adjusting.
htmask.js: Because Your Input Fields Need a Disguise
htmask.js is a lightweight, no-dependency JavaScript library for masking input fields. It's perfect for when you want to force your users to enter data in a specific format, like a phone number, a date, or a secret agent code.
Add a mask attribute to any <input> element you want to mask. The value of the attribute is the pattern the input should follow.
0: Represents a digit (0-9).A: Represents a letter (a-z, A-Z).- Any other character is a literal.
Example date masking:
<input type="text" mask="00/00/0000">
Element: setHTML() method
The setHTML() method of the Element interface provides an XSS-safe method to parse and sanitize a string of HTML into a DocumentFragment, and then insert it into the DOM as a subtree of the element.
Note: This is currently experimental, none of the major browsers support it yet.
Miscellaneous
The Hidden Cost of URL Design
This article isn’t about URL best practices you’ve read a hundred times (keeping URLs short, avoiding special characters, or using hyphens instead of underscores). This is about something rarely discussed: how your URL structure shapes your entire application architecture, performance characteristics, and operational costs.
Quiet UI - 88 open source, accessible, and interoperable UI components
A UI library for the Web with a focus on accessibility, longevity, performance, and simplicity.
Obra Icons
A simple, consistent set of icons, perfect for user interfaces.
1047 icons at the time of this writing.