Terence Eden. He has a beard and is smiling.

Terence Eden’s Blog

Theme Switcher:

Woohoo! WordPress accepted my accessibility PR

· 1 comment · 150 words


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 browsers will also show any spelling errors. Good spelling is essential for people …

Different ways to do separators in horizontal text

· 3 comments · 700 words · Viewed ~1,023 times


The HTML5 Logo.

Quite often on the web, you'll see a set of "things" with a separator between them. For example, at the top of this post, you'll see Thing 1 | Something Else | Another Thing. This provides clear visual separation between logical groups. But there are a couple of problems. Firstly, the separator character may not be interpreted correctly by screen readers. They may read out "Vertical Pipe",…

Adding a language tag to image elements

· 2 comments · 350 words · Viewed ~374 times


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, with the sub-type of Great Britain. This means your browser might offer to translate…

3 years to fix bad alt text

· 450 words · Viewed ~238 times


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. Terence Eden is on Mastodon@edentHi @PostOffice,Why is your website's alt text written in Latin? I don't think that…

Making Time More Accessible

· 4 comments · 500 words · Viewed ~3,436 times


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 search engine could find events which are happening on a…

"I could build that in five minutes!"

· 11 comments · 300 words · Viewed ~1,274 times


A digital watch.

It's rather dispiriting when you launch something, only to have people berate you for not launching sooner. A few months ago, I was involved in a medical questionnaire launch. Before it was released, I had several people send me polite (and not-so-polite) queries as to why it was taking so long. "I could build that in five minutes!" was the common refrain. Some people, dissatisfied with our…

Dark Mode and Transparent Images

· 3 comments · 300 words · Viewed ~1,066 times


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 the GitHub app in dark mode, I visited a repo which used a transparent…

Improving WordPress Video Accessibility

· 2 comments · 200 words


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 colour is predominantly white. The issue is with the…

A small accessibility improvement to WordPress

· 6 comments · 300 words


An upload screen - there's a large text box for the image description.

My mate, the accessibility specialist Léonie Watson, has this to say about how we improve the world, piece-by-piece: Accessibility doesn't have to be perfect, it just has to be a little bit better than yesterday. Source: Twitter Damn straight! One of the best ways we can make tomorrow slightly better than today is by making small changes which make it easier for people to do the right thing. …

How not to use the label element

· 3 comments · 450 words · Viewed ~650 times


HTML Source Code.

HTML is magic. It comes with all sorts of great usability and accessibility features. But people often ignore them or misuse them. Take a look at these checkboxen: If you click on this label, nothing happens. If you click on this label, the checkbox will toggle This is important. Tapping on tiny squares is hard for lots of people. Whether they have visual impairments, motor issues, or just…

Accessibility of macOS - large cursor hides tooltips

· 3 comments · 300 words · Viewed ~844 times


Cursor obscuring tool tip.

Apple's attitude to usability is... complex. The general attitude of "you're holding it wrong" seems to be prevalent across all their products. I like having a large mouse cursor. I find it easier to see on my large monitor, especially when sat at a safe distance. But, if I use a large cursor - I can't see the tool-tips underneath it. Annoyingly, Apple don't include the larger cursor sizes…

Accessibility is a public health issue

· 3 comments · 300 words · Viewed ~295 times


A tweet which says "From the chair of surgery at Columpbia Presbyterian." There is a big blank image afterwards.

Dark times, my friends. Dark times. It's up to all of us to pull together. And that means making vital health information accessible. One of the easiest things you can do is make your Twitter content accessible is by adding descriptions to your images. Go to twitter.com/settings/accessibility and turn on "Compose image descriptions". Here's why. This is a screenshot of a Tweet I recently saw.…