Explains why the image is here
Alternative (Alt) Text is meant to convey the “why” of the image as it relates to the content of a document or webpage. Alt-text is a text that describes the content of images for the search engine. By working with good alt texts, the website’s SEO and user-friendliness are improved. And user-friendliness has over time become an increasingly important ranking factor.
Alt-text is an attribute of the HTML image tag. CMS platforms such as WordPress manage the code for the image tag itself. What you need to do yourself is to describe the image’s information in words and to determine whether an image carries relevant information at all.
The alt text is a text you put in the code on your website to describe what an image represents. To see if an image has an alt text, you can let the cursor stand still over an image. If the image has an alt text, the text will appear after a few seconds.
Why is Alt-text used?
Google’s search results yield almost as many image hits as text hits. It is therefore important that you add alt texts for all images on your website so that they are visible in both image search results and text results.
Alt texts are mainly used for the following three reasons:
- Support for the visually impaired
- Search engine optimization
- Technical solution
Support for the visually impaired
Those who have impaired vision and need to use a screen reader must also be able to understand images and graphic content. A software reads out what is on the screen in the form of headings, text, buttons and images. When a screen reader comes to an image, the Alt text of the image is read out so that people with impaired vision can more easily absorb the information on the website.
Alt-text for search engine optimization
Search engines are still bad at reading images. They use the alt texts to understand the images on the page and can thus index them better, which improves the website’s SEO. Search engines determine what is in the image based on the text information given in, among other things, the file name and Alt text. It thus becomes a way to clarify for the search engine what is in the image and create relevance in a text, i.e. improve SEO. In image searches, the Alt text carries extra weight.
The alt text is something that is usually called a direct ranking factor. This means that the words you choose to use in your alt text directly affect which searches Google chooses to display your page on in the search results, i.e. the Serp. Namely, Google reads the content of the alt text and includes it in the overall assessment of your page. Using strategically designed alt texts not only helps you appear in regular search results, but also helps your image appear higher in Google’s image search.
Remember that it is not only the alt text that affects position in image searches. In addition to this attribute, both image caption, context and the website’s overall SEO can affect how high it appears in image searches.
Technical solution
If, for some reason, the image cannot be displayed, the alt text will be presented instead. That is also where it got its name from. An alternative to the image. Thus, the visitor can at least see that an image was intended to be in a specific place and what the image represents.
Alt-text recommendations
Include your keywords
For search engine optimization, alt texts are important. Although your main focus should be on accessibility, it is important to remember that Google also indexes and “reads” your alt texts.
Therefore, remember to include the keyword on the page in the alt text if appropriate. So include the search term in a sentence that describes the image in its entirety. The text should still feel good to someone who doesn’t see the image. In the body text, you use your keyword sometimes to create a clear topic for the page. You can do the same in the alt texts.
Remember to work with synonyms and not stick too hard to one specific keyword.
However, be careful with the use of keywords. Do not include the keyword for more than 2/3 of the images you use on your site. Google can penalize your ranking if you engage in so-called keyword stuffing, i.e. if it is perceived that you are exaggerating the use of your keywords.
Same function as the image
An alt-text should, as far as possible, be an equivalent alternative to the image itself. It should therefore not primarily describe the image as such but fulfil the same function. Ask yourself if you delete the image, will any information be lost? If the answer is yes, the image must have an alternative text.
No alt-text at all
If the image has no purpose, it needs no alt text. In some cases, an image has only an aesthetic function on a website and does not add any function, the image is on the page only for decoration.
When the text is read with a browser, the alt text on these images is nothing but distracting, the alt text is just confusing. Omitting the attribute makes it easier for both Google and the image readers to handle the text.
However, all images must have alt text, either with text or empty. For an empty alt text, you write alt=”” in HTML. Write the word empty in the intended field if your CMS tool has a media library. Omitting alt text entirely causes problems because many browsers will instead read out the image’s URL.
Image contains text
Images may sometimes include text. If the image has a text content, its alt-text should say the same thing. Especially important to consider, for example, when graphs and figures are used to convey information that is not in the main text.
The text has a function
Enter the function in the Alt text. By clicking on the image, printing may take place or the visitor may be directed to a contact form. There is thus a clear difference between what the image shows and its function. A magnifying glass is usually used to display a Search function on a website. If it is possible to carry out an internal search by clicking on the magnifying glass, it should have “Search” as Alt text and thus not “Small magnifying glass with black handle”.
the image is a link
Explain where the link goes because this is relevant to the person (and Google) who doesn’t see the function of the image.
the image has a unique text
If the image has unique text, which is not presented in text form nearby, this text should be entered as Alt text. Start from the purpose of the image and the user’s needs.
When the image is displayed multiple time
If the image appears several times on the same page, only the attribute needs to be specified on the first occasion, provided that the image has no specific function.
General advices
- The alt text is dependent on the context and how the image is used on that particular page. The same image can therefore have different alt texts depending on the context.
- Do not embed the content in wording that does not tell what the image represents. Keep down the number of words like “picture represents”, “press the button”, etc. Screen readers tell their users what an image or a link is anyway, so the extra words just get annoying.
- If there is nothing meaningful to say about the picture, then don’t say anything about it. Images that have a purely decorative function often do well without alt text.
- All images must have alt text – either with text or blank. Omitting alt text causes problems because many screen readers will instead read out the URL of the image.
- Use hyphen characters between words instead of spaces in the file name. Write e.g. like this: “preferably-written-like-this.jpg”. Replace the Swedish å ä ö with the corresponding vowel without a sign above it.
- If the image is close to content that describes the content of the image, you should give it an empty alt tag to avoid redundancy, that is, the image information is read out twice.
- Be concise. Aim to write no longer than 80 – 120 characters and certainly no more than 150 characters. There is no strict rule for how many characters the attribute can be. Keep it short and concise as the image should only be an element of the text, not replace the text.
- Since the alt text is read aloud with other text, it should have normal punctuation.
- Select the level of detail on the text based on the users’ needs, different users may need different alt texts.
- Avoid repetitions by auditioning the page.
Where to enter the Alt-text
CSS (Cascading Style Sheets)
Regardless of which CSS system is used, there is a box where the Alt text is entered. It is usually accessed via the media library or when the image is inserted.
The text entered in the box will be automatically saved and will be the same each time the image is inserted. If the Alt text is changed, images inserted afterwards will have the new Alt text.
Alt text should always be specified when inserting images.
Since the same image can have different functions and is specified in different contexts, the Alt text may need to be varied between the different pages on which the image is located. It is not always that changes need to take place, but it is beneficial to review the attribute before inserting the image so that the image really fulfils its function.
HTML
In all CSS systems, it is possible to switch to HTML mode to see the code. In the coding, the Alt text looks like the following:
alt=”Blue car with roof rails”/>
After the image source, “alt=Alt-text” is thus entered. After that, other attributes can also be added to the image. If the image also has a caption, there is an advantage that this is entered before the Alt text. This is so that this information is read first by screen readers and Google.
Entering alt-text in WordPress
In WordPress, you have the option to add a title and an alt attribute when uploading an image. The default behaviour is to use the image filename as the title attribute and copy it to the alt attribute if left empty. However, while this is better than leaving the alt attribute blank, it is not considered best practice. It is highly recommended that you take the time to create a descriptive alt text for each image that you add to a post. By doing so, both users and search engines will benefit from the additional context provided.
- Log in to your WordPress website. When you’re logged in, you will be in your “Dashboard”.
- Open the post or page to edit the content.
- Click on the Image block to open the Image settings in the block tab of the sidebar. You will see the Image settings appear in the block tab of the sidebar.
- Add the alt text and the title attribute.
- Click the “Update” button in the upper right corner.
Conclusion
Alternative text provides an excellent opportunity to enhance the accessibility of non-text elements on the web.
Alt attributes for images are used to explain the content of images, enabling screen readers to convey the information to users effectively. Moreover, search engines rely on these tags to comprehend how images relate to the on-page material.
When utilized correctly, image alt text can also aid in ranking for relevant image search queries.
However, it is crucial to avoid redundancy and add alt text only when it adds value that is not already present. It is also important to note that adding alt text to images on a website does not guarantee a higher ranking in search engine results.
