Alt text not displaying

[ahamann]

Hi all,

I added alt text to some images in a ServiceNow article. However, when I view the article, either in the back-end fulfiller view or the user-facing service portal, I can't view the alt text; it doesn't appear when I click on or hover over the image. Has anyone else experienced this issue? Does anyone know what causes it, and how to change this behavior?

[Lauren Methena]

Info: Which version are you using? Thank you!

[Paul Curwen · Accepted solution]

It should work without any issues. Alt Text will only appear though if the image cannot be displayed for any reason and is also used by screen readers. 

Easy test is in your KB article switch to HTML mode (click the <> source code button)  and change the name of your image to some random name to break it. then save and preview the article and you should see the alt text. 

You may be confusing the alt attribute and the title attribute.

The alt attribute is an img-specific attribute to assign alternative content to be rendered in the case that the image cannot be. title is a general attribute used to provide a tooltip when hovering over the element.

If you want balloon text to appear when the mouse hovers over an image, add "title" to the img HTML tag as shown in the example code below.

<img alt="Example of alt text" title="Example of title text" src="whatever.png">

If helpful please mark as Helpful/Correct

[matthew_magee1]

I'm wondering if it's a browser issue. When I go to this website (not related to SN), I can't see alt text either:

W3Schools Tryit Editor

I tried edge and chrome, same result

[Gregg Grose]

In my instance, the Insert/Modify Image window has a Tooltip field which adds the title attribute and the Alt Text field which adds the alt attribute. Tooltips are displayed on cursor hoverover and alt text is displayed on a broken image and also read by a screen reader.

You could also manually insert these in code similar to:

<img src="web address of image"  alt="Alt text for a screen reader" title="Title text displayed on cursor hoverover"/>