What is an image worth?
“A picture is worth a thousand words” – Napoleon. Or maybe a Japanese proverb. Or even coined by members of the press. The origin isn’t important (most people say Napoleon), the quote is. What if you can’t see the image and you rely on Screen Readers? Let’s explore as we dive into I in the A to Z of Accessibility – Images.
Images are powerful tools when used wisely. They can convey not just information but emotion and example. Describing something is a pale imitation of seeing the real thing. Isn’t it? Sometimes words describing something can stir the soul more than the picture itself. A description can also provide clarity when an image doesn’t scream of why it exists.
This topic is relevant to Power Apps, Power BI, Power Pages, Power Virtual Agents, and the Office suite of products. It is also REALLY relevant to Social Media posts!
The Alternative World
Screen readers can read text objects but how do you read a picture? It’s a block of data that is just surrounded by an image tag. At the end of the day, we all have different ways of describing things and what I may think is important may not be what you intended the image to convey. Even with the rapid advancements in AI technology there’s still elements of interpretation and nuance.
This is where Alt-Text comes into the equation. It’s been around for a long time but the true value of it comes into play with screen readers.
Alt-Text allows you to provide some descriptive text that a screen reader can process and read out to anyone using one. This is essential and can be really powerful.
Anywhere you have images that are part of putting across your message, telling your story, or presenting information you should have Alt-Text. However, there are some traps to be aware of.
TMI – Too Much Information!
We probably all know that one person who, when asked a simple question, will answer with a thousand words. Or that person who will over-share to the chagrin of everyone around. I know it’s been said about me on many an occasion. Maybe you are that person, in which case this is definitely for you!
When writing Alt-Text it is easy to go one extreme or the other in the amount of information we provide. Putting “A person smiling” might do the job but maybe there is more context that would help the listener to understand the image more. “A black female aged approximately between 20 and 25 who is 5 foot 7 inches tall wearing a long-sleeved top that has a blue and yellow diamond pattern accompanied by a set of leggings featuring characters from the cartoon Transformers…” you get the idea – TMI.
There is a balance that is needed, and it can be a challenge to work out what is best.
Writing good Alt-Text for your Images
So, what’s the art of writing good alt-text?
The biggest key is to convey what you want message you are trying to send with the image. Why have you included that image, what does the image show that backs that up? Express that in a descriptive, but concise, manner.
The charts you are showing in Power BI, call out the main key points. That infographic? Don’t go nuts but ensure that all the key points are included in the main body of the article or page and just emphasise the headline facts in the alt-text.
That icon in your shiny canvas app – what is it? Why is it there? People don’t need to know that it’s a “Purple image of a 3.5-inch floppy disk that is being used to show the save button”. Instead, they may need to know “Save button” or “Save icon”. Other times that icon may be conveying key information and therefore it is appropriate to say, “A red warning exclamation point”.
Oh, one other thing, if an image is there just to look pretty? Don’t put any text in, mark it as decorative. Screen reader users don’t need to know that your portal page has a green stripe down the side and a random image of a rose halfway down the page.
Good social practice
Inspirational quotes, statements from important people, or just pictures with comments on them. It’s really common to scroll down social media (LinkedIn and Twi..X for example) and find plenty of these in your feeds. What you may not realise is that the majority of these do not contain alt-text in them. This means that anyone using a screen reader has no idea what CEO Y is saying, or what the latest statement from celebrity B is talking about.
There is a really good plugin for Chrome based browsers called “Visual Alt Text”. You can find it on the Chrome Extension store by clicking this link to go there. This plugin shows alt text in social media platforms, or a plain red bar where none exists and highlights the extent of this issue quite nicely.
Please, when using images of any kind on social media – make use of Alt-Text! Don’t leave behind those followers who use assistive technology. Oh, and whatever you do please do not abuse Alt-Text for gimmicky trends and pointless marketing.
The Alternative Alternative Text
There is another way that people provide details about images, and some assistive technology users prefer this method. Instead of putting in Alt-Text they put “Image Description: <description text>” or similar either in the post or in the first comment/reply.
Some people do both Alt-Text and this descriptive text method but that just adds noise for screen reader users as they hear the same thing twice.
Where this method does have immense value is when using schedulers to post things on social media as they often don’t allow you to add alt-text to images. Using this method still ensures that you are covering your assistive technology followers and can still use all those shiny marketing tools as well.
Whatever you do though…
Know your audience – get them involved!
I’ll keep banging this drum but “not about us without us”.
If you want to learn how to write Alt-Text that works, find a screen-reader user, and ask them. Even better, ask a group of people who use different screen-readers or even other output devices. Maybe you have someone who gets their display relayed to them on a braille display. If you do then you really need to include them!
Should you nott have a network of people, then see if there is a disability group within your company and engage with them. If there isn’t one, or your company doesn’t do “networks”, then build your own and reach out.
Thanks for reading A to Z a11y – Images
Thank you for reading Images. This post is part of my [A to Z a11y] series the “A to Z Accessibility: Power Platform Edition”. Click here to go to the introduction article where I keep a Table of Contents, or simply check out the Accessibility section of the website from the top menu or by going directly to the category page here.
Content in this series is © Mike Hartley. I am happy for folks to quote or reuse snippets (with attribution) but this has taken a lot of work to compile so please do not copy whole sections. If there are any corrections or suggestions, then please use my social links to contact me. I am always happy to add additional content and remarks with full credit given. Likewise, these pages will evolve as my learning and understanding grows, so make sure to keep this bookmarked