Alt-text guide from a visually impaired web developer
This article contains everything you need to know about alt-text! When to use them and how to perfectly prepare them. I prepared, Daniel, a partially lost vision web developer who uses a screen reader every day.
When surfing the web, I use a combination of screen magnifier and screen reader . As practice shows, the increase in the screen is more convenient on large displays, and the screen reader is on smaller devices.
Like everyone else, I come across a large number of images on the Internet. When using a screen reader, I depend on the text description of the pictures - alt-text - which is pronounced out loud.
')
Often, alt-text does not help, often it is just a waste of time, because it conveys no meaning.
I will illustrate with the example of The Verge main page . Here's what she looks like for the sighted:
And below what I see. I replaced the pictures with the text that my screen reader reads:
Not very helpful, right?
Here are the most common alt-text errors that I encounter:
Alt-text attributes are not always so bad, but there is almost always a way to improve them. So whether you are an absolute beginner or want to transfer your "game" to a new level, here is the complete guide to alt-text!
Alt-text is a description of the image that is shown to people who for some reason cannot see the picture. Among other things, alt-text helps:
The first group - people with visual impairments and blind people - are probably the ones most in need of an alt-text description. To navigate the web, they use a screen reader. This program converts graphic information on the screen into text or braille. To do this as accurately as possible, the pictures on your site should have alt-text text descriptions.
They are very important! So important that in the Web Content Accessibility Guidelines (WCAG) rules they are listed on the very first item :
In HTML, alt-text is an attribute of the img element:
Most content management systems (CMS), like WordPress, allow you to type alt-text when loading an image:
The corresponding field is usually called “Alt-text”, “Alternative text” or “Alt”, but in some interfaces it is referred to as “Image Description” or something like that.
Here are the steps to create stunning text attributes.
This may seem obvious, but alt-text should describe the image. For example:
"A group of people at the railway station"
"A happy child playing in the sandbox"
"The queue of five people in the supermarket"
What should not be included in the description:
How to describe an image depends on the context. Let me give you an example:
If this image were in an article on a photo, then the alt-text might sound like this:
“A black-and-white photo of a close-up of a man in the street, a face in focus, the background is blurred.”
If the image is on the site about the television series, then the corresponding alt-text may be completely different:
"Star of the series Adam Lee stares hard through the rain."
So write the most meaningful alt-text for users in the context in which they are located.
Reading the previous section, you might think: “I, as a sighted person, see a lot of details in the picture, like the one who is depicted there, how the picture was taken, the type of jacket, the approximate age of the man, and so on. Why not make a detailed, long description, so that a visually impaired user will get as much information as I do? ”
Glad you asked!
To be honest, you can get all the necessary information about the image with one glance - this is the effect we are trying to achieve for users with screen readers. Give the necessary information in the description of alt-text, but make it as concise and accurate as possible.
One of several cases where a long alt-text is appropriate is if you are describing an image with important text. Ideally, you should not have images with text, but sometimes you have to use them. For example, as in the screenshots or photographs of the signs.
But the general rule is to keep it concise and avoid verbosity.
Do not start the alt-text with the words "Image ...", "Photo ..." and the like. The screen reader adds this by default. So if you write “Image ...” in alt-text, then the screen reader will read “Image image ...” when the user focuses on it. Not very nice.
The only thing you can do is finish the alt-text with a message that this is a special kind of image, for example, an illustration.
“The dog jumps through the hoop. Illustration".
End alt-text with a dot. This will allow the screener to make a short pause after the last word alt-text, which sounds more pleasant.
Many interfaces have a field for adding the title-text attribute to the image tag next to alt-text. No need to use it! No one uses them - they do not work on touchscreens, and are displayed on desktops if the user hovers over the image and briefly holds it there, which no one does. In addition, the addition of title-text causes some screen readers to read both title-text and alt-text, which is redundant. So just do not add title-text.
In most cases, you need to provide images with the description of alt-text, but there are some exceptions, when it is better to leave this attribute empty. Important note: never remove the alt attribute, because it violates the html standard. But you can leave it empty, like this:
Imagine that you are viewing a feed on Twitter. Every time you want to read a new tweet, you first need to listen to the "Image from the user profile <username>". In my opinion, it will be very annoying!
Other feed examples:
So for maximum user convenience, leave the alt-text field blank for images that are repeated in the feeds.
Next to the icons should always be a text description. If so, then the icon should not have alt-text. Let me explain!
As an example, look at the social networking buttons:
If you specify the text in the alt-text attribute for the Facebook icon, the screen reader will say something like “Facebook Facebook”. Very redundant!
Okay, technically it doesn’t concern alt-text, but it’s still important: make sure that the icon and the link text have the same link attribute, for greater user convenience. Like that:
Another common mistake is the icons on the menu buttons:
If there is no text on the menu button - which, in my opinion, is very inconvenient for users - then add alt-text to it (or, alternatively, describe its functionality in the code itself, like aria-label). Explain the function of the icon, for example, “Menu”. Do not write "Three horizontal lines" or "Main hamburger" - unfortunately, these are real examples that I met.
If there is an inscription on the menu icon, then the alt-text field should be left blank. I often come across menu buttons that sound like “Menu Menus”. Once I even came across the “Hamburger Menu Menu.” A bit confusing, don't you think?
Typically, an image with a link is accompanied by a text link. As in this example:
In this case, the image and the link must have the same link tag in HTML. The alt-text field can be left blank. It is important for the user to hear the text on the link. Description alt-text for the image will only distract by adding unnecessary information. Most likely, this image will be in the article by reference, and there you can already give a good description in the alt-text.
If you really, really need to put an image in the link without accompanying text, then the alt-text should describe where the link leads, not the image itself.
Whenever possible, non-meaningful decorative images are best published as background images in CSS. Probably, it goes without saying that they don’t need alt-text at all.
I would classify as decorative most of the images that you insert into the text. There is no need for alt-text. For example, the picture on the main page of Netflix:
Logos in banners almost always refer to the main pages of websites. Regarding the alt-text attribute in the logo, opinions are slightly different.
Some say that there should indicate the name of the company, the fact that it is a logo, and the direction of the link. For example:
"Axess Lab, logo, link to the main page".
In my opinion, this is a little wordy. Too much noise! Since my screen reader has already said that this is a picture with a link, it seems to me that the name of the company is enough. From the fact that this is a picture, I will assume that this is the logo, and from the fact that this is a link, I will assume that it follows the conventions and leads to the home page.
Scalable Vector Graphics (SVG) is an image format that is becoming increasingly popular on the Internet. And I like him! Such images remain sharp when scaled, take up less space and load faster.
There are two main ways to add SVG to an HTML page.
In fact, in the second case, you should be able to add alt-text as the title element in svg, but this method is not yet sufficiently supported by browsers and assistive technologies.
Although machine learning and artificial intelligence are rapidly improving and can fairly accurately describe some of the images as long as they are not good enough in understanding the relevant context. In addition, machines do not understand the meaning of “brevity” well enough and often use too many or too few words.
In reality, Facebook has developed a feature for automatically describing images. But such descriptions seem too general to me. Right now, one image in my feed is described as “The Cat in the Room”. In reality, the cat is hunting a toy mouse on the photo.
So sorry, you still have to write the alt-text attributes yourself!
I am glad that you have read this far! So you care about making the web a better place for everyone. Spread the knowledge and continue to be such good people!
My experience with web pictures
When surfing the web, I use a combination of screen magnifier and screen reader . As practice shows, the increase in the screen is more convenient on large displays, and the screen reader is on smaller devices.
Like everyone else, I come across a large number of images on the Internet. When using a screen reader, I depend on the text description of the pictures - alt-text - which is pronounced out loud.
')
Often, alt-text does not help, often it is just a waste of time, because it conveys no meaning.
I will illustrate with the example of The Verge main page . Here's what she looks like for the sighted:
And below what I see. I replaced the pictures with the text that my screen reader reads:
Not very helpful, right?
Here are the most common alt-text errors that I encounter:
- “Cropped_img32_900px.png” or “1521591232.jpg” are the names of the files, probably because the image does not have an alt attribute.
- “<Article title>” - on each image of the article, probably to improve search engine ranking (SEO).
- “Photographer: Emma Lee” - probably because the editor doesn’t know what alt-text is for.
Alt-text attributes are not always so bad, but there is almost always a way to improve them. So whether you are an absolute beginner or want to transfer your "game" to a new level, here is the complete guide to alt-text!
What is alt-text
Alt-text is a description of the image that is shown to people who for some reason cannot see the picture. Among other things, alt-text helps:
- visually impaired or blind
- those who turned off the display of images to save traffic
- search engines
The first group - people with visual impairments and blind people - are probably the ones most in need of an alt-text description. To navigate the web, they use a screen reader. This program converts graphic information on the screen into text or braille. To do this as accurately as possible, the pictures on your site should have alt-text text descriptions.
They are very important! So important that in the Web Content Accessibility Guidelines (WCAG) rules they are listed on the very first item :
Any non-textual content that is shown to the user must have a textual alternative that serves an equivalent purpose.
- WCAG rule 1.1.1
How to add alt-text?
In HTML, alt-text is an attribute of the img element:
<img src="dog.png" alt="Dog playing in meadow." /> Most content management systems (CMS), like WordPress, allow you to type alt-text when loading an image:
The corresponding field is usually called “Alt-text”, “Alternative text” or “Alt”, but in some interfaces it is referred to as “Image Description” or something like that.
Create the perfect alt-text!
Here are the steps to create stunning text attributes.
Describe the image
This may seem obvious, but alt-text should describe the image. For example:
"A group of people at the railway station"
"A happy child playing in the sandbox"
"The queue of five people in the supermarket"
What should not be included in the description:
- The name of the photographer. This is common, but absolutely pointless.
- Keywords for search engine optimization. Do not litter the alt-text with irrelevant words that you are trying to use with Google search results. The alt-text attributes are not meant for this and it will mislead your users.
The content of the alt-text depends on the context.
How to describe an image depends on the context. Let me give you an example:
If this image were in an article on a photo, then the alt-text might sound like this:
“A black-and-white photo of a close-up of a man in the street, a face in focus, the background is blurred.”
If the image is on the site about the television series, then the corresponding alt-text may be completely different:
"Star of the series Adam Lee stares hard through the rain."
So write the most meaningful alt-text for users in the context in which they are located.
Be concise
Reading the previous section, you might think: “I, as a sighted person, see a lot of details in the picture, like the one who is depicted there, how the picture was taken, the type of jacket, the approximate age of the man, and so on. Why not make a detailed, long description, so that a visually impaired user will get as much information as I do? ”
Glad you asked!
To be honest, you can get all the necessary information about the image with one glance - this is the effect we are trying to achieve for users with screen readers. Give the necessary information in the description of alt-text, but make it as concise and accurate as possible.
One of several cases where a long alt-text is appropriate is if you are describing an image with important text. Ideally, you should not have images with text, but sometimes you have to use them. For example, as in the screenshots or photographs of the signs.
But the general rule is to keep it concise and avoid verbosity.
Do not say this image
Do not start the alt-text with the words "Image ...", "Photo ..." and the like. The screen reader adds this by default. So if you write “Image ...” in alt-text, then the screen reader will read “Image image ...” when the user focuses on it. Not very nice.
The only thing you can do is finish the alt-text with a message that this is a special kind of image, for example, an illustration.
“The dog jumps through the hoop. Illustration".
Completion point.
End alt-text with a dot. This will allow the screener to make a short pause after the last word alt-text, which sounds more pleasant.
Do not use the title attribute
Many interfaces have a field for adding the title-text attribute to the image tag next to alt-text. No need to use it! No one uses them - they do not work on touchscreens, and are displayed on desktops if the user hovers over the image and briefly holds it there, which no one does. In addition, the addition of title-text causes some screen readers to read both title-text and alt-text, which is redundant. So just do not add title-text.
When not to use alt-text
In most cases, you need to provide images with the description of alt-text, but there are some exceptions, when it is better to leave this attribute empty. Important note: never remove the alt attribute, because it violates the html standard. But you can leave it empty, like this:
alt=”” . Do this in the following cases.Feed duplicate images
Imagine that you are viewing a feed on Twitter. Every time you want to read a new tweet, you first need to listen to the "Image from the user profile <username>". In my opinion, it will be very annoying!
Other feed examples:
- List of links to articles. About how on our " Articles " page.
- Chat feeds or instant messengers
- Comment feeds
So for maximum user convenience, leave the alt-text field blank for images that are repeated in the feeds.
Text Icons
Next to the icons should always be a text description. If so, then the icon should not have alt-text. Let me explain!
As an example, look at the social networking buttons:
If you specify the text in the alt-text attribute for the Facebook icon, the screen reader will say something like “Facebook Facebook”. Very redundant!
Okay, technically it doesn’t concern alt-text, but it’s still important: make sure that the icon and the link text have the same link attribute, for greater user convenience. Like that:
<a href="..."> <img src="fb_icon.png" alt="" /> Facebook </a> Another common mistake is the icons on the menu buttons:
If there is no text on the menu button - which, in my opinion, is very inconvenient for users - then add alt-text to it (or, alternatively, describe its functionality in the code itself, like aria-label). Explain the function of the icon, for example, “Menu”. Do not write "Three horizontal lines" or "Main hamburger" - unfortunately, these are real examples that I met.
If there is an inscription on the menu icon, then the alt-text field should be left blank. I often come across menu buttons that sound like “Menu Menus”. Once I even came across the “Hamburger Menu Menu.” A bit confusing, don't you think?
Images in links
Typically, an image with a link is accompanied by a text link. As in this example:
In this case, the image and the link must have the same link tag in HTML. The alt-text field can be left blank. It is important for the user to hear the text on the link. Description alt-text for the image will only distract by adding unnecessary information. Most likely, this image will be in the article by reference, and there you can already give a good description in the alt-text.
If you really, really need to put an image in the link without accompanying text, then the alt-text should describe where the link leads, not the image itself.
Decorative images
Whenever possible, non-meaningful decorative images are best published as background images in CSS. Probably, it goes without saying that they don’t need alt-text at all.
I would classify as decorative most of the images that you insert into the text. There is no need for alt-text. For example, the picture on the main page of Netflix:
Special cases
Logos in the banner
Logos in banners almost always refer to the main pages of websites. Regarding the alt-text attribute in the logo, opinions are slightly different.
Some say that there should indicate the name of the company, the fact that it is a logo, and the direction of the link. For example:
"Axess Lab, logo, link to the main page".
In my opinion, this is a little wordy. Too much noise! Since my screen reader has already said that this is a picture with a link, it seems to me that the name of the company is enough. From the fact that this is a picture, I will assume that this is the logo, and from the fact that this is a link, I will assume that it follows the conventions and leads to the home page.
Svg
Scalable Vector Graphics (SVG) is an image format that is becoming increasingly popular on the Internet. And I like him! Such images remain sharp when scaled, take up less space and load faster.
There are two main ways to add SVG to an HTML page.
- Inside the img element. In this case, simply add alt-text as usual:
<img src="dog.svg" alt="Dog rolling on gras." /> - Using the svg tag. You cannot use the alt attribute here, because it is not supported. However, you can get around this with the two wai-aria attributes:
role=”img”andaria-label=”<alt-text>”.
In fact, in the second case, you should be able to add alt-text as the title element in svg, but this method is not yet sufficiently supported by browsers and assistive technologies.
Can't the computer do it for me?
Although machine learning and artificial intelligence are rapidly improving and can fairly accurately describe some of the images as long as they are not good enough in understanding the relevant context. In addition, machines do not understand the meaning of “brevity” well enough and often use too many or too few words.
In reality, Facebook has developed a feature for automatically describing images. But such descriptions seem too general to me. Right now, one image in my feed is described as “The Cat in the Room”. In reality, the cat is hunting a toy mouse on the photo.
So sorry, you still have to write the alt-text attributes yourself!
Thanks for making the web better!
I am glad that you have read this far! So you care about making the web a better place for everyone. Spread the knowledge and continue to be such good people!
Source: https://habr.com/ru/post/341810/
All Articles