Image alt text is a critical element for improving accessibility and enhancing user experience in your help center.
It ensures your Zendesk Help Center is inclusive for individuals with visual impairments or low vision, enabling screen readers to describe the content and purpose of images.
In this guide, we'll explore two methods to update or add alt text to your images in Zendesk Help Center: manual HTML editing and using Swifteq's Help Center Manager for Zendesk.
What Is Image Alt Text?
Image alt text, or alternative text, is a brief textual description of an image embedded in a web page's HTML.
Its primary purpose is to make images accessible to users who may not be able to view them due to visual impairments or technical issues, such as a slow internet connection or a broken image link.
Screen readers use alt text to convey the content and purpose of images to visually impaired users.
Alt text also serves as a fallback text if the image fails to load.
From an SEO perspective, alt text is an essential element that helps search engines understand the content and context of images, making it easier to index them properly.
Why Is Image Alt Text Important?
Accessibility: Alt text is a cornerstone of web accessibility. It ensures that all users, regardless of their ability, can interact with and understand the content of a webpage. Screen readers rely on alt text to describe images, making websites more inclusive for visually impaired users.
SEO Benefits: Search engines like Google cannot "see" images. Alt text provides context, allowing search engines to understand what the image depicts and improving the website's chances of appearing in search results. Properly written alt text can also help images rank in Google Images.
User Experience: If an image fails to load due to technical issues, the alt text serves as a placeholder, ensuring users still understand what the image was meant to convey. This creates a more seamless user experience.
Compliance with Accessibility Standards: Many regions, such as the United States (under the ADA) and the European Union, require websites to adhere to accessibility guidelines. Including alt text helps meet these legal requirements.
Best Practices for Writing Alt Text
To create effective alt text, follow these guidelines:
Be specific and describe the image clearly.
Include relevant keywords when applicable, but avoid keyword stuffing.
Keep it concise, ideally under 125 characters.
Avoid starting with "Image of..." or "Picture of..."; screen readers already indicate that it’s an image.
How to Add and Edit Alt Text for Images in Zendesk
Method 1: Editing Image Alt Text Manually in Zendesk
Unfortunately, adding or editing alt text in Zendesk isn't as straightforward as it could be.
Here’s a step-by-step guide:
Open the Article: Navigate to the article in the Zendesk Guide where the image is located.
Access the Source Code: Switch to the HTML (source code) editor.
Find the Image: Search for the image in the HTML code. This might take time, depending on how many images are in the article.
Add or Edit the Alt Text: Locate the <img> tag for your image and add or modify the alt attribute. For example:htmlCopy code<img src="Zendesk image alt text.jpg" alt="Customer browsing help articles">
Apply Changes: Save your edits and publish the article.
While effective, this process can be tedious and time-consuming, especially if your Help Center contains numerous images.
Method 2: Using Swifteq’s Help Center Manager for Zendesk
For a more streamlined and efficient process, you can use Swifteq’s Help Center Manager, a tool designed to simplify managing content in Zendesk.
Here's how it works for adding image alt text:
Access the Media Section:
Open Swifteq’s Help Center Manager and navigate to the Media tab in the left-hand menu.
Here, all images from your Help Center are indexed for easy access.
Locate Your Image:
Scroll through the media list or search for the image that needs alt text.
Open Image Preview:
Select the image to view its details.
Choose How to Edit Alt Text:
In the preview window, click on the “Change Alt Text” option. You’ll see two methods:
Edit Manually: If you have a specific alt text in mind, select this option and type your description into the "New Media Text" field.
Generate with AI: If you don’t have pre-written alt text, use the AI-powered feature to create one automatically. The tool analyzes the image and generates a relevant description in seconds.
Apply Changes:
After entering or generating the alt text, click “Save and Push to Zendesk”.
This updates the HTML code of all articles containing the image, ensuring consistency across your Help Center.
Benefits of Swifteq’s Tool
Time-Saving: No need to search through individual articles or edit HTML manually.
Ease of Use: Intuitive interface requiring just a few clicks.
AI-Powered Option: Automatically generate alt text when needed, eliminating guesswork.
Centralized Management: Manage all Help Center images from one location and apply changes within the integrality of your help center.
Which Method Should You Choose?
Manual Editing: Best for users comfortable with HTML and for making quick changes to a small number of images.
Swifteq’s Help Center Manager: Ideal for Help Centers with numerous images or for those seeking a faster, user-friendly solution.
Take Away
By prioritizing alt text in your Zendesk Help Center, you ensure that your content is accessible, user-friendly, and optimized for search engines.
Whether you prefer manual edits or advanced tools like Swifteq’s Help Center Manager, implementing image alt text in Zendesk is a necessary step toward creating a more inclusive and effective Help Center.
Book a free demo today to see how Swifteq can help your team manage the help center content more efficiently and deliver world-class customer support.
Sorin Alupoaie
Sorin Alupoaie is the founder of Swifteq, an experienced software technologist and entrepreneur, he loves shipping products that solve painful customer problems. Sorin strongly believes that any Customer Service interaction represents a huge opportunity for a business to listen and improve how they deliver value to customers.