Last week Amit Agarwal posted a great tutorial on making YouTube embeds less of a burden for users, A Better Method for Embedding YouTube Videos on your Website. The abstract: Learn how to embed YouTube videos responsively and without increasing the page load time. The embeds are light and mobile…
I built this on a whim after seeing some terrible examples on Stack Overflow, so unlike other demos I build there was no immediate application. That means it may or may not be useful as-is. Variation For this post I have forked each variation of the original and added a…
In 2012 I wrote about how to use chromatic type with pseudo-elements. My objective back then was to minimize the hassle of a content author using a WYSIWYG while also not overwhelming a screen reader user with triplicate content. Pseudo-elements achieved that, though support for pseduo-elements in screen readers is…
Imagine that as a user you regularly use the keyboard for non-data-entry tasks. Think about how frustrating it is to have to grab the mouse to hover over something on the screen just to see it. Now imagine that you are a keyboard-only user. That problem can be addressed somewhat…
I received a design for a project recently that called for a search field hidden behind a single icon — no visible label text, no visible field, no submit button. While I’ve seen this pattern on sites repeatedly, I feel they generally get it wrong. Relying on bloated HTML and…
I really spent far too much time re-thinking that title. Please note that HTML now has a <search> element. Please see the March 24, 2023 update below. If you have a search form on your site and you want to be a good accessibility soldier and drop ARIA roles in…
There are many ways to hide and show content with a click (or tap or poke or key-press or …). Many of them have JavaScript under the hood and nearly all of them have dependencies on third-party libraries and/or CDNs. This may be fine when you already have to load…
Animation showing the Ring Warmer in action. If you have to wear a ring, then perhaps you have experienced the discomfort of putting a cold ring on your finger (maybe in the morning in a cold house). I decided that I could do something about that using the only tool…
In my post What to Consider before Using Free Getty Images one of the many caveats I outlined was the lack of responsive support in Getty’s iframe code. Of all the issues I raised, this one is actually pretty easy to get around. Background While the other points still preclude…
A few months ago I had the pleasure of writing a piece for .net Magazine about print styles (Make your website printable with CSS). It was posted to .net’s web site last month and received an overwhelming one comment. That comment, however, summed up something I hear all the time:…
For those of us who put together print styles for our sites, we’ve probably tossed around the idea of embedding QR codes so that users can quickly get back to a page they have printed. In the hardcopy version of my article for .net Magazine, “Make your website printable with…
Last week I spent my Friday afternoon trying to get my head around how to apply ARIA properly to a tabbed interface. I even got so far as to map it out on my whiteboard and snap a photo so I could mull it over during the weekend. And then…