Alt text is great. It allows people who can't see an image to understand what that image represents. For example, the code might say: <img src="whatever.gif" alt="Two cute kittens are playing on a blanket"> If you are blind, you get an idea of what's being conveyed by that image. If you're on a train and the WiFi craps out just before the image loads, you'll also benefit! If the image is of…
Continue reading →
The older I get, the more comfortable I become with complaining. Not merely moaning on social media, but writing a direct email to the perpetrator of some annoyance. I'd purchased an eBook and was appalled by how crappy the accessibility was. If you don't know, modern ePub books are just HTML wrapped in a zip file. They have all of the accessibility advantages of the web and should be easy to…
Continue reading →
My friend Manuel has sent me his latest book to review - and it is a corker. The best thing about this book is that it doesn't waste any time trying to convince you that Accessibility Is Good™. You're a professional web developer; you know that. Instead, it gets straight down to brass-tacks and gives you immediate and useful examples of what to do. You could read the book linearly - but it is m…
Continue reading →
It may be hard for you to understand this; reading is a skill. Unless you have recently started learning a new language with an unfamiliar writing system, you probably do not remember the tedious and agonising process of having to train your brain to recognise printed characters. Extracting meaning from the words you are reading is seamless. The occasional antediluvian aphorism notwithstanding,…
Continue reading →
Sometimes a client asks me a question and I'm a little stunned by their mental model of the world. A few weeks ago, we were discussing the need for better cybersecurity in their architecture. We spoke about several aspects of security, then they asked an outstanding question. "What should I buy to be secure?" It took a few moments to tease out exactly what they thought they were asking. In…
Continue reading →
I'm not saying this is a good way to make a dark mode website. I'm not even saying it's a sensible way to do dark mode. But I'm pretty sure this is the laziest way of getting dark mode on your site. And it is all done with less than a handful of CSS rules. It relies on the new-ish :has() CSS pseudo class and the positively ancient filter() CSS function. Here's the code in all its glory: …
Continue reading →
WordPress allows you to set a featured image - called a "thumbnail" in the API. This gives a single image which can be used on a listing page, or shown when a post is shared on social media. The WordPress Media Library lets you set the alt text of an image. But, crucially, this alt text can be different when the image is used as a featured image. Here's how to find all your featured images…
Continue reading →
Yesterday I was on a train. I clicked on a link and my browser loaded a long article for me to read. Halfway through reading it, the train went into a tunnel and I lost signal. That meant I couldn't see the images on the other half of the page for the rest of the journey. I had a sea of broken images. Even though the page had fully loaded, the images were set to "lazy" loading. When my…
Continue reading →
Not everyone can see the images you post online. They may have vision problems, they may have a slow connection, or they might be using a text-only browser. How can we let them know what the image shows? The answer is alt text. In HTML we can add a snippet of text to aid accessibility. For example <img src="monalisa.jpg" alt="A painting of the Mona Lisa."> Most social networks will let users…
Continue reading →
There's a link, right here ➡️⬅️ but, if you're on a touchscreen, you can't tap on it. Using a mouse? Nope, that won't work either. The only way to navigate to it is via keyboard navigation. Hit your Tab ⭾ button! There's a little bit of me wants to build an entire website which can only be navigated by keyboard. What would the world look like if Engelbart never invented the mouse? Or if Johnson…
Continue reading →
How would you read this sentence out aloud? "In Hamlet, Act Ⅳ, Scene Ⅸ..." Most people with a grasp of the interplay between English and Latin would say "In Hamlet, Act four, scene nine". And they'd be right! But screen-readers - computer programs which convert text into speech - often get this wrong. Why? Well, because I didn't just type "Uppercase Letter i, Uppercase Letter v". Instead, I u…
Continue reading →
Every day is a school day. I'd recently seen a post about highlighting images without alt text. That got me thinking. Is it possible to style alt text? Yes. Yes it is. And it's pretty simple. Well, OK, it's CSS, so simple is a relative term! Let's take a broken image like <img src="http://example.com/bigfoot.jpg" alt="The best quality photo of bigfoot!" /> There are two slightly different…
Continue reading →
