Alt Attribute

If an image or document cannot be displayed, the alt attribute helps! It provides descriptive alternative text so users know what they are missing.

What are Alt attributes?

An alt attribute is an important part of websites, providing visual descriptions for people who cannot see images. This has the potential to significantly improve the user experience by ensuring that all visitors can access and understand the website's content without limitations or barriers.

Alt attributes, also known as "alt tags" or "alt descriptions," are used to describe the content of an image file in HTML. They are most commonly used in the HTML `img` element as the `alt` attribute to provide a text description of the image.

This is especially important for images used as links, as the alt text will be displayed instead of the image if the image cannot be displayed for any reason.

Alt text is also used by search engines to understand the content of a web page and deliver better search results. It's good practice to always use alt attributes for images, as they provide context. SEO to improve a website.

Why are alt attributes important?

There are several advantages to using alt attributes for your images, such as:

• Improving the user experienceAlt tags provide an image description when the image cannot be displayed. They help users understand the context of an image and how it relates to the content of the webpage. This can improve the overall user experience and make the website more enjoyable to browse.
• Search Engine optimization By enabling search engines to crawl and index images, alternative text not only improves usability but also provides search engines with crucial information about an image's content and its context within a webpage. Even without browser support, these alternative texts allow users to understand what should be displayed!
• Increased accessibility For visually impaired users, the text is read aloud by a screen reader. Access to your website must be possible for everyone, regardless of device type, internet connection strength, or location. Alt tags ensure that visually impaired people can also participate by providing a short description of the image content that can be read aloud by text-to-speech software. Alt tags bridge the gap between visual and auditory users – it has never been easier to enable people to access images online!
• VImproved user-friendliness: Alt tags can help users identify the purpose of an image, especially when the image is used as a link. This can make the website more user-friendly and easier to navigate.

Common mistakes when using alt attributes

The most common mistakes made with alt tags are:

• It is advisable not to use alt tags at all, as they are an important element of web accessibility.
• Using the same alt tag for all images: Using the same alt tag for all images is not only useless for users, but can also be considered spammy by search engines. It is important to write unique and descriptive alt tags for each image.
• The use of irrelevant alt tags: Alt tags should accurately and effectively describe the content of the image. Using alt tags that are irrelevant to the image or the context in which it is used is confusing for users and can negatively impact a website's accessibility and SEO.

Best practices for alt attributes

Check your website for missing alt attributes.

Here are some steps you can follow to check a website for missing alt tags:

• Use a website crawler: There are many tools that can crawl a website and identify images without alt tags. Some popular options are: Screaming Frog, SEMrush, and Sistrix.
• Check the HTML source code: You can manually inspect a webpage's HTML source code to see if alt tags are present for images. To do this, right-click on an image and select "Inspect" or "View Page Source". Look for the `img` element and check if it has an alt attribute.
• Manually check the images: You can also manually check the images on a webpage to see if they have alt tags. If an image doesn't have an alt tag, you can add one by editing the HTML source code or using an image editing tool.

It's important to note that checking a website for missing alt tags is only one aspect of a comprehensive website audit. There may also be other issues that need to be addressed to improve a website's accessibility and SEO.

Avoid keyword stuffing

Keyword stuffing refers to the practice of excessively using keywords to manipulate a website's ranking in search engine results. Use only keywords that are relevant to the image's content and the context in which it's used, and avoid repeating the same keyword over and over. Instead, use variations of your keywords to create variety.

Very important: Use an appropriate number of keywords in your alt tags. Overusing keywords can be seen as spammy by search engines and can negatively impact your ranking.

Keep your alt tags short.

Alt attributes should be short and concise, no longer than a few words. The length of an alt tag can vary depending on the context in which the image is used and the content of the image itself. In general, it's best to keep alt tags as short as possible while still accurately and effectively describing the image's content.

As a general guideline, alt tags should be between 2 and 4 words long. If you need to use longer phrases to accurately describe the image, that's fine, but try to avoid excessively long alt tags.

It's also important to note that the primary purpose of alt tags is to provide a textual description of the image for users who cannot see it. Therefore, the most important consideration when writing alt tags should be ensuring they accurately and effectively describe the image's content.

Alt Attribute Examples

See below for an example of alt attributes from our website.

<src=»https://www.mikgroup.ch/wp-content/uploads/2021/03/MIK-Team-scaled.jpg» alt="MIK Team"«>

A bad example of using alt tags would be: alt="The MIK team with 20 employees in the office"«>

How do you implement alt tags in WordPress?

Since WordPress is the most popular CMS, we will briefly explain how to add alt attributes in WordPress:

• Log in to your WordPress dashboard and go to the "Media" section.
• Find the image you want to add an alt tag to and click on it to open the "Edit Media" screen.
• In the "Edit Media" section, you will see a field labeled "Alternative Text". Here you can enter the alt text for the image.
• Enter your alt tag and click the "Update" button to save your changes.

You can also add alt tags to images when you insert them into your posts or pages. To do this, click the "Insert Media" button and select the image you want to insert. On the "Insert Media" page, you'll see a field labeled "Alternative Text." Enter your alt tag here and click the "Insert into Page" button to insert the image with the alt tag into your post or page.

It is important to note that it is good practice to always use alt tags for images, as they can improve the accessibility and SEO of your website.