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

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

< 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!

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

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?

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.

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

Thanks

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?

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?

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.