Adding a language tag to image elements

by @edent | , , , | 2 comments | Read ~227 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,…

Continue reading →

3 years to fix bad alt text

by @edent | , | Read ~206 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. Hi Terence, we are looking…

Continue reading →

Making Time More Accessible

by @edent | , , | 4 comments | Read ~1,601 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…

Continue reading →

"I could build that in five minutes!"

by @edent | , | 11 comments | Read ~1,058 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…

Continue reading →

Dark Mode and Transparent Images

by @edent | , , , | 3 comments | Read ~388 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…

Continue reading →

Improving WordPress Video Accessibility

by @edent | , , , , | 2 comments

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 →

A small accessibility improvement to WordPress

by @edent | , , , | 6 comments | Read ~155 times.

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…

Continue reading →

How not to use the label element

by @edent | , , | 3 comments | Read ~550 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…

Continue reading →

Accessibility of macOS - large cursor hides tooltips

by @edent | , , , , | 2 comments | Read ~115 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…

Continue reading →

Accessibility is a public health issue

by @edent | , , | 3 comments | Read ~268 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.…

Continue reading →