Should you embed alt text inside image metadata?

Screenshot showing technical details of the metadata on a photo. It contains a copyright notice.

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. […]

Continue reading →

Unicode Roman Numerals and Screen Readers

Screenshot of a Table of Roman numerals in Unicode.

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, […]

Continue reading →

How to style your alt text

Photo of a broken and smashed picture frame. Taken by eastbeach on Flickr.

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="" alt="The […]

Continue reading →

Twitter's archive doesn't have alt text - but Mastodon's does!

The Twitter logo drawn in circles.

Because I don't trust Alan, the Hyperprat who now runs Twitter, I decided to download my Twitter archive before setting my account to dormant. About a decade ago, I wrote about how the Twitter archive works and where it is deficient. Things have got better, but there are still annoying limitations. For example, Hannah Kolbeck […]

Continue reading →

Woohoo! WordPress accepted my accessibility PR

Screenshot of a box to enter alt text. It is two lines high and is resizeable.

About 2.5 years ago I proposed a small accessibility improvement to WordPress. It has taken a bit longer than I'd hoped but, as of WordPress 6.1 it has been merged! Now, if you're using the Classic editor, you'll get a larger and resizeable box for entering alt text. Because the text entry uses <textarea> most […]

Continue reading →

Adding a language tag to image elements

Text in a mixture of Chinese and English.

(You may already know this, but I didn't. Every day is a school day.) HTML has the concept of the lang attribute. It allows you to say that a specific element contains text in a specific human language. For example, this page starts with: <html lang="en-GB"> That says the entire page is written in English, […]

Continue reading →

3 years to fix bad alt text

HTML code. The alt text of the image is in Latin

Back in 2017, I noticed that the UK Post Office was doing very dodgy things with their alt text. Lots of their pages had this snippet of code: Rather than add properly accessible alt text, a developer added placeholder Latin text. Being a good webizen, I tried to report this. Hi Terence, we are looking […]

Continue reading →

Making Time More Accessible

Dev tools showing the HTML code behind the BBC news site.

There's an HTML element called <time>. It is a semantic element. That means robots can read and understand it. For example, if my code says: <p>  The concert is <time datetime="2020-12-24">tomorrow</time> </p> Then the computer knows the specific date I'm talking about. A browser could offer to add the event to your calendar, or a […]

Continue reading →

Dark Mode and Transparent Images

A Hhrd to read image. The text is black, but so is most of the background. Bits have a white background.

Dark Mode is the new cool. Apps which automatically switch to an eye-friendly palette when lighting conditions are poor. Nifty! Most of the time, it's as simple as making the text a lightish colour, and the background a darkish colour. But all that fails when you use transparencies in images. Here's a quick example. Using […]

Continue reading →

Improving WordPress Video Accessibility

A video with an easy to see play button.

In order to provide a video playback UI, WordPress uses the excellent MediaElement library. Recently, I discovered a slightly annoying flaw - I couldn't see the play button! Here's a screenshot of the video UI. In the middle of this screenshot is a white play button. I have trouble seeing it, because the video's background […]

Continue reading →