Recent searches


No recent searches

An easy way to add alternative text (alt="") to an image for accessibility



Posted Nov 24, 2020

Website accessibility is important to our organization. We try to make sure that all images in our knowledge base have alternative text. This is not only a benefit for users who are unable to visually identify an image but it's also an advantage for SEO.

To add alt text in Zendesk I need to edit the HTML code each time. Please add an easy way to add alternative text without having to go into the HTML editor. Most smart editors provide this functionality. The attached image shows how it is done in WordPress. 

Ideally, the writer should be prompted to add an alternative text.

This feature would be good for the accessibility of each Knowledge base provided by Zendesk. Please add it :)


32

26

26 comments

Official

image avatar

Patrycja Walencik

Zendesk Product Manager

I am happy to share that editing Alt text is now available as an EAP (Early Access Program) of the new editor. Here you can find information on how to sign up and what kind of improvements the new editor has

0


I have a need for this as well. We have a Provider who uses a screen reader and we are looking to add alt descriptions to each image, which is overwhelming when we will have to go into the html code for each article. Thanks for considering!

6


We have thousands of articles in our knowledge base and it would be super helpful to: 

1) Identify articles that have embedded images without having to go into the actual article. 

2) For articles that do have embedded images especially multiple images, an easy way to add alt text for each image.

3) Add alt text at the time of uploading the image to an article.

Many thanks,

Janice

 

8


This feature would be a HUGE delighter! In order to ensure compliance with the WCAG 2.1 standards, alt-text on images is simply table stakes these days. The current process for adding alt-text in Zendesk Guide is very cumbersome and a lot of commonly used knowledge base programs (Confluence, Salesforce Knowledge) have already solved for this. I've found Zendesk Guide to be vastly better than these other programs in so many ways (as someone who had never used ZD before 5 months ago), so I was actually rather surprised to come across the gap.

7


This is Rick here from Zendesk Product Accessibility. Thanks for this suggestion, I will make sure it is on the Guide team's roadmap. Please do not hesitate to reach out if you have more Accessibility feedback.

4


I wish to agree with those who have mentioned this. I am hopefully going to be working for someone with a ZD instance in the near future. As I am a user of screen reading tech, this is going to assist my productivity no end. Please could you also consider perhaps some kind of app integration that would generate descriptions retrospectively? 

1


I would also like to see this feature!

0


image avatar

Katarzyna Karpinska

Zendesk Product Manager

Hi All, not sure if you are aware of it but it's already possible to quickly add alt text to images in content blocks we are planning to bring this feature to the article editor in the future as well :) 

2


What is the timeline for getting this feature into the article editor?

 

1


image avatar

Katarzyna Karpinska

Zendesk Product Manager

It should be available by the end of this quarter :) 

5


Need this badly, currently migrating to Zendesk from another program and the alt+ text for my (over 200) documents is going to take weeks.

 

0


Looking forward to seeing this improvement Katarzyna Karpinska! So important for accessibility.

1


Hello Katarzyna Karpinska! Do you have any news on this, please?

0


image avatar

Katarzyna Karpinska

Zendesk Product Manager

Hi All, 

We'll soon be releasing a major update to managing images in Knowledge Base and we hoped we'll be able to include in it a tool to add alt text (similarly to what's available already in content blocks) Unfortunately it won't be technically possible in the nearest future. We still plan to add it but it won't be possible this year. 

1


Katarzyna Karpinska re "major update to managing images in Knowledge Base" - looking forward to what you have in store there! Today I badly miss any type of DAM integration.

0


We're currently looking at our SEO optimisation and AI chat integration, adding simple alt-text is something we want to implement so this feature would be very well used by us.

0


Is there any update as to when customer can expect to see this as it is not a feature, but a standard that should be available to all?

Inaccessible web content means that people with disabilities are denied equal access to information. An inaccessible website can exclude people just as much as steps at an entrance to a physical location. Ensuring web accessibility for people with disabilities is a priority for the Department of Justice. In recent years, a multitude of services have moved online and people rely on websites like never before for all aspects of daily living.

Guidance on Web Accessibility and the ADA | ADA.gov

1


image avatar

Katarzyna Karpinska

Zendesk Product Manager

Hi Rynelle, 

I wholeheartedly agree that alt text is crucial for ensuring accessibility. While we don't yet have a dedicated "add alt text" button within the article editor (a feature we, unfortunately, couldn't introduce this year but remains on our future plans), I'd like to highlight a couple of existing features that could serve your needs:

  1. In Content Blocks, you already have an easy way to insert alternative text while managing images. 

  2. Also, within the article editor itself, you can use the HTML editor to add alt text. Though it entails switching to the HTML view of an article, it's a practical and efficient method for adding alt text to images.

I hope these workarounds can help you for now while we work on refining our editing experience. Thanks for understanding. 

0


I am a content creator using the Zendesk help centre Knowledge functionality.

In the UK and Europe, accessibility is a legal requirement, not an option, and ALT tags are a fundamental requirement of the W3C accessibility standards that our organisation must comply with.

I don't understand why this is taking so long to implement. This thread was started in 2021, and you still haven't implemented it in November 2023.

As someone with many years of experience in front-end development, I cannot understand why this simple development task is impossible to implement quickly.

Can you explain why it is still on your 'future plans' list?
Can you explain why it is so difficult to implement?

1


Using the HTML editor to add alt text may be practical, but efficient it is NOT. It's a PITA to find in the HTML, for a start, and when I use the same image in more than one place the alt text does not travel with it and has to be redone. Sure, I can make the images into content blocks but that's another convoluted step that can't be done in bulk. What's wrong with simply keeping metadata with images?

3


Do we have an update on this Katarzyna Karpinska? It's a fairly basic feature in any CMS.

Thanks

2


So, after waiting forever for this to be added to the roadmap, I have created this JS workaround.

It's not ideal, but it works for me for now.

Pre-requisites

  • I have given readable names to all of my article images.
  • All of my article images are .png format.
  • All of my image names are hyphenated with this format: my-image-is-a-car.png

Solution/workaround

  • Zendesk automatically adds the image name as the alt tag value, so I have added JS code that manipulates the alt tag to an accessible, readable value.
  • This code also adds the same text as the title value.

I have edited my Zendesk Guide template JS file with the code below.

The code does this:

  • Get the alt tag
  • Replace all hyphens with a space
  • Remove .png from the end of the alt tag value
  • Uppercase the first character
  • Replace the alt tag
  • Add the title property and give it the same value
// Zendesk automatically adds the image name as the alt tag value
// so use files with readable names as a basis for the alt tags
// select all images, get alt tag, manipulate, and update it
// expected image name format "my-image-is-a-car.png"


// get all images on the page
const images = document.querySelectorAll('img');

// loop through each image
    images.forEach((element) => {

// remove hyphens, remove .png
    const altTag = element.alt.replaceAll('-', ' ').replace('.png', '');

    // set first character to uppercase
const niceText = altTag.charAt(0).toUpperCase() + altTag.slice(1);

    // update the alt tag property
element.alt = niceText;

// add the title property with the same text value
      element.title = niceText;
    });

I have edited the script.js file in the Copenhagen template.

Which produces this:

I hope this helps.

0


Hello, any update on when this feature will be available? We've been waiting over 18 months for it and its really disappointing that its not been prioritised.  Is accessibility not important for Zendesk?

3


Simeon Drage it is ridiculous that they can't implement this - my workaround above may help you for now

0


< please, Zendesk, don't let me be another commenter shouting into the void >

It's a liability--and tbh, embarrassing-- for any company to use Zendesk for their knowledge base, if this basic need can't be met. What do you think, Zendesk? Can this get prioritized?

 

Big thanks to Neil Parker for the workaround!

3


Customers may be forced to leave Zendesk because of the lack of WCAG compliance and the possible fines that can be incurred. Not to mention, accessibility is just the right thing to do.

 

Justice Department Finalizes Rule Requiring State and Local Governments to Make their Websites Accessible

 

The rule requires state and local governments to make their websites and mobile applications accessible for people with disabilities. The agency is adopting the technical standards of Web Content Accessibility Guidelines (WCAG) 2.1 Level AA, which requires 50 success criteria to make websites accessible

 

 

1


Please sign in to leave a comment.

Didn't find what you're looking for?

New post