I want to address a problem which threatens all of humankind, and what we, as a species, need to do to stop it. I believe my stuffed dinosaur, Chomp, wants...

I noticed a comment in a chat today at work, along the lines of: > We used an LLM to categorise the sticky notes from a workshop. It did a really good job, and even colour-coded the notes and aligned them. To which I shrugged, thought “good on you” and went on with my day. Later, another colleague tagged me and asked if it was something we could learn from. I replied, rather gnomically: > The point of the doing is the doing, not what gets done. It was a somewhat throwaway comment at the time, but I’ve been thinking about it all day. So I’m trying to round my thoughts up here. ## Why do we do workshops and ideation sessions? The people we recruit to take part in Service Design workshops must, for the most part, find them incredibly tedious. But we do them because they get thoughts, ideas and experiences out of people’s heads and onto paper or digital facsimiles so that everyone else can see them. The people who are actual experts in this specialism. We do that so we can: * Challenge each others’ point of view * Bring everyone’s lived experience to the table * Understand where we agree, and disagree Most importantly, we do this to _make people talk about these things._ I can’t emphasise this enough. The entire point of these sessions is to get people talking to each other. People who have never talked to each other before. Who have never understood, or even been aware of, others’ point of view. ## The doing is the work Sure, you can ask copilot or whatever to sort your ideas. Colour code them. Manoeuvre them into neat columns. But here’s what you’re missing out on: * The nuance you get from those “Oh, I wrote that one …” conversations * The “Is this related to these, or more like this cluster over here?” discussions that drive you deep into the subtleties of what those 5 or 6 words mean * An appreciation of the human frustrations, pains and needs behind every sticky note * The experience of _actually having done this exercise_ And it’s the last point that’s key. Outsourcing this to an LLM (or anything else, for that matter) is a bit like sending them on your holiday instead of going yourself. Sure, you’ll get a nice report, not terrifically well written, maybe even some entirely fabricated photos in which you have an unpredictable number of fingers. But you will not have had the experience. You will not have felt that warm sunshine, tasted that chilled rosé, felt that gentle breeze. When we finish these exercises, we typically create some kind of report or slide deck with key findings. Maybe also some photographic record of the finished board. We play it back, file it away, and in all likelihood no-one – except perhaps an assessor – will ever look at it again. But that’s OK. Because the point in doing the exercise is to do the exercise, not to produce a report. The exercise is the work. The report is a byproduct. It’s just a record that the exercise was done. The real learning is embedded in you, and everyone else collectively who took part. ## Elio Campitelli @eliocamp@mastodon.social RE: https://mastodon.scot/@se_davidobrien/115765195474768607 This is so true about a lot of #LLM stuff. Like writing up notes to study. The point is not to have the notes, the point is that making the notes makes you learn so you end up not needing them. 14 January 2026, 1:16 pm **15** boosts **16** favorites The point of the doing is the doing, not what gets done. 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 * A new life in the unknown * The places and people we remember * It's good to talk * Good services scale

Home » Toolbox » Safelinks original URL decoder A little app that takes the mangled URLs generated by Microsoft 365’s Safelinks link checking service and decodes them to recover the original target. Just pop the Safelinks redirect URL in this widget and press enter or click the button. Then copy the retrieved URL and use it wherever you need it. Outlook Safelinks URL Decode Safelinks URL Original URL Copy original URL Reset ## What data do we store? None. Any URL you paste here is dealt with entirely in your browser. No data is sent to our server, or to analytics. We don’t know what you do when you’re here. You can view the javascript that does this below. ## Why create this? We use Microsoft 365, so links in all the emails we receive are passed through a link-checking service called Safelinks to check that the endpoint is not malicious. Which is great, but … In the process, link URLs are transformed into something like this: > http://safelinks.protection.outlook.com/?url=https%3A%2F%2Fdesign.scotentblog.co.uk%2Fsafelinks-original-url-decoder&data=05%7C01%7Cxxxxx.xxxxxx%40scotent.co.uk%7C014af0a3586b4b6935e608da39ca8a1c%7C50374495fdde4d04bc5c574982680e19%7C0%7C0%7C637885839322117164%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=oQY%2BD%2FHdElO%2BsWIKPxSh%2FCZhqVnOlqnemz9ocQlkDGY%3D&reserved=0 Content authors are often under great time pressure to publish, and will simply copy links from an email to publish on the web. This can be problematic, because: * Safelinks redirects may not work for everyone * The URLs are too long for some older browsers to handle * They are not human-readable, so hide the ultimate destination * They mess with analytics data * They are served over http, not https, so * potentially vulnerable to interception * could harm search ranking if we have too many links to insecure resources * If you look closely, there’s an email address in there (I’ve changed it to xxxxx.xxxxxx@ in the example) which is going to be available for anyone on the web to harvest So, on the web, it’s best to decode Safelinks URLs and use the original target for your hrefs instead. ## Code The `copyToClipboard()` function is called by an `onClick` event in the button. let btn = document.getElementById("btn"); let str = ""; btn.addEventListener("click", function (event) { event.preventDefault(); str = document.getElementById("input").value; var start, end; start = str.indexOf("=") + 1; end = str.indexOf("&"); let url = str.slice(start, end); url = decodeURIComponent(url); document.getElementById("output").value = url; document.getElementById("result").setAttribute("style", "display: block;"); }); function copyToClipboard() { event.preventDefault(); var text = document.getElementById("output").value; navigator.clipboard.writeText(text).then( function () { alert("Link has been copied"); }, function (err) { alert( "Looks like your browser does not support copying to the clipboard. Select and copy the text manually." ); } ); } Code language: JavaScript (javascript) 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 * Alt text decide-o-matic

Home » Toolbox » Safelinks original URL decoder A little app that takes the mangled URLs generated by Microsoft 365’s Safelinks link checking service and decodes them to recover the original target. Just pop the Safelinks redirect URL in this widget and press enter or click the button. Then copy the retrieved URL and use it wherever you need it. Outlook Safelinks URL Decode Safelinks URL Original URL Copy original URL Reset ## What data do we store? None. Any URL you paste here is dealt with entirely in your browser. No data is sent to our server, or to analytics. We don’t know what you do when you’re here. You can view the javascript that does this below. ## Why create this? We use Microsoft 365, so links in all the emails we receive are passed through a link-checking service called Safelinks to check that the endpoint is not malicious. Which is great, but … In the process, link URLs are transformed into something like this: > http://safelinks.protection.outlook.com/?url=https%3A%2F%2Fdesign.scotentblog.co.uk%2Fsafelinks-original-url-decoder&data=05%7C01%7Cxxxxx.xxxxxx%40scotent.co.uk%7C014af0a3586b4b6935e608da39ca8a1c%7C50374495fdde4d04bc5c574982680e19%7C0%7C0%7C637885839322117164%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=oQY%2BD%2FHdElO%2BsWIKPxSh%2FCZhqVnOlqnemz9ocQlkDGY%3D&reserved=0 Content authors are often under great time pressure to publish, and will simply copy links from an email to publish on the web. This can be problematic, because: * Safelinks redirects may not work for everyone * The URLs are too long for some older browsers to handle * They are not human-readable, so hide the ultimate destination * They mess with analytics data * They are served over http, not https, so * potentially vulnerable to interception * could harm search ranking if we have too many links to insecure resources * If you look closely, there’s an email address in there (I’ve changed it to xxxxx.xxxxxx@ in the example) which is going to be available for anyone on the web to harvest So, on the web, it’s best to decode Safelinks URLs and use the original target for your hrefs instead. ## Code The `copyToClipboard()` function is called by an `onClick` event in the button. let btn = document.getElementById("btn"); let str = ""; btn.addEventListener("click", function (event) { event.preventDefault(); str = document.getElementById("input").value; var start, end; start = str.indexOf("=") + 1; end = str.indexOf("&"); let url = str.slice(start, end); url = decodeURIComponent(url); document.getElementById("output").value = url; document.getElementById("result").setAttribute("style", "display: block;"); }); function copyToClipboard() { event.preventDefault(); var text = document.getElementById("output").value; navigator.clipboard.writeText(text).then( function () { alert("Link has been copied"); }, function (err) { alert( "Looks like your browser does not support copying to the clipboard. Select and copy the text manually." ); } ); } Code language: JavaScript (javascript) 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 * Alt text decide-o-matic

Home » Toolbox » Alt text decide-o-matic Writing alternate text for non-text content can be hard. This widget can help you decide which approach to take. Alt text decide-o-matic This application requires javascript. Please make sure javascript is enabled in your browser’s settings. About this This decision tree will help you understand how best to include text alternatives for image-based content. It is based on the W3C’s alt text decision tree. All errors are mine. Give feedback, tell me what’s broken, by leaving a comment here, or via Mastodon. Start now Does the image contain text? Yes No Next Please select either Yes or No, then click Next Is the text also present as real text nearby? Yes No Next Please select either Yes or No, then click Next Is the text only shown for visual effects? Yes No Next Please select either Yes or No, then click Next Does the text have a specific function, for example as an icon? Yes No Next Please select either Yes or No, then click Next Is the text in the image not present otherwise? Yes No Next Please select either Yes or No, then click Next Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn’t there? Yes No Next Please select either Yes or No, then click Next Does the image contribute meaning to the current page or context? Yes No Next Please select either Yes or No, then click Next Is the image a simple graphic or photograph? Yes No Next Please select either Yes or No, then click Next Is the image a a graph or complex piece of information? Yes No Next Please select either Yes or No, then click Next Does the image show content that is redundant to real text nearby? Yes No Next Please select either Yes or No, then click Next Is the image purely decorative or not intended for the user? Yes No Next Please select either Yes or No, then click Next ## Use alt=”” Use an empty alt attribute. See Decorative Images. Start over ## Communicate the function Use the alt attribute to communicate the function of the image. See Functional Images. Start over ## Include the text Use the alt attribute to include the text of the image. See Images of Text. Start over ## Communicate the destination of the link Use the alt attribute to communicate the destination of the link or action taken. See Functional Images. Start over ## Briefly describe the image Use a brief description of the image in a way that conveys that meaning in the alt attribute. See Informative Images. Start over ## Include the information elsewhere Include the information contained in the image elsewhere on the page. See Complex Images. Start over ## Use alt=”” Use an empty alt attribute. See (redundant) Functional Images. Start over 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 * How to create accessible Word documents * Good services scale

Home » Toolbox » Alt text decide-o-matic Writing alternate text for non-text content can be hard. This widget can help you decide which approach to take. Alt text decide-o-matic This application requires javascript. Please make sure javascript is enabled in your browser’s settings. About this This decision tree will help you understand how best to include text alternatives for image-based content. It is based on the W3C’s alt text decision tree. All errors are mine. Give feedback, tell me what’s broken, by leaving a comment here, or via Mastodon. Start now Does the image contain text? Yes No Next Please select either Yes or No, then click Next Is the text also present as real text nearby? Yes No Next Please select either Yes or No, then click Next Is the text only shown for visual effects? Yes No Next Please select either Yes or No, then click Next Does the text have a specific function, for example as an icon? Yes No Next Please select either Yes or No, then click Next Is the text in the image not present otherwise? Yes No Next Please select either Yes or No, then click Next Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn’t there? Yes No Next Please select either Yes or No, then click Next Does the image contribute meaning to the current page or context? Yes No Next Please select either Yes or No, then click Next Is the image a simple graphic or photograph? Yes No Next Please select either Yes or No, then click Next Is the image a a graph or complex piece of information? Yes No Next Please select either Yes or No, then click Next Does the image show content that is redundant to real text nearby? Yes No Next Please select either Yes or No, then click Next Is the image purely decorative or not intended for the user? Yes No Next Please select either Yes or No, then click Next ## Use alt=”” Use an empty alt attribute. See Decorative Images. Start over ## Communicate the function Use the alt attribute to communicate the function of the image. See Functional Images. Start over ## Include the text Use the alt attribute to include the text of the image. See Images of Text. Start over ## Communicate the destination of the link Use the alt attribute to communicate the destination of the link or action taken. See Functional Images. Start over ## Briefly describe the image Use a brief description of the image in a way that conveys that meaning in the alt attribute. See Informative Images. Start over ## Include the information elsewhere Include the information contained in the image elsewhere on the page. See Complex Images. Start over ## Use alt=”” Use an empty alt attribute. See (redundant) Functional Images. Start over 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 * How to create accessible Word documents * Good services scale

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

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

This is a service landscape map. Service landscape maps depict the different stages users go through when accessing a service as connected blobs, with the activities they do as circles within those blobs. It also captures who the external users are – the end users of the service and those who act in their support – the things users do to achieve their goals, the teams of people who deliver the service and are granted some power or authority within the system, and supporting organisations that also have a role to play in meeting user needs. Services rarely, if ever, exist in a void. They exist within a context. A landscape. Service landscape maps capture and illustrate that wider context and allow us to see the complexity at play, and to develop a better understanding of the user’s whole experience. […] https://design.scotentblog.co.uk/service-landscape-maps-seeing-the-bigger-picture/

This is a service landscape map. Service landscape maps depict the different stages users go through when accessing a service as connected blobs, with the activities they do as circles within those blobs. It also captures who the external users are – the end users of the service and those who act in their support – the things users do to achieve their goals, the teams of people who deliver the service and are granted some power or authority within the system, and supporting organisations that also have a role to play in meeting user needs. Services rarely, if ever, exist in a void. They exist within a context. A landscape. Service landscape maps capture and illustrate that wider context and allow us to see the complexity at play, and to develop a better understanding of the user’s whole experience. […] https://design.scotentblog.co.uk/service-landscape-maps-seeing-the-bigger-picture/

In my experience, service design is mostly about telling – and selling – stories. Telling the stories of people we’ve met through user research. Understanding what makes life difficult for them, and adjusting our approach to accommodate what they need. Telling these stories helps us make sure our UX designers and developers and content designers can update our services in ways that accommodate those needs. And mostly, that works out fine. But sometimes, we have to _sell_ a story. ## Selling a story When we _sell_ stories, we’re talking about the future. Where we want to be in 6-12-18 months. A possible future. That’s where storyboards are useful. ## Storyboards A storyboard looks like this. Storyboards illustrate a story and bring it to life for stakeholders. There are 6 frames in this storyboard: 1. Account Manager at meeting with client 2. Account Manager walks back to car 3. Account Manager dictates note of meeting into their phone 4. Back in the office, all the information is already in the CRM system 5. Account Manager shares meeting note with client 6. Account Manager shares notes with account team Storyboards are a common artefact in film and TV production. When I worked as a copywriter in advertising, I would collaborate with the art director to produce them for TV commercials. They were a simple visual guide to what the finished broadcast should look, and feel like, to go along with the screenplay – which is the detailed instruction, if you like. ## Our work is all in the gaps This storyboard says nothing about us in the digital teams at Scottish Enterprise. We’re not in this picture. That’s deliberate. We shouldn’t be. We’re the folks who clear the runway, who surface the roads. Digital should be invisible to the people who use it. It’s a utility now. Get used to it. Our job now is to take this imagined future and make it real. And that’s all in the gaps between those frames. * How do we transcribe audio (in a Scottish accent!) into accurate text transcription ? * How do we associate that with a particular meeting with a particular person at a particular client on a particular date at a particular location at a particular time? * Where does that information go? * Who gets to see it? * How do we ensure the information we gather is accurate? * How do we make sure it get to the right people, and only those who need to know? Guess we have work to do. 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 * Good services scale * Accessibility - Sharing knowledge between organisations * 10 things that businesses consistently tell us * How to create accessible Word documents