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 text in a language you don't read, your device can translate it for you.

The alt text can be as long or as short as is necessary. It might just be "kid giving a thumbs up" or it could be incredibly detailed. Here's how the BBC's Newsbeat typically adds alt text for younger viewers:

Is that too much? Maybe. It depends on your audience. For partially sighted kids who crave the same pop information as their sighted peers, I think it is great.

So alt text is a good thing. But people are lazy and don't always write it. Perhaps the answer is to embed alt text inside image metadata?

It's a lovely idea - and technically feasible - but it fails to account for user needs.

And that brings me to the point of this post. Who is your alt text for? What information are you trying to share?

Here's a good example. I looked at a bunch of popular memes which had alt-text pre-populated in them. Here's what they said:

Terence Eden

@Edent@mastodon.social

Whenever people talk about embedding alt text into images, I remember that lots of gif search services already try to do that.

Here's BlueSky's gif service. I searched for some popular memes. Each had alt-text baked in.

Take a look and tell me if you think that the embedded text conveys the sentiment of the image? If you couldn't see the animation, would you understand what was going on from that alt?

2025-09-07, 21:11 12 boosts 22 favorites

OK, so sometimes the captioner makes a mistake and thinks the Chuckle Brothers are kissing (WTF?!) perhaps we can excuse that as being an obscure image. But the "idiot sandwich" one is inexcusable. It's a popular meme with a specific meaning.

Which leaves me with a few questions for you:

• If you saw that the image you were sharing had crap alt text - would you bother editing it?
• Is bad alt text worse than no alt text?
• Can the same image have multiple meanings?
• Have you spent any time browsing the web with images turned off? Did you enjoy it?

You can find out more about Alt Text on the RNIB site.

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 read no matter if you're sighted or not.

But not this eBook! Part of the story concerned WhatsApp messages sent by the protagonist. Here's one of them:

See that smudge in the middle? The one smaller than a full stop? That's meant to be an emoji. Rather than use an actual emoji, they've stuck in a tiny pixel image which won't scale with text size.

Here is is:

Can't see it? Let me blow it up to a more readable size.

OK, that's annoying for sighted readers, but just about understandable. What about people who are using a screen reader? Luckily, ePubs can use HTML's "alt text" feature which will describe an image which can't be seen.

Curses! That's, perhaps, not too annoying for a decorative image - but later in the book there are pictures of a ransom note. Despite the plot-twisting text in the illustration, the alt text just says "image".

I found the publisher's website and scoffed at their proclaimed accessibility statement. I sent them an email which basically consisted of the above. I realised it was probably futile, but I've got to spend my privilege points somehow.

The next day, they wrote back!

I wanted to reply to let you know we are taking our commitments to accessibility in our ebooks seriously […] I will get our ebook team to check this as a matter of urgency and get back to you with an update.

Fair play. But talk is cheap, would they actually take action? A few days later, they sent a follow-up:

We have checked the file for this title again and found issues with it. We have sent this back to the conversion house to have the file corrected and expect this to be delivered by the end of the week. We would then expect this corrected version to be with Kobo by the end of the following week, i.e. 25th July.

We have also been spot-checking other files to see if there is a wider issue and where necessary will follow the same workflow to ensure fully accessible versions are available as widely as possible.

And, you know what, I think that's totally reasonable. Yeah, they should have caught it before publication - but it is a complex book and they're a small publisher. They took my complaint seriously and actually did something about it.

A week or so rolled by and they sent me this:

Just to update you that we have been back and forth with the conversion house getting this title up to scratch. There were various complicating factors which should now be resolved and an updated file has now been distributed and should be available through your chosen retailer presently. If you have any other queries please do let us know.

I logged on to my eBook provider, clicked "read" and…

It was fixed! All the images had decent alt text as well.

Rather annoyingly, the retailer didn't notify me that there was an update available. I can't blame the publisher for that though.

Still, 3 weeks from report to fix is pretty good I reckon.

When I last contacted a publisher about a mistake in their ebook, it took over 3 months to fix it. Perhaps things are slowly getting better?

Anyway, please complain about poor accessibility. Don't shout into the void of social media - write a polite but insistent email telling (not asking) people to fix their shit. Sometimes, just sometimes, it does work.

Anyway you should read The Mysterious Case of the Alperton Angels by Janice Hallett - it is brilliant and accessible.

You could read the book linearly - but it is much more suited to dipping into. Want to know exactly how to do something? There's almost certainly a recipe in here for you. Within the first few minutes of reading, I'd already discovered some stuff I didn't know - for example, the <q> element changes its quote style based upon its parent's language.

It is, of course, a fully accessible ePub - with plenty of useful alt text and semantically-rich metadata. Even better, it is gorgeously formatted - with excellent use of colour and typesetting throughout.

I particularly like that every section ends with a "discussion". The accessibility world is one of compromises - he invites you to think about the choices you're making and their trade-offs.

Manuel is very generous with his links to sources. You'll find dozens of blog posts, articles, and tutorials written by amazing people. It is slightly annoying that all the links go through the https://oreil.ly/ link shortener. I guess it means they can be updated if the original link dies, but it would be nice to see the destination before clicking.

Like lots of O'Reilly books, it is priced firmly in the "professional development" bracket. So get your boss to buy you a copy!

For example <img src="monalisa.jpg" alt="A painting of the Mona Lisa.">

Most social networks will let users add alt text to help describe their images. Brilliant!

But... People don't always add alt text when they upload an image. They may not realise it is helpful, or they don't know how to write a good description, or they may not have time to write something suitable. This leads to a frequently asked question: "Should I embed the alt text inside the image file? That way, whenever people share the image the alt text will automatically be attached!"

Here's my attempt to answer that.

Short answer

No.

Long answer

Nooooooooooooo!

Reasoned Answer

It is complicated.

On a technical level, yes. Most modern image formats allow you to add image metadata - known as EXIF. This EXIF commonly contains GPS location, timestamps, make and model of camera, etc. Here's an example from one of my photos:

There are a pre-defined list of acceptable EXIF tags one of which is "ImageDescription", which is defined as:

A character string giving the title of the image. It may be a comment such as "1988 company picnic" or the like. Two-byte character codes cannot be used. When a 2-byte code is necessary, the Exif Private tag UserComment is to be used.

So, there you have it. Yes you can embed text inside an image. With the right software you can read it. So, technically, you can stuff alt text in there and have a website automatically add it to the alt attribute.

But this is only half the story. What an image represents is highly context dependent.

In her article about using AI to automatically provide image captions, Léonie Watson makes that point that alt text needs to be:

provided by a content author who knows exactly what's in the image, why its being used and the context its being used in.

Take this very real photo of a famous actress who I just got an AI to dream up.

What's a suitable alt text for this image?

• Famous actress Claire Flumptron standing on the red carpet.
• Claire Flumptron shows off her brand new arm tattoo which has strange mystic runes covering her forearm.
• Designer Giovanni Tuccini's new red dress has a small strap over the shoulder.
• AI image where the hand is strangely deformed and the neck looks twisted beyond human endurance.
• Smiling woman with cropped blonde hair and heavy eye makeup.
• Last known photo of the Mayor (right). His blurry face is smiling.
• ...

There's no "right" answer. It depends on what the image is being used to illustrate.

A picture may be worth a thousand words. But those thousand words depend on context.

Update Here's another good example of embedded alt text failing badly.

Terence Eden

@Edent@mastodon.social

Whenever people talk about embedding alt text into images, I remember that lots of gif search services already try to do that.

Here's BlueSky's gif service. I searched for some popular memes. Each had alt-text baked in.

Take a look and tell me if you think that the embedded text conveys the sentiment of the image? If you couldn't see the animation, would you understand what was going on from that alt?

2025-09-07, 21:11 12 boosts 22 favorites

For more information on writing good alt text, see Harvard's Digital Accessibility​ blog and Design102's guide.

"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 used the Unicode symbol for the Roman numeral 4 - Ⅳ. And, it turns out, lots of screen-readers have a problem with those characters.

Don't Know Much About History

Unicode contains the range of Roman numbers from 1 - 10, plus a couple of compound numbers, 50, 100, 500, and 1000 - in a variety of forms.

Why does Unicode contain these number which, to most people, are just squashed together Latin letter? As ever with Unicode, it is a mix of legacy and practicality.

The Unicode standard says:

Roman Numerals. For most purposes, it is preferable to compose the Roman numerals from sequences of the appropriate Latin letters. However, the uppercase and lowercase variants of the Roman numerals through 12, plus L, C, D, and M, have been encoded for compatibility with East Asian standards. Unlike sequences of Latin letters, these symbols remain upright in vertical layout. Additionally, in certain locales, compact date formats use Roman numerals for the month, but may expect the use of a single character.

Far be it for me to disagree with the learned authors of the spec, but I think they may have erred slightly on this one. While it may be preferable to re-use Latin letters, it leads to ambiguity which can be confusing for a screen-reader.

Practical Examples

Let's write out the numbers using regular letters. Suppose you were talking about "Romeo and Juliet, Act III, Scene I". Most screen readers will see the "III" and correctly speak aloud "Roman three" or similar. But when they get to the "I" it becomes ambiguous. Most will read out "Eye".

Screen-readers rarely look at the whole sentence for context. Which means they get confused. It's fairly obvious that XIV should be "fourteen" as there's no English word "xiv"⁰. But what about "MIX" - is that 1009 or the word "mix"?

Anyone who has watched the BBC knows about their fondness for displaying in Latin the year a programme was made. MCMXCVI is particularly challenging for a screen-reader!

Testing It

I took the following sample sentence - using both letters and Roman numerals.

Text. In Hamlet, Act I, Scene XI the year is MCMXCVI and they are watching Rocky V.

Roman. In Hamlet, Act Ⅰ, Scene Ⅺ the year is ⅯⅭⅯⅩⅭⅥ and they are watching Rocky Ⅴ.

Here's how various services coped:

Amazon Polly

First, the good news. Amazon's Polly read the Roman numerals perfectly. It even pronounced ⅯⅭⅯⅩⅭⅥ as "nineteen ninety six".

Microsoft Edge Read Aloud

I tried with Microsoft Edge's Read Aloud TTS.

It and makes a bit of a hash of the English and just skips the Roman numerals.

Google Text To Speech

The same was also true with Google's TTS products.

Espeak NG

The venerable Linux utility came out with this.

It gets the "Capital i" incorrect, and reads the Roman numerals as their Unicode code points.

Jaws

My good friend Léonie Watson who writes extensively about accessibility was kind enough to record some other samples for me.

Here are Jaws' "Expressive":

And Jaws' "Eloquence:

NVDA

Léonie also provided a recording of NVDA Microsoft One Core

Narrator

And here's Narrator making a right mess of it.

Others

If you know of any other screen-readers, or text-to-speech engines which can cope with this, please let me know!

Fixing it

On Linux, I raised a Pull Request to fix espeak-ng.

The rest of the services don't seem to have a way to easily report bugs to them. If you know a way to raise issues with these screen readers - please do so!

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 ways to style the text.

The simplest way is to give the image some CSS relating to its font, colour, and background.

img {
    font-family: monospace;
    color: #000;
    background: yellow;
}

If the image loads, the CSS has no effect (well, you might see the background colour if the image loads slowly or if it is transparent). But if the image fails, the alt text picks up the font and text colour specified. That seems to work reliably on Firefox, Chrome, and WebKit.

With Firefox, however, you can go a little further. The alt text of a missing image is appended to the DOM as a ::before pseudo element. Which means it can be styled directly.

img::before {
    font-family: monospace;
    color: #000;
    border: .25em dotted red;
    background: yellow;
    padding: .25em;
}

You can go as ridiculous as you like. It will only show up when an image fails to load. Sadly, that does seem to be FF specific. I couldn't get it working in Chrome or Safari.

There's one more thing you can do. You can append text to the end of your alt. For example:

img::after {
    content: " Image did not load.";
}

Demo

img {
    font-family: monospace;
    color: #000;
    background: yellow;
    box-shadow:inset 0px 0px 0px 1px #f00;
}
img::before {
    font-family: monospace;
    color: #000;
    border: .25em dotted #f00;
    background: #ff0;
    padding: .25em;
}
img::after {
    content: " ❌";
}

Cross Platform Compatibility

I've tested in on the three major browser rendering engines:

Do note that Safari will only display the alt text if the image is large enough to contain it.

Should I use this?

That's kinda up to you, sport. I think it's an interesting way to make it obvious that an image has broken. If you do use it, please make sure that the alt text is as legible as possible.

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 - founder of the Alt Text Reminder Bot recently pointed out that there's no alt text in the archives.

Here's a snippet of Twitter's JSON for an image I posted:

"media" : [
   {
      "expanded_url" : "https://twitter.com/edent/status/1579574033720705025/photo/1",
      "indices" : [
        "66",
        "89"
      ],
      "url" : "https://t.co/J1hr0ZfbTl",
      "media_url" : "http://pbs.twimg.com/media/FevGM32XEAA0FX2.jpg",
      "id_str" : "1579574018776174592",
      "id" : "1579574018776174592",
      "media_url_https" : "https://pbs.twimg.com/media/FevGM32XEAA0FX2.jpg",
      "sizes" : {
           "small" : {
                "w" : "680",
                "h" : "510",
                "resize" : "fit"
              },
              "medium" : {
                "w" : "1200",
                "h" : "900",
                "resize" : "fit"
              },
              "thumb" : {
                "w" : "150",
                "h" : "150",
                "resize" : "crop"
              },
              "large" : {
                "w" : "1236",
                "h" : "927",
                "resize" : "fit"
              }
       },
       "type" : "photo",
       "display_url" : "pic.twitter.com/J1hr0ZfbTl"
     }
],

Lots of different media sizing options, but no room for accessibility.

By comparison, the Mastodon social network gives you the alt text. Here's a snippet of Mastodon's JSON for the same image which was cross-posted:

"attachment": [
   {
     "type": "Document",
     "mediaType": "image/jpeg",
     "url": "/media_attachments/files/109/145/933/102/890/212/original/84ae501e39f45091.jpg",
     "name": "A sign for priority seating. The pregnant person's face has been replaced by 😍. The person holding a baby has a face of 😫. The elderly person with a cane has 🥴.",
     "blurhash": "UhKdk{0LRit6-:t6WCWC-oxaRmWBozt7xaa|",
     "width": 1236,
     "height": 927
   }
],

Mastodon is a friendlier alternative to Twitter and - mostly - gets accessibility right. There's still some work to do

You can fix Twitter's missing alt text using Hannah's Alt Text Archive Tool. That'll get you a JSON file full of your alt text, which you can use to recreate your archive.

Look, it's obvious that Alan doesn't give a flying fuck about accessibility, so I don't expect this to change any time soon.

Instead, people should do what they did when MySpace went to shit; move to a different platform.

Join Mastodon today!

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 who use text-to-speech to read out alt text.

Huge thanks to the WordPress team for doing all the hard work to make sure this works properly. I hope this will encourage people to write longer and more useful alt text.

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 the page, if that isn't a language you can read. Or it might read the page aloud in a "British" accent (as opposed to American or Australian).

You can mix and match languages in a document. For example:

<p lang="en">My favourite book is "<span lang="fr">Les Misérables</span></p>".

If you don't do this, you can end up with some weird results. Imagine a page in en-AU which contained a quotes in German, which didn't use lang="de". Your computer might read it out loud and it would sound like this:

Yikes!

It turns out, you can add the lang anywhere:

The lang attribute in no namespace may be used on any HTML element. HTML specification

So, why would you want to add language to an image?

For accessibility, of course!

Consider this image

The HTML behind that image is:

<img lang="zh-CN" alt="大型载客汽车" src="example.jpg" />

That means a user-agent can offer a translation, or read the text with the correct voice Nifty!

There is, of course, a drawback. You can't include multiple languages.

Consider this photo:

There's no way to add multiple langs in an element. This is similar to the limitations of HTML's title element.

There are a bunch of ways to add long and complex descriptions to images which are probably a more appropriate way to add multilingual text.

But, there you go. If you need to add a specific language to an image, you can!

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

@edent

Hi @PostOffice,
Why is your website's alt text written in Latin? I don't think that is very accessible.
shkspr.mobi/blog/2017/11/n… pic.x.com/9fQYq92P9g

---

Post Office

@PostOffice

Replying to @edent@edent Hi Terence, we are looking into this for you. We'll be in touch once we have more info. ~Stacey

---

Of course, Twitter is where good customer service goes to die. So, it wasn't much of a surprise when it wasn't fixed a year later.

Andy Mabbett

@pigsonthewing

Replying to @PostOffice@PostOffice @edent One year on, it seem that you have not fixed this accessibility issue. The "lorem ipsum" alt attribute is still in the source of, for example, postoffice.co.uk/savings-accoun…

---

Post Office

@PostOffice

Replying to @pigsonthewing@pigsonthewing Hi Andy, I am sorry to hear it! I'll pass this on to our Web team. ~Stacey

---

I didn't make a big fuss of the 2nd anniversary. But I thought it would be nice to mark its 3rd birthday.

Terence Eden is on Mastodon

@edent

Replying to @PostOffice@PostOffice Please can I have an update to this issue? Thanks.

---

Post Office

@PostOffice

Replying to @edent@edent Hi, we have a team looking into this currently now Terence as we are concerned that you have reported this previously and it is still ongoing. I'll see if I can get you an update and thanks for your patience - Ryan

---

Which was shortly followed by:

Terence Eden is on Mastodon

@edent

Replying to @PostOffice@PostOffice Please can I have an update to this issue? Thanks.

---

Post Office

@PostOffice

Replying to @edent@edent From the conversations I have been CC;d into it is looking like there is a fix for this and it is being implemented next week. Thank you for drawing this to our attention again and apologies it has taken so long - Ryan

---

A quick check and it has finally been fixed!

It is annoying that there's no real way to get companies to fix their broken stuff. If you report it to customer services - you'll likely be ignored. It makes me wish that there were public bug trackers for everything!

<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 specific date. Nifty!

Problems in the wild

The problem comes when people use abbreviations which may not be accessible to people who use assistive technology like screen readers.

Here's an example from the BBC's news front page. That "1h" means the story was published 1 hour ago. Take a look at the code behind it: The <time> element represents when the story was originally published. The qa-status-date-output is an abbreviation of the relative time since the story was published. It is hidden from screen readers with aria-hidden="true". The gs-u-vh is the alternative text for screen readers. It is hidden from sighted users with CSS.

There are a few problems with this approach:

1. It violates the DRY principle. The time is effectively written out three times.
2. It produces conflicting or ambiguous information. All three times contradict each other.
3. If CSS isn't working, both times are displayed.

Terence Eden is on Mastodon

@edent

Replying to @edentI found this due to the strange way Lynx renders the timestamps.
Because half of them are hidden using CSS, it becomes unreadable. pic.x.com/7obyophheb

---

It also has issues when search engines see the content:

To be clear, I'm not dunking on the Beeb. They have a great set of accessibility people. I'm just wondering if there's a simpler / better way to do things?

Possible Solutions

Ideally, there would be something like aria-datetime to read out the time. But that doesn't exist.

Or, screen readers could interpret the <time> element and do something with it. But that doesn't seem well supported. And, how will a screen reader know that the salient information is a relative duration, rather than a specific datetime?

ISO8601 - the datetime standard - allows for durations. So you could write datetime="TP30M" to mean 30 minutes. But that doesn't say it was 30 minutes ago and you lose the full datetime.

Here's how I would solve it:

<time datetime="2020-11-30T09:23:48.000Z">
   <abbr aria-label="1 hour ago">1h</abbr>
</time>

That uses the <abbr> abbreviation element. A sighted reader will see the "1h", a screen reader will read out "One Hour Ago", and someone browsing in text mode will just the "1h".

I think that's a pretty optimal solution. It's clean, readable, doesn't rely on hiding any elements, and should be easy to keep in sync.

Think there's a better way? Let me know in the comment box.

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 image as an illustration:

Yikes! I can't read most of that text, even if I whack up the brightness on my screen.

Here's what the image looks like in an editor:

As you can see, the majority of the background is transparent - indicated by the traditional checkerboard pattern - with occasional blocks having a background colour.

Background transparency is be great if you can guarantee the background colour! But the web is wonderful; browsers are intended to be the user's agents. This means you can substitute the page's design with your own. Change fonts, make things easier to read, flip colours, whatever you want.

To account for dark mode - or any user changed interface - you have two main options:

1. Remove transparencies
2. Stroke outline

The first is obvious - just put in a background colour. The second is a little harder to explain.

Text can have a colour - fill:#000 paints the text black. Text can also have an outline - known as a stroke. stroke: #fff; stroke-width:2px; paints a 2 pixel white border around the text.

Here's an example SVG (I've mocked up the transparent background):

My suggestion is - put a high-contrast stroke around any object where you expect the background colour to be shown through a transparency.

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 mejs-controls.svg - the graphic which contains the interface controls. I think it could be made more accessible with the following changes:

• Make the background of the button a transparent grey.
• Move the play triangle to the foreground.

A pretty simple fix!

This creates a semi-transparent grey background, with a white stroke. So the play button will be visible no matter the colour of the background video. Here's what it looks like:

I've submitted a pull request to fix it.

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.

With that in mind, I've proposed a small change to the default behaviour in WordPress's media UI.

At the moment, when you add an image to your blog, you get a tiny little text input field - with only enough space for a few characters.

That doesn't encourage people to write meaningful text. So my suggestion is to turn that into a <textarea> element.

It looks like this:

More space for writing, and people can drag the corner of the area if they need more. It also matches the other text areas in the interface.

Hopefully, that will go a small way to improving accessibility on the web.

(I raised the same issue in the new Gutenberg Editor a couple of years ago - and it was accepted and merged.)

You can read the patch and the bug report - please leave a comment on them if you think this is a useful change.

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 when taking a screenshot. So you get the joy of me pointing a camera at my screen like some kind of troglodyte sharing memes on your neighbourhood's Facebook group.

Broken Behaviour

What does this tool-tip say?

That's from "Finder" the default Mac file system app.

Expected Behaviour

With the "normal" size icon, I can see what the text says.

Usability pervasiveness

OK, it's impossible to test every combination that a user might choose. But it really feels like bits of MacOS are hostile to accessibility changes.

It is impossible to change the system font size. That top menu is fixed at a tiny size. If you want a more readable font - tough.

Apple knows best.

Tool tip size

You can increase the font size of tool-tips with this obscure command-line incantation:

defaults write -g NSToolTipsFontSize -int 20

Restart the app and you'll get a larger font!

Which is still obscured by the cursor.

Report this bug

Apple have known about this bug for at least 10 years.

Apple knows best.

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. The images weren't loading because my area's 3G signal is overloaded. So I got the same experience as someone with a visual impairment.

What is the message? Is it "keep calm and wash your hands"? Or "The hospital is full, please don't come"? There's literally no way of knowing. Think of the anxiety that Tweet generates to anyone who can't read the image.

If you are communicating important public health information, you must make it available to everyone.

Here's what it was supposed to look like:

Bill Ackman

@BillAckman
Pershing Square Philanthropies

From the chair of surgery at Columbia Presbyterian pic.x.com/XgEDZO01VN

---

(Sorry for picking on you, Bill. Yours was just the first of many I saw.)

Twitter lets you add up to 420 characters in an image description field. For some images, that's plenty. For the above text, a quick summary would be enough.

In the UK, public bodies have a statutory duty to make their content accessible. That includes posts on social media. Adding image descriptions is not an "unreasonable burden".

Please click on twitter.com/settings/accessibility and turn on "Compose image descriptions".

I have RSI and use a vertical mouse. After decades of regular left-clicking, my index finger is worn out. So I use a thumb button to click. Changing the order of mouse buttons is supported in all modern operating systems. Evoluent - the manufacturer of my mouse - also provide a handy tool for Windows and Mac so that I can set the mouse buttons up just the way I like them. I've written a guide for how to do it on Linux.

But with a ChromeBook? No. The message being put out is that Google doesn't want unhealthy people using its products.

I plugged my mouse in, and tried to change the button order. There's no way to do so. No hidden flag, no extension, no catering for abnormal people.

This isn't a new problem. A bug was raised FIVE years ago.

My favourite responses from Googlers to that bug are:

Technically it's not hard, it's just a question of UI work.

So it'll come along quickly?

Chrome has always aimed to minimize UI, as these features add up.

Ugh! Such a hassle to create something useable!

It's clearly a power-user feature

Yay! My super-power is pain in my index finger. I'm sure Professor Xavier will invite me to his special school for mutants any day now...

It's 2019. It is unacceptable to release a product which isn't accessible. Google is one of the most powerful companies on the planet, it employs some of the most talented people I know. But there seems to be no way to prompt them into fixing old accessibility bugs. Perhaps a ranty blog post will push things along?

2025 update. The bug was fixed ten years after being opened!

As I left court, I asked if there was anything they needed me to fill in or sign. They said there wasn't. I just sort of assumed that I wouldn't get any expenses back - my travel was mostly within my regular season ticket anyway.

Then this dropped on my doorstep.

A hand written envelope. Let's ignore the fact they've misspelled my name (I won't ignore this). Does this mean that every witness in the country requires someone to handwrite an envelope and stuff something in?

That's ridiculously inefficient and error prone.

Let's take a look at the contents. Again! Handwritten. Print on demand is a thing, you know!

I also need to figure out if I'm a "Ordinary" or "Professional" witness - because someone at the CPS has forgotten to tick the box.

Now, that wouldn't be so bad - send them my bank details and let them work out how much I'm owed. But it isn't that easy.

More Forms!

That was just the start - here is the rest of the form: Three more pages! Some of which simply aren't relevant to me as an "Ordinary" witness.

Why do I need to fill this out? The court knows how long I was there. They know what sort of witness I was. If I lie, they'll cross-check - so why not pre-fill this as well?

Where's the online form? I've checked on the CPS website - and there isn't even a template so I can type it up and email it over.

How Hard?

This 4 page form is, apparently, so difficult to complete that it comes with another 4 pages of guidance. Pro-tip, if your guidance is as long as your form - rethink your form design.

How Much?

The form and guidance also came with another guidance form. This 2-pager explaining how much I can claim.

So I have to read the guidance, fill in the form, then manually do maths to make sure it's worth my time claiming. And, I suppose, once the form is received, someone else needs to check all my details again to make sure I've not accidentally over-claimed or under-claimed.

Grumpy

Bad form design makes me grumpy. Non-digital forms make me grumpy. Handwriting makes me grumpy. Misspelling my name makes me grumpy.

Nothing about this experience is delightful.

Dealing with court stuff shouldn't be frivolous - but it doesn't need to be so enraging.

GRRRRR!

How I'd Improve It

• This could easily be done at court.
  • Either get the witnesses to fill out a form while waiting, get a volunteer to help them, or hand them a pre-printed form on the way out.
• If it has to be posted, at least include a covering letter saying something like:

"thank you for attending court. The justice system only works because people like you are prepared to take time out of their busy lives to act as witnesses. We realise that you may have spent money travelling to court - so we want to pay you back."

• Make a separate form for Ordinary and Professional witnesses.
• Test the form with users to make sure it's as easy to complete as possible.
• Incorporate the guidance into the form, rather than having it as a separate sheet.
• Don't handwrite envelopes - or manually stuff them.
• Put the form online.

I don't think any of these are radical solutions. They could all be easily trialled to see which were effective.

Do the hard work to make things easy

I work for a different part of the Civil Service. I'm incredibly grateful that they let me attend court as a witness without it impacting my pay. My true expenses were £3 for a tube journey I otherwise wouldn't have taken. I could also claim £2.25 in subsistence allowance.

Is it worth me bothering with this form to claim a fiver?

I was particularly confused that the UK's Post Office had a dozen pages containing that little Latin phrase.

A quick dive into one of the pages, found this enlightening snippet of code:

This is a monumentally inconsiderate thing to do. I can guess exactly why it happened - a developer got a warning from an HTML validator that alt-text was required. Rather than putting in a description which would be useful for visually impaired people (and SEO), they just shoved some placeholder text in.

If you run a website - please create useful alt text.

1 year anniversary update! This still isn't fixed.

Terence Eden is on Mastodon

@edent

One year later and @PostOffice still haven't fixed their accessibility issues.
shkspr.mobi/blog/2017/11/n…

(Thanks @pigsonthewing for the reminder.)
#a11y #LoremIpsum pic.x.com/ry37fjx7wo

---

Post Office

@PostOffice

Replying to @edent@edent Hi Terence, we've sent this on to our web-team again as they had informed us action was being taken when it was raised last year ~Stephen

---

The first thing to mention is that this is not a technical manual. There's the odd smattering of HTML in there - but this book is much more focussed on why accessibility matters and how to implement an accessibility positive culture - rather than which specific tags to use in your code.

This is a book for managers, designers, and programmers. As she points out, Accessibility is…

a team effort. The accessibility of the site isn’t just the responsibility of one lone developer who fixed all the problems before the page went live.

What is accessibility?

Before continuing this review, I first feel the need to explain the Social Model of Disability.

There is no such thing as disability. There are choices we make as a society which means that some people aren't able to fully participate in the world.

We choose to have doors which are too narrow for a wheelchair to fit through. We choose to print text in a tiny font with low contrast. We choose not to include subtitles on our videos. It isn't that people need us to make things specially accessible - we need to not put artificial barriers in the way of our users.

The web is pretty usable by default - it is up to us to keep it that way.

The second thing to know is that we all need accessibility eventually. One day you will be old, and your eyes will dim. Or you'll forget your headphones and want subtitles on a video. Or you'll be shivering with cold and need bigger touch-screen targets. Or you'll be ill, and need something written in simple language.

Accessibility is for everyone.

Why should I bother?

As Laura points out, there's a cynical reason to care about accessibility. Over two-million people in the UK have some sight-loss. It's just good business sense to be available to as many potential customers as possible. There are a whole range of people who are left out of the modern web.

In the same way that accessibility in our physical environment isn’t just about wheelchairs, accessibility on the web isn’t just about screen readers.

Laura Kalbag

Laura does an excellent job of explaining all the various techniques you can use to make your technology as inclusive as possible for everyone. Some may be obvious to you - but I'll guarantee you'll pick up some tips that you were previously ignorant about.

I consider myself well versed in accessibility issues - and I still found stuff in the book which caused me to re-evaluate some of the choices I've previously made.

It’s a tiny little star, how did it end up meaning “required”?

There's also a quick primer on legal situation in the UK, USA, and EU. People have a strongly defined right to accessibility - that almost certainly includes your website.

One thing I found particularly useful was strategies for recruiting users to test your site. Not only how to get a representative mix of people, but also how to avoid being rude to them.

This is a short book - 170-ish pages - and you'll probably read it in an afternoon. But you'll find yourself going back to it time-and-again. Each chapter clearly sets out the reasons behind adopting an accessible mindset and give specific strategies on making your team more open to empathetic design.

Verdict

Laura's book isn't a detailed guide to the intricacies of ARIA or to the proper use of alt tags - it is much more than that. Think of it as an introduction to the philosophy of accessibility. It is a book which is repeatedly quotable, well researched, and vital for anyone involved in web design.

It will spark conversations, and challenge you to reassess how to you approach building your sites.

Get the book

The eBook is available for $11 from A Book Apart - you get DRM free copies in ePub, Mobi, and PDF. The printed version is $21 + postage. Discounts apply when ordering multiple books.

My biases

I've known Laura for several years. I've even met Oskar - her enormous husky / malamute.

I sit on the W3C Advisory Committee, whose accessibility work features prominently throughout the book.