I recently ran a session with some of our content developers covering alternative text, and the difference between alt text and captions. It seemed to be well received, so I thought I’d write it up. Modern web design includes a variety of techniques to provide text alternatives for non-text content. In this example, a <figcaption> provides additional context, “Text alternatives” is the first guideline of the first principle of WCAG 2.1. It’s literally the first thing to think about – and the reason why is pretty simple: not everyone can see images. That may be because they have a vision disability. But it could also be because the image has been deleted, renamed or moved. Maybe their network connection is poor. Or their browser doesn’t support the format. Or they have disabled images in their email client because they have a 500MB monthly limit. Whatever. It happens. Text alternatives are what users rely on when images are not available. Like this one right here: The alternate text needs to _replace_ the image. So your question becomes very definite: > What text do I need to provide if this image is not available? How might I describe the appearance, purpose, function, or meaning of this image to someone who can’t access it? ## The official W3C guidance I started preparing for the session by re-reading How to meet WCAG, the Worldwide Web Consortium (W3C for short) guidance for web content creators. The first thing that struck me was how intimidating it looked. The guidance is split over 6 different scenarios, with up to 20 different techniques for each. It includes techniques for ARIA attributes and other technologies that most content authors won’t know anything about. It looks very scary and technical, and there is _a lot_ to take in. So it’s no wonder people get confused by it all, and it reassured me that it’s worth my time to deliver the session. The second thing that struck me was the precise wording of guideline 1.1.1 Non-Text Content: > Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. > > How to meet WCAG (Quick Reference) It’s the phrase “Provide text alternatives for any non-text content” that’s of interest. It implies two things: * This is not just about pictures: it also covers graphs, video, and audio. Basically, anything that’s not text * It’s not about ‘alt text’, it’s about _text alternatives_ – and note the plural And if you do read the guidance, it is pretty clear that alt text (or alt attributes, more precisely), is just one part of the picture for providing text alternatives. ## Under the hood The most basic way to include an image on a web page is with HTML something like this: <img src="/picture.png" width="800" height="600" alt="A description of the picture">Code language: HTML, XML (xml) This basically tells the browser: place an image here, this is where you will find it, its dimensions, and some alternate text. The alt attribute is generally what most people think of when we talk about text alternatives. But as guideline 1.1.1 makes clear, it’s not the only way, and we shouldn’t limit ourselves to considering it alone. ## Something a bit more user-friendly So, having decided the W3C guidance was a bit ferocious for my audience, I looked around for something a bit more approachable. The first thing I remembered was an article called What is the Difference Between Alternative Text, Long Description, and Caption? by Deborah Edwards-Oñoro, published as part of the HTMHell advent calendar. It’s brief and gets straight to the point, and breaks text alternatives into three categories: * Alternate text * Long descriptions * Captions Edwards-Oñoro describes the distinction between them as: * Alternate text replaces the image * Long descriptions can be used for more complex images; they are bits of text next to the image that describe or discuss, or otherwise complement, the non-text content * Captions provide supporting information, available to all I liked the straightforward approach here, but felt it lacks nuance. Writing text alternatives can be tricky, and it’s not always easy to know what the alternative should be. ## The Australian Government style guide I found this quite by chance, but I rate it highly. It’s clear, comprehensive, and practical. I won’t regurgitate it here, but in summary: * Use empty alt attributes `alt=""` for decorative images * For informative or complex images, use context, captions and alt attributes together to give all users access to the same information * For functional images, like search icons, or logos that link to the home page of a website, describe the function of the link in the alt attribute Read the Australian Government Style guide on Alt text, captions and titles for images ## Key concepts * Orient people. Place non-text content within document structure (headings, basically) so they know what it’s about * Use the environment. Alt attributes are not your only means of describing visual content for non-visual users * Use captions judiciously, but also use just plain old body copy to do the job * It’s fine to say “as figure 1 shows, Scotland’s employment rate is the highest it’s been in 20 years” in body copy, as long as “figure 1” is programatically identifiable * Use a combination of in-copy, alt text and caption to describe the full meaning of the image or non-text content. This is OK – the people who rely on this information have had years to figure this out, and they’re much better at it than you or I * Don’t fret too much. Do your best. If you do anything at all, most visually impaired web users will be enormously grateful because their experience of the web is overwhelmingly crap ## Concluding thoughts The World Wide Web Consortium (W3C), perhaps realising that their official guidance is not the easiest document to get your head round, have published an image tutorial that can help you decide how to go about providing text alternatives. Based on this, I wrote a little app to help you understand how best to include text alternatives for image-based content. ### Some feedback from an actual screen reader user After drafting this post, I got involved in a conversation on Mastodon with Léonie Watson (see below) and Amelia Bellamy-Royds – both contributors to the W3C web accessibility initiative – amongst others. Léonie uses and relies on a screenreader to use the web. So her experience trumps mine any day of the week. Here’s what she said: ## Léonie Watson @tink@front-end.social @itsjoshbruce @AmeliaBR @iamdavidobrien I think that image descriptions are important, but that detailed info about the product shouldn't be limited just to images/text descriptions. The WAI info on providing descriptions is a bit out of date and I'd suggest a different approach – using a disclosure. For example: “` <details> <summary><img src="img.png" alt="Short text description"></summary> //Long/detailed description </details> “` 27 February 2023, 11:58 am **0** boosts **0** favorites ## Léonie Watson @tink@front-end.social @itsjoshbruce @AmeliaBR @iamdavidobrien This way the detailed description is available to anyone who wants it but doesn't take up screen estate by default. You can also structure the content inside the disclosure to use headings, lists, tables, as well as more prose. 27 February 2023, 11:59 am **0** boosts **2** favorites ## Léonie Watson @tink@front-end.social For me, as a screen reader user, the headings are the most useful feature. They let me navigate efficiently between the available products. The list markup is useful to the extent it lets me know how many items are displayed, though in this case because Ocado uses an infinite scroll it's less useful because only the number of listitems in the DOM are announced, not the total. @itsjoshbruce @iamdavidobrien 27 February 2023, 1:41 pm **1** boosts **1** favorites So there you have it: describe really meaningful images in body content, using standard conventions (headings, tables, lists) as much as you can. If you do this, alt attributes for images can, and should, be very brief. If necessary, you can put longer descriptions in some kind of disclosure/details/accordion component immediately before or after the image. Just make sure it’s discoverable by assistive tech, and operable with just a keyboard. ### As always, it depends … What is the context? Who are the users? What do they need? An image of a woman in a blue summer dress will need a very different text alternative in a news article compared to what’s required on a fashion e-commerce site. This is why we can’t automate our way out of this; the web is for everyone. It needs humanity to make it work. The bottom line is … you’re a content creator. Help all your content consumers understand what it is about as best you can. There is no right or wrong choice. Accessibility overlays are not on option; human empathy is essential. ### … and a footnote: on emotion in images In an exchange that lasted 10 years, Léonie Watson – who is blind, relies on a screenreader, is a web developer, and contributor to W3C – and Jake Archibald, a former Google developer advocate, had this fascinating exchange. * Thoughts on skin tone and text descriptions – Tink – Léonie Watson * Writing great alt text: Emotion matters – JakeArchibald.com * Text descriptions and emotion rich images – Tink – Léonie Watson `[This post was edited on 18 May 2023 to reflect the fact that Jake Archibald has left Google.]` ## One final thought In everything you publish, make one thought uppermost in your mind: do not strive to meet technical standards. Instead, try to understand, and address, the needs of people. If you do that, the next time you see those standards will be in your rear-view mirror as you whizz way beyond them. ## Update: on screenshots of code 28 August 2023 Quite by chance, I came across this very good blog post by Ben Myers on How I write alt text for code snippets on social media. ## Update: on using disclosures for long descriptions This paper by the Canadian Centre for Cyber Security uses <details>, <summary> and regular html text elements exactly as Leonie Watson suggests. I think it works brilliantly. Here’s some typical markup: <div class="panel-body"> <figure> <figcaption class="text-center">Figure 1: Phishing campaign by threat actor</figcaption> <img alt="Figure 1 - Long description immediately follows" class="img-responsive" src="/fig1-itsm.30.031-e.png"> </figure> <details open=""> <summary>Long description - Figure 1: Phishing campaign by threat actor</summary> <p>This figure illustrates how a threat actor might route and deliver a phishing email with a link to an <abbr title="adversary-in-the-middle">AitM</abbr> phishing site.</p> <ol> <li>The user receives a phishing email with a link.</li> <li>...</li> </ol> </details> </div>Code language: HTML, XML (xml) David O'Brien Website | + postsBio I'm a service designer in Scottish Enterprise's unsurprisingly-named service design team. I've been a content designer, editor, UX designer and giant haystacks developer on the web for (gulp) over 25 years. * David O'Brien __What’s in a name? * David O'Brien __Why people use subtitles and captioning * David O'Brien __How to create a user story map with a Miro table * David O'Brien __Would you hire Sam? ## Possibly related * How to create accessible Word documents * Accessibility - Sharing knowledge between organisations * What's in a name? * Reducing carbon emissions from our websites

Some readers may have noticed that Scottish Enterprise launched a new brand identity recently. Our logo was updated, and our typefaces and colour palettes changed. I’m not a marketer, so that’s not my domain and I have nothing to say about that. But I am a designer. And, when you’re designing communications material, whether it’s a website, an app, a brochure, a poster, a letter … these things matter. They are constraints you have to design within. And yet, you have to produce an experience that’s accessible. ## Helping our content and UX designers Our content and UX designers have to negotiate the intersection of our brand palette and accessibility regulations. So I made a simple thing to see which colour combinations pass accessibility thresholds. It’s just an HTML `<table> `with CSS to set foreground and background colours and text to indicate if it conforms at WCAG2.2. Level AA or AAA. (There’s no Level A conformance for colour contrast, which is a failing IMO.) You can filter the table to isolate which combinations work at level AA or AAA. It’s deliberately and intentionally #inaccessible – first time I’ve done so. The code’s on Github if you’re interested. Luminosity contrast ratios are all based on Gez Lemon’s colour luminosity contrast analyser. David O'Brien Website | + postsBio I'm a service designer in Scottish Enterprise's unsurprisingly-named service design team. I've been a content designer, editor, UX designer and giant haystacks developer on the web for (gulp) over 25 years. * David O'Brien __What’s in a name? * David O'Brien __Why people use subtitles and captioning * David O'Brien __How to create a user story map with a Miro table * David O'Brien __Would you hire Sam? ## Possibly related * Accessibility - Sharing knowledge between organisations * How to create accessible Word documents * Invisible Disabilities * Volunteering

Photo by Vyshnavi Bisani on Unsplash Historically, we’ve used Google Analytics to measure usage of this website. GA has some advantages: it’s free, for a start, and it’s also the default industry standard. Even gov.uk uses it. But it also has some, in my opinion, fairly major drawbacks. * It may be free for site owners, but there is a cost to users in terms of their privacy * It’s a data source for Google’s big advertising empire * It requires cookies out of the box, which means we need to ask for consent, which we (probably) mostly don’t get, which in turn means * It’s unreliable, and you can’t even know _how_ unreliable * I comes with a big dose of javascript, which has a performance impact So I’ve been thinking for some time that it would be good to be able to find an alternative that addresses at least some of the issues. At the start of October, I uninstalled Google Analytics and replaced it with an alternative package that: * Integrates with our CMS * Runs entirely on our server, not in your browser * Records no personally identifiable information * Stores all data on our server, with no third parties involved * Does not require cookies or any other kind of local storage in clients * Uses no javascript Additionaly, I set the ‘salts’ (long strings of random letters and numbers that represent a unique visitor) to be refreshed every 24 hours as an additional layer of privacy. As there are no cookies, we do not need to ask for consent, so I was also able to disable our cookie consent banner. Another win. ## The results Screenshot of the analytics interface So far, the results seem pretty good. It’s basic and simple, but that’s fine; we don’t need anything more detailed than page views and visitors. We only want to know what content people find most interesting. We don’t want to track people around the site or over the web, we don’t have any campaigns, we don’t need to know about your every interaction. It’s just nice to know that the work that goes in to maintaining and writing for this blog is appreciated. ### Performance benefits As a side benefit, removing the kilobytes of javascript that come with GA has definitely improved this site’s performance. * See monthly analytics data for this site David O'Brien Website | + postsBio I'm a service designer in Scottish Enterprise's unsurprisingly-named service design team. I've been a content designer, editor, UX designer and giant haystacks developer on the web for (gulp) over 25 years. * David O'Brien __What’s in a name? * David O'Brien __Why people use subtitles and captioning * David O'Brien __How to create a user story map with a Miro table * David O'Brien __Would you hire Sam? ## Possibly related * How this site is performing * 2025 performance data * Good services scale * Accessibility - Sharing knowledge between organisations

Saying “No-one using our service has accessibility needs” is a bit like saying “We don’t need a ramp, no-one in a wheelchair has ever come up the stairs”. An accessible ramp at Glasgow Queen Street train station. The long, low rake helps wheelchair users but also people pushing prams, or a bike, or – as in this case – a heavy suitcase. Basically, it makes life easier for everyone. I remember once, a long time ago, a colleague asked me to publish some content on our website. It was marketing material, for a conference. PDF, of course. And very inaccessible. I declined, and we had a meeting. I explained why I couldn’t publish the material in its current state and they said “But there won’t be any blind people at this conference!” To which I replied, “No, there won’t, because your marketing means they can’t possibly even know it is on.” To be fair to my colleague, when I explained it to them, they got it. It literally hadn’t occurred to them. Why would it? Their job was to sell out a conference on renewable energy, or whatever it was. But in my experience, almost everyone gets it once you give them context. Almost everyone knows someone with accessibility needs, even if they currently have none themselves. Ableism is a silent assassin in our culture. It pervades our discourse. We must hear the voices of disabled people. Among whom I now count myself. But most people are decent, and kind. And want to do the right thing. Don’t scold them. Help them understand, and find a solution. On this occasion, I published the content as html with a friendly URL, and the PDF as an optional download. Win/win. No idea how many visually impaired people showed up at the conference, but that is emphatically not the point. This post is based on a series of posts on Mastodon in March 2025. David O'Brien Website | + postsBio I'm a service designer in Scottish Enterprise's unsurprisingly-named service design team. I've been a content designer, editor, UX designer and giant haystacks developer on the web for (gulp) over 25 years. * David O'Brien __What’s in a name? * David O'Brien __Why people use subtitles and captioning * David O'Brien __How to create a user story map with a Miro table * David O'Brien __Would you hire Sam? ## Possibly related * Invisible Disabilities * A new life in the unknown * Accessibility - Sharing knowledge between organisations * How to create accessible Word documents

Saying “No-one using our service has accessibility needs” is a bit like saying “We don’t need a ramp, no-one in a wheelchair has ever come up the stairs”. An accessible ramp at Glasgow Queen Street train station. The long, low rake helps wheelchair users but also people pushing prams, or a bike, or – as in this case – a heavy suitcase. Basically, it makes life easier for everyone. I remember once, a long time ago, a colleague asked me to publish some content on our website. It was marketing material, for a conference. PDF, of course. And very inaccessible. I declined, and we had a meeting. I explained why I couldn’t publish the material in its current state and they said “But there won’t be any blind people at this conference!” To which I replied, “No, there won’t, because your marketing means they can’t possibly even know it is on.” To be fair to my colleague, when I explained it to them, they got it. It literally hadn’t occurred to them. Why would it? Their job was to sell out a conference on renewable energy, or whatever it was. But in my experience, almost everyone gets it once you give them context. Almost everyone knows someone with accessibility needs, even if they currently have none themselves. Ableism is a silent assassin in our culture. It pervades our discourse. We must hear the voices of disabled people. Among whom I now count myself. But most people are decent, and kind. And want to do the right thing. Don’t scold them. Help them understand, and find a solution. On this occasion, I published the content as html with a friendly URL, and the PDF as an optional download. Win/win. No idea how many visually impaired people showed up at the conference, but that is emphatically not the point. This post is based on a series of posts on Mastodon in March 2025. David O'Brien Website | + postsBio I'm a service designer in Scottish Enterprise's unsurprisingly-named service design team. I've been a content designer, editor, UX designer and giant haystacks developer on the web for (gulp) over 25 years. * David O'Brien __What’s in a name? * David O'Brien __Why people use subtitles and captioning * David O'Brien __How to create a user story map with a Miro table * David O'Brien __Would you hire Sam? ## Possibly related * Invisible Disabilities * A new life in the unknown * Accessibility - Sharing knowledge between organisations * How to create accessible Word documents