“html” Articles

Progressively-enhanced dark mode

Three radio buttons labeled "Auto", "Light", and "Dark". The left half of the screen has a light background with the radio buttons dark, the right half has a dark background with light radio buttons.

Recently, I added a dark mode setting to my website. Dark mode is a color theme feature that’s pretty common these days. Letting users adjust the color of content so it’s easier to see is a nice usability improvement.

Many developers I follow have written great articles about their implementations, which are full of valuable insight. To name a few: Hidde de Vries, Sarah Fossheim, and Josh Comeau all have smart approaches with valuable takeaways.

However, I decided to take a slightly different approach than a lot of the solutions I’d seen – a progressively-enhanced version that works with or without JavaScript (JS).

Read Article

aria-description crash course

The other day I was skimming Webkit’s Safari Technology Preview 153 release notes and noticed that they had added support for aria-description.

I always found it odd that developers could set an element’s accessible name/label with the aria-label and aria-labelledby attributes, but only had aria-describedby for setting accessible descriptions. So seeing aria-description being added to Safari was an interesting surprise.

I decided to do a mini dive and test of support for aria-description to fill in my knowledge gap and be prepared to use it when the time comes. A sort of crash-course, if you will. I’m sharing my findings here in case it’s valuable for anyone else.

Read Article

Screen readers and drag-and-drop, part 1: draggable elements

Simplified illustration of draggable list items with a screen reader speech viewer and audio waves overtop

I’ve been using the HTML Drag and Drop API (DNDAPI) a fair amount lately, which is a native way to build draggable interfaces. Despite some quirks, it works pretty well – making it easy for developers to create drag-and-drop functionality.

But the DNDAPI has a big flaw: there’s no built-in accessibility features. This means screen reader users (and many others) won’t be able to use interfaces built with it without a lot of mindful, additional work from developers (which, let’s face it, most don’t do).

Read Article

Designing a reorderable list component

A list item being dragged within a list of items

Last year, I worked on a project which contained a reorderable list component – essentially, a group of items that users can rearrange in any order. Though I had no prior experience designing such a pattern, the end result worked well for our purposes. But I was sure that my lack of familiarity meant that there were improvements to the usability and experience that I could implement for the future.

As a result, I dove deep into the pattern – learning, creating, and testing versions of it to deduce as much as I could. In this article, I'm going to channel my findings into how we can create a reorderable list with a great user experience (UX).

Read Article

Functional title elements, part 2

An oversized browser tab with the text label "Page Title"

The title element is often one of the first elements covered when learning HTML. But because changing a page’s title is trivial, many website creators mistakenly view it as optional or purely decorative, leaving it neglected. But the truth is that the title is a functional element that aids users in a variety of situations.

This is part 2 of an article series on the title element. If you missed it, check out part 1 where I cover some functional uses of the title element. Here, we’ll review some best practices that give a title its meaning and usefulness.

Read Article

Functional title elements, part 1

An oversized browser tab with the text label "Page Title"

The title element is often one of the first elements covered when learning HTML. But because changing a page’s title is trivial, many website creators mistakenly view it as optional or purely decorative, leaving it neglected. But the truth is that the title is a functional element that aids users in a variety of situations.

This is part 1 of an article series on the title element. Here, we’ll look at what this element is and does, and how it affects a user’s experience.

Read Article