Alternative Text – What Is It, How Can It Be Done Better and…

By KriegKinder

There is a saying made famous by Henrik Ibsen…that “a picture is worth a thousand words” and it is widely accepted as meaning that complex and perhaps multiple ideas can be conveyed by a single still image, which conveys its meaning and/or the essence more effectively than a mere voiced description.  

Now, close your eyes and look at any picture – what meaning does it convey? Nothing! What meaning does the voice of a screen reader with no alternative text to report convey? Not much, except frustration if you use a screen reader.  If you cannot see an image, alternative text matters immensely and this is where Ibsen should be turned on his head because a thousand words are more than enough to describe an image or a concept being portrayed by an image.

Alt Text is an abbreviation of the term alternative text – quite appropriate when it is a succinct written description of an image that cannot be seen or displayed.  For the remainder of this blog we will call alternative text – alt text.

Alt text is a snippet of HTML code that a screen reader uses to describe an image on a webpage, it should serve the same purpose and convey the same essential information as the image it is representing [ W3C. G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content; 11 December 2008 [Retrieved 4 April 2010] ]

It could be argued that in recent times not many people have been aware of the true importance of alt text.  However, times are changing and organisations like the World Wide Web Consortium (W3C) and the Web Accessibility Guidelines (WCAG) 2.2 have described several guidelines to ensure that alt text is written consistently and with meaning so that screen reader users can experience rich and meaningful interactions with web pages.  

Alt text displays when an image fails to load and it is used by search engines to measure relevance when ranking web pages.  Alt text assists search engine optimisation [SEO] by allowing the search engine to better understand what your images relate to and therefore what your website is about.  This in turn helps increase chances of your images appearing in image search results.

According to HubSpot good alt text for images can turn your images into hyperlinked search results that appear in Google Images or as Image Packs [special results displayed in a horizontal row of image links] and this provides yet another way to drive traffic to your site. 

I first learnt about alt text several years ago during one of my early computer science assignments. I dutifully ticked the boxes to get the marks, but the importance of alt text was never clearly communicated, and I like multitudes of others never realized why it was so important and therefore promptly forgot about the value and simplicity of writing alt text. That is until I was asked recently to review some training presentations that we work with – the required remediation work was time consuming because we had not followed some basic rules in dealing with alt text.

The heuristics I now use for dealing with alt text are…

1. Ensure all informative non-text content (for anything) has alt text.  Aim to ensure all images, photos, logos and graphs have relevant and contextually correct alt text.
2. For images or photos that are purely there for looks don’t add alt text; tell the screen reader to ignore this image by using the code snippet <alt=””> (also described as null text)
3. The same image can be described differently in a different context; so I consider the audience and the message I am trying to convey by using a particular image – in many cases I just have to tailor any existing alt text.
4. I use my words to paint the picture for the user – I am as specific as I can be about both the subject and the image
5. When writing alt text, I put the most important stuff (my descriptive words about the subject and context) at the start
6. I try to be as brief as possible – many screen readers will stop reading after 125 characters 
7. I don’t start my alt text with… “photo of…” or “image of…” I use my words to paint the picture – the screen reader already announces that this is an image
8. I ask myself if alt text is really required? Especially if the non-text item has a meaningful and contextually correct caption.  I try not to paraphrase the caption with my alt text.  
9. If you are writing alt text for a logo or linked image, make sure you include the correct link to get there
10. I do not rely on automatically generated alt text, the algorithms in use cannot always generate meaningful alt text, they cannot understand any context and lack the human touch.  I always check alt text especially when using stock images because of these limitations
11. Build a good [business] process for naming all images in your collection – every image tagged for future use should be named and have alt text added before uploading to your image collection (I have yet to achieve this)
12. I consider the use of the tag “longdesc=”” which allows me to use longer descriptions for more complex representations if required (to date I have not had to do this)
13. I make sure that I am familiar with how to add/edit alt text in the CMS I interact with
14. I always include alt text for images in Word, Excel and PowerPoint documents

Follow these widely published heuristics for working with and producing alt text and you will be applying acknowledged industry best practice.  However, more importantly you will open the door to a richer and more informative experience for a significant number of users who utilise assistive technology to access webpages.

For me the real disappointment about how our industry works with alt text is that it should just be so damn easy to do well; yet as an industry we choose not to make the effort of ensuring that our non-text content is appropriately labelled, archived and managed and in doing so we exclude so many of our potential users.  This was highlighted to me during a recent task of reviewing training presentations – more often than not our images used had no alt text and if alt text was present, it was out of context, badly written or auto generated and therefore wildly inaccurate. 

Alt text is something that we as an industry should all do better because it is inherently simple to do and now more than ever, I believe there is no excuse for alt text not to be done well, it just takes a little effort…

Thanks for your time, keep an eye out for my thoughts on accessibility overlays which is coming soon.