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...
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,...
This is excellent advice and I’m glad to see this getting addressed nice and early in the era of customisable select elements:
always provide text content or accessible text attributes for your option elements.
adactio.com/links/22620
This is a great case study featuring a really useful HTML web component called validation-enhancer. The results? When we launched, the number of people completing the form doubled. The analytics people didn’t even know where these users were coming from. Of course, your javascript-based...
A simple web tool to generate a realistic looking QR code that is not really scannable. Useful for creating QR code placeholders for your designs. Features Generate QR code of all valid versions (or sizes) Adjustment of the scale of QR code Persist all locating and timing...
Hi, just me heading off some bad advice I’m starting to see in developer venues. Background The proposed Document Outline Algorithm, where headings would automatically reset themselves to the appropriate level based on their position in the DOM structure, was never part of a final HTML...
Bit of a stream-of-consciousness rant, and of course there is no absolutely right or absolutely wrong answer. Different situations/products/apps could have very different “most important” metrics. But I am hoping to do create a little discussion, hear others’ input/opinions on the matter....
I just realized that I have been completely remiss in pointing out that I was recently on a Coffee with Developers podcast! On February 18, 2026, I sat down with Chrisitan Heilmann to chat about NoLoJS and lots and lots of other things. Was great to see and chat with Christian again, it has been...
Another self-promo, this time I got a chance to chat with Chrisitan Heilmann on the latest Coffee with Developers podcast! It was really great to see, and talk with, Christian again. We have messaged back and forth a bit online, but haven’t had a chance for “face-to-face” since… a very distant...
holpxay n. [hol.ˈp’aj] number. A notepad calculator where math just works. Type expressions, see results instantly. Features Arithmetic & Numbers Basic math with +, -, *, /, ^, !, mod, and parentheses Alternative operators: ×, ·, ÷ Percentages (50%, 200 * 15%),...
If your users scale the text size in Android or iDeviceOS, that doesn’t always affect the size of text on a web page. It’s a function of browser and authored code, as opposed to a standardized approach. That may be changing. Support The current state of affairs in the three rendering...
Starting off with a little shameless self-promotion: I recently shared NoLoJS, an open-source design library of components aiming to reduce reliance on JS, in favor of just HTML and CSS, as much as possible. The idea is to create a collection of web patterns that have historically relied heavily...
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...
A web tool to check codepoint / glyph coverages of a font. Capable of checking coverage of the following collections: Codepoints Unicode Blocks Unicode Script Extensions China Encodings (GB/T 2312, GB/T 12345, GBK) China Foundries (方正字库, 汉仪字库) China Standards (《通用规范汉字表》,...
A bundle of recipes I wrote for TRMNL, an e-ink dashboard display. Wikipedia Article of the Day A TRMNL plugin that fetches and displays the Wikipedia article of the day in multiple languages. Learn More Install Random Unicode A random Unicode codepoint on each refresh....
In my last post I mentioned a small webapp that I had built in an hour. This app was okay for what it was, but using it revealed that it needed a bit more love before it could be useful. And that's fine! After all, that was the whole point of making a quick mockup: to put it into the hand of users...
I recently had to solve a problem that I already faced before: I need an app to keep track of my daily expenses, it has to run on my phone (so I can enter expenses on the run before I forget), and pretty much nothing else. Last time I scratched this itch I built an Android app that did exactly...
But you’re in the wrong skin And the skin that you’re in says Oh, let it begin And earth is the loneliest planet of all Morrissey, “Earth Is The Loneliest Planet” So you want to start a web project and accessibility is one of its core requirements? Here is an overview of stuff you might want to...
Although it came out in the year 2000, Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web is as relevant today as it was when it was published. Weaving the Web is a memoir by Tim Berners-Lee about the creation and early growth of the Web. Most of the book concentrates...
Do not forget They tried to turn you Into a public target Morrissey, “I am not a Dog on a Chain” Sometimes, it is easy to identify the position of skip links. Mostly when content blocks follow with a lot of interactive elements, or just a lot of content. But what about their target? Do you always...
# May need to set up x11vnc password beforehand! # -forever and -loop are important to makes sure it keeps working nohup x11vnc -create -forever -loop -usepw & # noVNC git clone https://github.com/novnc/noVNC.git --depth 2 cd noVNC # Set up SSL openssl req -x509 -nodes -newkey rsa:2048...
Direct Links: developer.mozilla.org/en-US/docs/Web/HTML/Element/meter I really had no idea about the HTML <meter> element that can show a range of values, until I read this tweet by Álvaro Trigo 😃 Example: § <meter min="0" max="100" ﾿ low="30" high="80" optimum="60" ﾿...