This is a redress of my 2019 post Link + Disclosure Widget Navigation, except (as the title implies), I’ve modified it to use native HTML popovers instead of ARIA or HTML disclosure widgets. Popover has the benefit of using appropriate HTML structure and semantics while removing the need for scripting…
Chrome 150 has landed support for focusgroup, a feature proposed by Open-UI and not yet in WHATWG HTML as anything more than a feature request. Open-UI has outsized representation from Google and Microsoft folks, so it’s no surprise Chrome would implement it first. “FOCUS!” by Metro Centric, CC BY 2.0;…
This is an unplanned part two for Barriers from Links with ARIA. The title reflects my exasperation because this isn’t new, I’ve simply failed to be explicit about it over the last decade or so. In 2012 I vented about TypeButter using <kern style=”letter-spacing: -0.01em;”> for each letter. In 2020…
Today Temani Afif asked a question: Are the below codes equivalent if we consider all the aspects? (a11y, semantic, something else maybe?) If not, what is missing (or should be changed) in the second code CSS by T. Afif (@css@front-end.social) 22 January 2026, 2:52pm I have my canned response that…
This post does not discuss whether live regions are good, nor is it a post about the best way to use them. This post only covers how they are exposed to the audience who experiences them — screen reader users. Written by a non-screen-reader user. If you’re here because your…
OpenAI has announced it’s launched a new browser, Atlas, with ChatGPT built in. For those familiar with ARIA, OpenAI outlines what to expect (I left the code as I found it, other than removing the target): We’ll continue to make Atlas better, and our roadmap includes multi-profile support, improved developer…
Sometimes you run into a main landmark where you don’t expect one. Like Main Street USA in Hong Kong Disney. So you grab a snack in a diner that serves no hot dogs. You can buy little American flags in the heart of Hong Kong and clothes telling Hong Kong…
It does, actually. In Firefox. Sometimes. A major risk of using ARIA to define text content is it typically gets overlooked in translation. Automated translation services often do not capture it. Those who pay for localization services frequently miss content in ARIA attributes when sending text strings to localization vendors.…
Alex Russell wrote a four-part series a couple weeks ago arguing that modern JavaScript-first framework-focused front-end development is costing the industry and users. Part of his conclusion for organizations: Never, ever hire for JavaScript framework skills. Instead, interview and hire only for fundamentals like web standards, accessibility, modern CSS, semantic…
I am mis-using closed captions for a gag. The following video has an audio track and four sets of captions (for now?). Each set of captions is in English. Only one set of captions represents the spoken dialog, the other two represent dialog not in the video. The tracks are…
Remy Sharp asked on the Mastodon about pagination as he found it in the W3C Design System: <nav aria-label=”pagination” class=”l-cluster pagination”> <ul class=”pagination__list”> <li><a href=”path/to/page”>Previous <span class=”visuallyhidden”>page</span></a></li> <li><a class=”pagination__list__first” href=”path/to/page”><span class=”visuallyhidden”>page</span> 1<span class=”visuallyhidden”> (first page)</span></a></li> <li><a class=”ellipsis”>…</a></li> <li><a href=”path/to/page”><span class=”visuallyhidden”>page</span> 6</a></li> <li><a href=”path/to/page”><span class=”visuallyhidden”>page</span> 7</a></li> <li><a href=”#” aria-label=”page 8″ aria-current=”page”>8</a></li>…
TL;DR: Be careful when using the word grid on its own. Be certain you have chosen the term that accurately describes the pattern you want. If this post looks familiar to you, that is because it is essentially a redress of my 2023 post Be Careful Using ‘Menu’. It is…