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
