Image descriptions: a human technique that robots can’t grasp
The most famous of all Digital Accessibility Guidelines is Alt-text ( also known as alternative text, text alternative or image description). It is so renowned that there are people that think that Accessibility is just about alt-text. But this very first Web Content Accessibility guideline, out of 13 others, is also the most misunderstood.
Blind people will often use a Screen Reader to read all content aloud, including the description of images. ( If you want to find out more about Screen Readers, read my previous article, “Everyone Working on Digital Should Learn How to Use a Screen Reader”). Obviously, someone who is blind won’t know that there is an image on the webpage. But this is only important if the image on its own adds essential information. If it does, you must enter a concise description. If it doesn’t, such as in the case of decorative images, you don’t need to enter any description. This should be easy enough to grasp, but why do we keep getting it wrong?
Think about when you go to a website to find a new mobile phone or a contract with a better deal. Quite often, you will find atmospheric images to illustrate someone using a mobile. How much time do you spend paying attention to that image? I bet you might be very focused on getting your head around to understand all the different options, while reconciling what you want with what you can get with your budget. You will hardly remember the images, at least not at a conscious level.
As a sighted person, you can quickly scan the page and go straight to where you want. So, why do you think that a Blind person would be different and be interested in hearing their screen reader announcing something like: “Profile of a man talking on his mobile phone while sitting on a beach. He looks happy.” Like you, our Blind friend also wants to find the best mobile contract possible within a specific budget. That description of a purely decorative image is not adding anything to their experience. In fact, it is creating an inconvenience. It is delaying reaching their objective.
Now, let’s look at a different scenario. Let’s suppose you are booking your holidays online. You will be interested in seeing the pictures of the hotel rooms. The decoration might make them seem attractive, but before booking, you might want to find out how spacious, comfortable, clean and well located the room is. If those details are present on the text describing the rooms, you don’t need to add any alt-text to them. But remember, it all depends on the context. The same image might be decorative on one page and informative on another. The author is the best person to make that judgement.
But how does that magic happens? As a non-technical author, you might be entering the alt-description through a field on a Content Management System or another interface. It is worth looking at the HTML to understand alt-text and alt-attributes.
Don’t let a little bit of code scare you
It is surprising how many Web Designers and Content Authors don’t know about HTML. I don’t expect authors or designers to become coders, but understanding how the knots and bolts connect will help you go a long way in preventing issues from the very beginning.
Webpages are written in HTML (Hyper-text Markup Language). That’s the standard language that formats content that can be viewed by any browser and perceived by Assistive Technology. It is worth highlighting that Accessibility comes for free with well-formatted HTML. It is not a bonus feature or something thought of as special or extra.
HTML is the cornerstone of Web Documents. It determines the structure and meaning of every element through semantic markup. When you insert an image on a web page, the HTML for that image will contain information on the type of file, size in bytes, dimensions on the page, its source and alternative description contained within an alt attribute.
For clarity, alt attribute is different from alt-text. An alt attribute is an HTML element that contains the alt-text, which is read aloud by a screen reader. Every image must have an alt attribute. But not every image should have alt-text contained within it.
A few scenarios might happen depending on the presence of an alt attribute with or without alt-text:
- If there is an alt attribute with an alt-text, the screen reader will read that alt text aloud.
- If there is an empty alt-attribute, the screen reader will ignore it, as if it was not even there.
- If the alt attribute is missing, screen readers will read the whole file name.
To understand this better, let’s do an exercise. I will suggest that you use Chrome. Go to any website, right-click on an image and select “inspect” from the drop-down.
A code pane will open with the highlighted code for the image. Look at the alt attribute:
In the example from the Le Monde online newspaper, we have an image of a shot of Sean Penn’s new movie “Flag Day”, illustrating an article about the Cannes Cinema Festival. The chosen image is a scene of Sean Penn’s film with young woman walking in the middle of a wheat field. Notice how the alt text doesn’t describe the scene . It contains alt=”Jennifer Vogel (Dylan Penn) in <<Flag Day>> from and with Sean Penn”. It only mentions the name of the character, the actor playing it and the Director of the movie. That’s concise information and an example of good alt-text. In another context, the same image could have a purely decorative purpose. In such case, the alt attribute should be empty and look like alt=”” or alt. If the same image was used to describe the scene, the alt-text might sound something like “Jennifer walks through the wheat field while deeply absorbed in her own thoughts.”
Attention developers: Don’t ever remove empty alt attributes from webpages. When Screen Readers reach an empty alt attribute, they will ignore the image. That’s precisely what we want. But if there is no alt attribute, screen readers will read the entire file name, including the image source and name. This would be a hindrance for a Blind person and would impact the experience negatively.
Alt-text needs to be concise, but repetition can occur through other elements on the page. In the same example of the article in Le Monde, there is a caption with the text identical to the image alt-text. Although visual users perceive this captioned text, the developers hid it from Screen Readers by adding an aria-hidden=true. So, the captioned text is not read by a screen reader. Aria, which stands for Accessible Rich Internet Applications, should only be used when HTML can’t manage Accessibility alone. In the Le Monde we see an example of using aria well.
Now, let me give you a bad example. I won’t be showing screenshots to avoid exposing the site. But recently, I came across a page that had a picture of a star. It was purely decorative. The developer, probably with the best intentions in the world, removed the alt attribute and added aria-label=”5 points star-shaped graph” to it. As a result, our blind friend had to listen to the whole file name being read aloud with an additional “5 point star-shaped graph” text. How annoying! If the developer had checked how a screen reader would read that element on the page, there would be an opportunity to appreciate the experience of our blind friend and prevent from going live with a problem. It is not enough to use automated tools when testing for Accessibility. This brings us to another issue: The over-reliance on Automated Testing Tools.
Accessibility can’t be automated!
Automated Accessibility testing tools will show empty alt attributes as either an error or a warning. Developers and testers often ask me: Is there a way to override automated tools from showing empty alt text as a failure? The answer is no. Or at least, not as far as I know. Those tools can be helpful but they cannot be accepted as evidence of a page being Accessible, even if they give a 100% pass. That’s why it is crucial to understand how to interpret the results from automated tools while performing manual tests, including keyboard tabbing and listening to screen readers. Read my previous article, “Everyone Working on Digital Should Learn How to Use a Screen Reader”, to find out about simple, easy tests with screen readers that come factory-installed on your device or that are free to download.
Accessibility can’t be automated. For things to be automated, we depend on simple constant patterns. Accessibility requires thinking within multiple contexts and experiences. If you allow me to be philosophical, that’s the beauty of it.
When we produce a Web Page, we deal with a creative activity to communicate something to another Human being. As Humans, our lives would be very dull if we all behaved through the same unchangeable and straightforward patterns. Everyone, regardless of any disability, perceives, operates and understand web content differently. So, don’t obsess so much about getting a pass from automated tools. While they will tell you that empty alt attributes are an error, they will fail to identify many other issues. Focus on confirming the results with manual tests and the feedback of disabled users.
To finish, let’s summarise with a few bullet points.
If you are an Author:
- Follow best practices on Alt text.
- Think about the context before adding alt text: There are some very good online resources to help you decide if an image should have alt text or not. One such resource is Alt text decision tree. I also recommend using the beautiful Alt Text as Poetry initiative.
- Decorative images or images with captions don’t need alt text.
If you are a developer, make sure that:
- All images contain an alt attribute, regardless of having alt text of being empty.
- When in doubt if an image should have alt-text contained by its alt attribute, always check with the author. Web Accessibility is a team effort.
- Check how the page is read aloud by a screen reader and find clean ways to reduce repetition.
