Fun with browsers: how to get an image into the current page

Christian Heilmann created a demo page where a user can add an image to the page through various ways. I gave myself the task to build an interface to make it as easy as possible for a user to add an image into the document. I wanted to support: Image upload Drag and Drop Copy …

HTML: The Inaccessible Parts

Dave Rupert: I’ve always abided in the idea that “HTML is accessible by default and then we come along and mess it up. But that’s not always the case. There are some cases where even using plain ol’ HTML causes accessibility problems. I’m going to start rounding up those HTML shortfalls in this here post …

Why you should probably avoid using <input type="number" />

The fine folks at GOV.UK: Until now, the GOV.UK Design System date input component used the HTML element <input type=”number” /> to provide a number keypad when a user enters dates. However, we recently moved away from <input type="number"> to <input type="text" inputmode="numeric" pattern="[0-9]*"> Why the GOV.UK Design System team changed the input type for …

You shall not open links in a new window or tab

Something we already knew, but that’s now written down by Adrian Roselli in a nice post: Regardless of what accessibility conformance level you target, do not arbitrarily open links in a new window or tab. If you are required to do so anyway, inform users in text. Great to see that the statement is backed …

A Complete Guide to Data Attributes

I like using data attributes in my markup (data-*), CSS ([data-*]), and JS (el.dataset). This post on CSS-Tricks writes down exactly how I use them. Especially the different type of attribute selectors are really powerful: // Seven different types of CSS attribute selectors // This attribute exists on the element [value] // This attribute has …

HTML attributes to improve your users’ two factor authentication experience

There are plenty of opportunities for friction in the user experience when logging in, particularly while entering a two factor authentication code. As developers we should be building applications that support the need for account security but don’t detract from the user experience. Sometimes it can feel as though these requirements are in a battle …

Why <details> is Not an Accordion

Dave Rupert on why that (wonderful) way of Using the <details> element to create modals and menus is not good for semantics. Because <summary> has role=”button”, it eats the semantic content of elements inside it. So that big <h1> inside of your <summary> becomes just another piece of text, sans semantics. I especially like this …

Idiosyncrasies of the HTML parser

Highly interesting book (in the making) by Simon Pieters, on how HTML parsers work: The HTML parser is a piece of software that processes HTML markup and produces an in-memory tree representation (known as the DOM). The HTML parser has many strange behaviors. This book will highlight the ins and outs of the HTML parser, …

“Can I email…” – Support tables for HTML and CSS in emails

Can I email is like Can I use but specifically for email: which HTML and CSS features are supported by which mail client? They also provide a scoreboard, ranking mail clients based on their support among the 70 HTML and CSS features listed on Can I email. Can I email… Support tables for HTML and …

Reducing motion with the <picture> element

Great trick by Brad Frost, in which he combines prefers-reduced-motion? with the <picture> element <picture> <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> <img src="animated.gif alt="brick wall" /> </picture> Yes, that actually works! Reducing motion with the <picture> element → 💫 When taking prefers-reduced-motion into account in your CSS code, it becomes really powerful when combined with CSS Custom …