5 ways to set Alt text for images in Sitecore

Introduction:

Alt text is a crucial part of website accessibility and SEO, as it provides a description of the content of an image to people with visual impairments. Sitecore provides various ways to set Alt text for images, from manual to automatic using AI. In this article, we will explore the different ways to set Alt text for images in Sitecore, including manual, via C# code, via PowerShell, using Config setting "Media.AutoSetAlt", and AI with sample code.

Manual:

The most basic and straightforward way to set Alt text for images in Sitecore is to do it manually. You can do this by uploading the image to the Media Library and setting the Alt text manually in the "Alt" field of the image. When you click on the image, you will see the editing options on the right-hand side of the screen. In the "Alt" field, add a description of the image, which will be read by screen readers.

AI with image tagging:

This approach uses Azure Cognitive Services' Computer Vision API to generate a description of an image and sets it as the alt text of the corresponding image item in Sitecore using C# code.

The steps involved in this approach include installing the Azure Cognitive Services Computer Vision NuGet package, creating an instance of the ComputerVisionClient class with your subscription key and endpoint, and calling the AnalyzeImageAsync method to get a description of the image.

The retrieved description is then set as the alt text field of the image item in Sitecore using the Sitecore API.

This approach can be useful when you have a large number of images in Sitecore that require alt text descriptions, as it can automate the process of generating descriptions and setting them for each image item.

However, it's important to note that the accuracy of the generated descriptions may vary depending on the image and the complexity of its content. Therefore, it's recommended to review and potentially modify the descriptions as needed to ensure they accurately reflect the content of the image.

Via C# code:

If you want to set Alt text for images programmatically, you can do so using C# code. You can use the Sitecore API to set the Alt text for an image. Here is an example code snippet:

 

using Sitecore.Data.Items;

using Sitecore.Resources.Media;

 

// Get the MediaItem for the image

var mediaItem = (MediaItem)Sitecore.Context.Database.GetItem("/sitecore/media library/Images/my-image");

 

// Save the changes

mediaItem.Editing.BeginEdit();

mediaItem.Alt = "This is my image";

mediaItem.Editing.EndEdit();

 

In the code above, we first get the MediaItem for the image we want to set the Alt text for. Then, we set the Alt text using the "Alt" property of the media item. Finally, we save the changes by calling "BeginEdit" and "EndEdit" on the media item.

Via PowerShell:

Sitecore PowerShell is a powerful tool that allows you to automate tasks in Sitecore. You can use PowerShell to set Alt text for images in bulk. Here is an example script that sets the Alt text for all images in a folder:

$imagesToBeUpdated = "/sitecore/media library/2023 Images"

$images = Get-ChildItem -Path $imagesToBeUpdated -Language * -Recurse |

Where-Object { ($_.Fields["Alt"] -ne $null) -and ($_.Fields["Alt"].Value -eq '' -or $_.Fields["Alt"].Value -eq '$name') }

 

$images |

    ForEach-Object {

        write-host "Updating Alt text for - " $_.Name

        $_.Editing.BeginEdit()

        $_["Alt"] = $_.Name

        $_.Editing.EndEdit() | Out-Null

    }

 

In the script above, we first get the folder we want to set the Alt text for. Then, we loop through all the media items in the folder using the "Get-ChildItem". For each media item, we check if the Alt text is empty, and if it is, we set the Alt text using the "BeginEdit" and "EndEdit" methods.

Using Config setting "Media.AutoSetAlt":

Sitecore also provides an automatic way to set Alt text for images using a configuration setting called "Media.AutoSetAlt". When this setting is enabled, Sitecore will automatically set the Alt text for an image using its file name. Here's how to enable this setting:

1.      Open the Sitecore.config file located in the \App_Config\Include\ folder

2.      Search for the "Media.AutoSetAlt" setting in the file.

3.  <setting name="Media.AutoSetAlt" value="true" />

 

3.     Save the Sitecore.config file.

Now, when you upload an image to the Media Library, Sitecore will automatically set the Alt text using the file name. For example, if you upload an image named "my-image.jpg", Sitecore will set the Alt text to "my-image".

Conclusion:

In conclusion, setting Alt text for images is essential for website accessibility and SEO. Sitecore provides various ways to set Alt text for images, from manual to automatic using AI. Each method has its own advantages and disadvantages, and you should choose the method that best fits your needs. Manual and C# code methods are suitable for setting Alt text for individual images, while Sitecore's with AI solution provides an advanced way to set Alt text by analyzing the image. Whereas PowerShell is suitable for bulk operations. Finally, using the "Media.AutoSetAlt" setting is suitable for setting Alt text automatically based on the file name. By using these methods, you can ensure that all images on your website have appropriate Alt text and are accessible to everyone.

Here is video for the same