Good alt text – a step-by-step guide for writers and designers
There's a lot of doomsaying about the future of digital accessibility at the moment, which is odd when you consider that we haven't yet made full use of the tools available to us today. That's why this post focuses on one of my favourite things about the web: the humble "alt" attribute , which has been around for over three decades . Writing alt text was my introduction to digital accessibility.
I’ve tried to create a complete practical reference here, aimed at content designers and writers. I’ve tried to make it task-focused, because there are subjective, empathetic questions a content designer needs to answer whenever they use alt text. The best way to hone your ability to handle these decisions is to learn by doing.
Caveat: I realise publishing a guide like this as a LinkedIn article is ironic, since LinkedIn articles aren't great for accessibility. My goal is to create a blog (making it as accessible as I can) and re-publish my LinkedIn articles on the open web. I haven't had time to set this up yet, I had an incredibly fun and frustrating (funstrating?) weekend trying to get a local Wordpress environment running on my Mac, so for now it's all going on LinkedIn.
But first: what is alt text?
Jargony: It's the text specified by the "alt" attribute of an HTML <img> element.
Jargon-free: it's informational text that’s assigned to every image on your website, to help users interpret those images when they can't be accessed for whatever reason (eg the user has a visual disability, the file fails to load, etc).
Which brings us to rule number one: Alt text is content, not metadata. You should write it as if it will be apparent to every user of your site, rather than assume it will be concealed. And you should never repurpose it for SEO, unless you'd be happy to also splash all those keywords across your content as visible text (and if you would do that, congratulations, you are officially terrible at running a website).
How to write good alt text
Step 1: Ask yourself what value the image is adding. Removing it is always an option. The most immediate way to make a website more usable is to cut superfluous content.
领英推荐
Step 2: If the image is adding value, ask yourself if this is:
Step 3: For informative images - write alt text that succinctly conveys or summarises the information (eg, you might summarise a line graph with: "In 2023, for the first time, the number of silly statements about AI surpassed the number of silly statements about blockchains"). Remember that you should only add alt text if the information is not presented in text anywhere else on the page (eg in a caption) - if it is, then the image is decorative and you should go to step 5.
Step 4: For functional images - write alt text that informs the user about the function. If the image is a link, specify the destination. If the image is an icon, maybe indicating that a link will open in a new tab, specify what the icon means in the alt text.
Step 5: For decorative images - you don't need alt text. Note: although decorative images don't need alt text, they still need alt attributes. These should be left blank, like so: (alt=""), to ensure screen readers know to skip over them. This might seem counter-intuitive, as if you're depriving users with visual disabilities. After all, if you've got a lovely picture of a puppy on a cloud to illustrate your article about cloud-based puppies, surely everyone deserves a share of the cuteness? Except the grumpy pedant says no: by reducing the amount of time a user needs to spend listening to lengthy image descriptions being incanted by a screen reader, you're doing them a favour and keeping their experience focused on what really matters to them. I like to think of decorative images as an accessibility feature for users without visual disabilities. These users (for example: me) take for granted their ability to read visually, so they need the occasional pretty picture to keep their short little attention spans engaged.
Step 6: Write your alt text. This should always be as short as possible. It should also be informative rather than descriptive - aim to tell people what is in the image, not how it is presented. For example: "a police officer walking a dog" is better than "a police officer in a navy blue uniform looking serious as she walks a Golden Retriever across a field of daisies on a sunny day".
Step 7: Still can't decide what to do? When in doubt, go with whatever will take up less time for any user who needs the alt text.
Even better if: building your site to handle alt text well
If you're able to make code changes to your website or persuade/harass/bribe a dev to make them for you, it pays to set up your content management system such that:
Head of Marketing and Events at Inclusive Employers
7 个月Lovely article Jeremiah M. I always teach that your alt tags also need to use inclusive language. Bias can easily creep in, in some descriptions, and important information that could add emphasis to the article is cruital too. I.e are we misgenedering individuals. Are we offering up information to help representation of margalised people, groups and topics. I.e if we said a group of people are smiling at the camera. What and who are we talking about ??.
UX Writer (Content Designer), Teacher, Mother, and Runner, - Living Life Purposefully
7 个月Funstrating ??.
Comms coach & consultant for health and care orgs | Strategic comms | Stakeholder engagement | Clarifying your ideas - for impact
7 个月Really interesting Jeremiah, thank you. So on social media, where people are often recommended to include pictures of themselves for the algorithm, is that "decorative" or is the facial expression etc informative? I find it interesting as it provides context but if you're recommending we don't include details such as 'looking serious' then saying simply 'picture of a man with a beard' would not seem to add anything of much value to the reader. So should we not add any alt text to a pic like that? Really appreciate your insights ??
Content designer | Content editor
7 个月I'm interested in your idea that users without visual disabilities need pictures to maintain their attention. I often get requests to 'add in some pictures to break up the text', but I've never seen any evidence that this helps users focus on what they're reading. In fact, in user tests, decorative images often frustrate users because they get in the way of the useful information they're trying to read or find. Decorative images can influence how people feel about what they're reading, which I think is their main value. I like the idea of making alt attributes mandatory. From experience, though, this doesn't prevent CMS editors from entering worthless or poorly thought out alt text. As you say, alt text is content so it should be assigned as much importance as the rest of the page text.