One of the most important attributes of image optimization on a page is the alt tag (or tag alt ). Adding images to your publications encourages people to read them and, if chosen well, helps you rank well in your image search results.
Index
SEO (Search Engine Optimization) is the practice of optimizing pages to achieve better positioning in search results. In addition to ranking your images in the search for images, you want to rank your pages better in search engines. For this the tag alt it is also important.
THE alt tag aims to provide search engines with the necessary information to “explain” what the image is about, giving context to the user.
What are alt and title attributes?
The attributes alt and title of an image are commonly called an alt tag and title tag. Technically they are not tags, are attributes.
The attribute alt describes what is in the image and its function on the page. It is used by screen readers (screen readers), which are browsers used by blind or visually impaired people. These screen readers tell you what's in the image by reading the tag alt.
The attribute title in turn is shown as a “tip” when the mouse is hovered over the element. It can be important at times, as a kind of image caption or to give the user some instruction. From an SEO point of view, let's say it is “expendable”.
Each image must have an attribute alt. Not only for SEO purposes, but also because the blind and visually impaired will not otherwise know what the image is about.
Read too: "Content SEO: content optimization for searches“
The attribute title it is expendable, as I said earlier. If the information transmitted by the attribute title is relevant, consider making it available elsewhere, in plain text, and, if not relevant, consider removing this attribute altogether.
See how to provide text alternatives (alt tag) appropriate based on the purpose of the image.
Purpose of the image
Informative images
Images that graphically represent concepts and information, typically images, photos and illustrations. THE alt tag must be at least a brief description, conveying the essential information presented by the image.
Decorative images
Provide a null text alternative (alt = "") when the sole purpose of an image is to add decoration visual to the page, instead of transmitting important information for the understanding of the page.
Functional images
The tag alt of an image used as a link or button should describe the functionality of the link or button, instead of the visual image. Examples of such images are a printer icon to represent the printing function or a button to submit a form.
Text images
Readable text is sometimes displayed within an image. If the image is not a logo, avoid text in images. However, if text images are used, The alt tag must contain the same words as in the image.
Complex images
Graphs and diagrams would often be used to transmit data or detailed information. Provide a full text equivalent to the data or information provided in the image as alt.
Image groups
If multiple images convey a single piece of information, the text alternative for an image should convey the information to the entire group.
Image Maps
THE alt tag for an image that contains multiple clickable areas should provide a general context for the set of links. Besides that, each individually clickable area must have alternate text describing the purpose or destination of the link.
For a quick look at how to decide which category a particular image fits into, see the decision tree for alt tag below. THE alt tag needs to be determined by the author, depending on the use, context and content of the image. For example, the type and exact appearance of a sunset in an image may be less relevant on a site about cities, but may be appropriate on a site that deals with paradisiacal beaches.
Why is alt tag important?
Leaving aside the SEO aspects, which we already know are very important, images and graphics make the content more pleasant and easier to understand. This is even more evident for people with visual, cognitive and learning disabilities. They serve as clues that are used to orient themselves in the content.
However, images are used extensively on websites and can create major barriers when they are not accessible. Affordable images are beneficial in many situations, such as:
- People using screen readers: a
alttag can be read aloud or rendered as Braille; - People using voice input software: users can focus on a button or linked image with a single voice command;
- People browsing speech-enabled sites: a
alttag can be read aloud; - Mobile internet users: images can be disabled, especially for data roaming;
- Search engine optimization: images become indexable by search engines.
Alt tag decision tree
This decision tree describes how to use the attribute alt of the element
1- Does the image contain text?
No:
Continue to question 2.
Yes:
… And the text is also present as nearby text.
Use an attribute alt empty. See decorative images.
… And the text is shown for visual purposes only.
Use an attribute alt empty. See decorative images.
… And the text has a specific function, for example, it is an icon.
Use the attribute alt to communicate the function of the image. View functional images.
… And the text in the image is not present otherwise.
Use the attribute alt to include the image text. View text images.
2- Is the image used in a link or button, and would it be difficult or impossible to understand what the link or button does, if the image was not there?
No:
Continue to question 3.
Yes:
Use the attribute alt to communicate the destination of the call or the action taken. View functional images.
3- Does the image contribute meaning to the current page or context?
No:
Continue to question 4.
Yes:
... and it is a simple graphic or photograph.
Use a brief description of the image in a way that conveys that meaning in the attribute alt. View informative images.
… And it is a complex chart or piece of information.
Include the information contained in the image elsewhere on the page. See complex images.
... and shows content that is redundant for the actual text nearby.
Use an attribute alt empty. View functional images.
4- Is the image purely decorative or not intended for the user?
No:
Continue to question 5.
Yes:
Use an attribute alt empty. See decorative images.
5- The use of the image is not listed above or it is not clear what text alt should be provided?
This decision tree does not cover all cases. For detailed information on the provision of alt tag, check the purpose of the image.
Conclusion
Each image must have a alt tag, with few exceptions.
The attribute title it is expendable under the SEO aspect but can contribute to the usability and user experience.
Identify the purpose of the image within the page to define what will be the alt tag used.
References:
- Web Accessibility Tutorials: An alt Decision Tree
- Web Accessibility Tutorials: Images Concepts
Keep reading: "Improving your technical SEO audit“