How To Add Alt Text To Image

Perform a basic audit of your existing content to see where you can incorporate alt text into previously untagged pictures. Do not use a file name, duplicate text, or URLs as alt text. There are a couple of different ways to add alt text to images:

• From an Image Block
• From a Text Block
• In Custom Coded Templates
• In Microsoft Office

Examples of different image types, with best practice tips on the appropriate alt text to use:

1. Alt text for informative images. Alt text for information images should be as clear and concise as possible. 

2. Alt text for images with text. According to the web content accessibility guidelines (WCAG) guidance on images, images of text are not allowed. 

If you cannot avoid images of text, use the exact same text in the image in your alt attribute.

3. Alt text for linked images. Functional images are used to initiate actions rather than to convey information. They’re used in buttons, links, and interactive elements.

The image alt text should convey the action that will be initiated (the purpose of the image) rather than give a description of the image.

4. Alt text for hyperlinked logos. For linked logos, the alt text should indicate where the link will take the user e.g. <img src=“InviqaLogo.png” alt=“Inviqa home”>

5. Alt text best practice for decorative images. Decorative images are used to enhance the look or feel of a web page, rather than to convey practical information.

For images that have no specific purpose or useful information, you can use an empty alt text value <img alt=””>

This means that a screen reader will ignore the image, without announcing its presence.

Using an empty alt text means that the alt attribute is still present, even though it looks empty. If no alt attribute is present, the screen reader will read the file name for the image instead, which can be a major distraction to those using screen reading technology.

How to add alt text in Microsoft Office

1. Do one of the following:

Right-click the object and select Edit Alt Text.

Select the object. Select Format > Alt Text.

2. In the Alt Text pane, type 1-2 sentences in the text box to describe the object and its context to someone who cannot see it.
   

In Microsoft 365, alt text can be generated automatically. When you insert a picture, you may see a bar show up at the bottom of the picture with automatically generated alt text.

In Office 2019, alt text is not generated automatically when you insert an image. If you want to add automatic alt text, select the Generate a description for me button in the Alt Text pane. Depending on the content of the image, sometimes the feature gives you descriptive tags and sometimes you get full sentences.

If automatic alt text is generated, remember to review and edit it in the Alt Text pane and remove any comments added there such as “Description generated with high confidence.”

Turn automatic alt text on

Before you can use automatic alt text, you must enable Office Intelligent Services in any Office product.

1. Select File > Options > General and check that Enable services is selected under Office intelligent services.
2. Select the Ease of Access tab and check that Automatically generate alt text for me is selected under Automatic Alt Text.

How to add alt attributes in WordPress

WordPress makes it really easy to add alt attributes. Follow the steps below to add them to your images. Your (image) SEO will truly benefit if you get these details right. People using screen readers will also like you all the more for it.

• 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 ‘Update’.
  Click the ‘Update’ button in the upper right corner.

How to add alt and title attributes in Shopify

If you’re using Shopify, the process for adding alt text is similar to doing it in WordPress, but the steps differ a little bit.

1. If you have Yoast SEO open, click on ‘Edit with Shopify’ before clicking on the image you want to add alt attributes to.)
2. Open a page and then click on an image to reach the image editor screen.
3. Once you’ve done that, you should see an option to ‘Edit alt text’, then it’s just a simple case of adding your alt text in the field provided.

https://youtu.be/ISA-0HFlS3M