datalists are more powerful than you think 🔗
by Alexis Degryse I think we all know the <datalist> element (and if you don’t, it’s ok). It holds a list of <option> elements, offering suggested cho [...]
HTMHell Advent Calendar 2024
Posts
Boost website speed with prefetching and the Speculation Rules API 🔗
by Schepp Everybody loves fast websites, and everyone despises slow ones even more. Site speed significantly contributes to the overall user experienc [...]
Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers 🔗
by Alexander Muzenhardt Introduction Imagine you’re tasked with building a cool new feature for a product. You dive into the work with full energy, an [...]
The underrated <dl> element 🔗
by David Luhr The Description List (<dl>) element is useful for many common visual design patterns, but is unfortunately underutilized. It was origina [...]
Preloading fonts for web performance with link rel="preload" 🔗
by Alistair Shepherd Web performance is incredibly important. If you were here for the advent calendar last year you may have already read many of my [...]
The search input: They almost got it right 🔗
by Steve Frenzel This example is a classic - in a bad way - and can cause quite some confusion for users of assistive technology (AT). But it's also v [...]
The devil is in the <details> 🔗
by J. Pedro Ribeiro Not too long ago, building an accordion component would require you to use a combination of JavaScript and CSS. If you've been aro [...]
PSA: Stop using the title attribute as tooltip! 🔗
by Daniela Kubesch It's almost 2025, so it's time to stop using the title attribute everywhere. Images, text, buttons, ... you name it, devs really li [...]
Grouping form fields 🔗
by Matthias Kittsteiner When I first stumbled upon fieldset and legend, I didn’t know much about HTML and especially not about accessibility. Everythi [...]
My favourite colour is Chuck Norris red 🔗
by Declan Chidlow Setting the colour of text on a webpage is usually a simple affair involving whipping it out the good ol' CSS color property. But th [...]
Getting Oriented with HTML Video 🔗
by Scott Jehl A couple years back, I was in a window seat on a flight from Amsterdam to New York. The weather was gray and drizzly as the plane took o [...]
Microdata for books 🔗
by Alan Dalton Dive into marking up books Books are the best Christmas presents, especially for us web geeks. (I hope you’ll find a Web Accessibility [...]
How I gained a new perspective on ARIA 🔗
by Marco Bretschneider Can you remember the day you first learnt about ARIA? Maybe the first fact you learnt about ARIA was the first rule “Don't use [...]
You don’t need the isOpen class 🔗
by Maureen Holland Don’t get me wrong. You can keep it if you like it. But you don’t need it. A class selector can allow us to visually show or hide c [...]
The Gift You Do NOT Want: A Div in a Button's Clothing 🔗
by Corina Murg With the right CSS makeup and a click event, almost anything can pretend to be a button. In accessibility work, we spot these fakes and [...]
Page by Page: How Pagination Makes the Web Accessible 🔗
by Kristin Rohleder Imagine you’re reading a book that seems perfect for cozy winter evenings. But as soon as you turn the page, you suddenly find you [...]
Improving User Experience for Multilingual Web Browsing 🔗
by Anastasiia Batarei Today, I’d like to talk about the experience of browsing websites where content is fully or partially in a language different fr [...]
HTML and CSS I didn't even know about before I started creating content in Japanese 🔗
by Julia Undeutsch Since I started to create content in Japanese, I also wanted to learn about traditional setups, like having Japanese text flow from [...]
Makeshift hot reload 🔗
by Evan Hahn In short: put <meta http-equiv="refresh" content="1"> in your <head> element to refresh your page every second. This is a makeshift "hot [...]
Submit to the Quirks of HTML 🔗
by Felix Hessenberger It was on a cold February evening. I had been working on a client project, building an order item list—nothing out of the ordina [...]
Native HTML light and dark color scheme switching 🔗
by Vadim Makeev It’s getting dark early in Berlin in the winter. It’s not even close to evening, but my OS and all apps have already switched to dark [...]
Past HTML, Future HTML? 🔗
by Jens Oliver Meiert Consider the following HTML document: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1996-01//EN"> <html> <head> <title></title> [...]
Almost, but not quite, entirely unlike... 🔗
by Léonie Watson Can you give me the HTML for an accessible button please? It was a simple enough question. Or it would have been, had I been asking a [...]
aria-labelledby = self 🔗
by Weston Thayer An accessible name is how UI components are identified to assistive tech. Having a good accessible name is important. If not, negativ [...]
Forced Colors Mode Futility 🔗
by Matthias Zöchling figure{margin-bottom:2.4rem}figure img{aspect-ratio:4;border: 6px solid #000}figcaption,sup,.highlight,section:has(#resources) sp [...]
Control the Viewport Resize Behavior on mobile with `interactive-widget` 🔗
by Bramus figcaption { font-size: 0.8em; text-align: center; } Viewports units on mobile have been a problem for a long time. Using 100v [...]
Smooth Multi-Page Experiences with Just a Few Lines of CSS 🔗
by John Allsopp A single line of CSS can enable slick multi-page transitions for web applications (and web sites for those who maintain there's a diff [...]
Starting off right: Where autofocus shines 🔗
by Kilian Valkhof Focus is where the user is on your website. It's what makes it possible to navigate your site with the keyboard or other assistive t [...]
A link on a logo in the header, what should the alt-text be? 🔗
by Rian Rietveld It's a common pattern to use a logo in the header as a link to the homepage. Fun fact: the alt text of the image inside a link, will [...]