ServiceNow Knowledge: Make Images Accessible Using Alternative Text

Alternative text, or "alt text", provides a text equivalent for images, charts, graphs, and more. Some of its benefits include:

  • It can be read by assistive technologies. This is a "make it or break it" difference for anyone using a screen reader because without alt text, screen reader users simply cannot know what the image is conveying.
  • It can help sighted users access the content of the image when their browsers fail to display the image.
  • It can help English learners gain vocabulary to describe what they see.
  • It can help you, the author, make sure that the image you've selected communicates your intended purpose. 
  • Finally, alt text can make it easier for users to find your page via search engines.

When you include alternative text for your images, you make them accessible to everyone in your audience - not just the people who access information in the same way that you do. You also:

  • Live up to the University of Minnesota's value of inclusivity.
  • Comply with the regulations set forth in the Americans with Disabilities Act, the U.S. Rehabilitation Act, and the Telecommunications Act.

This article covers the following topics:

Types of alternative text (alt text)

Alternative text is used to describe in words what an image is trying to convey. There are 3 types, one of which is always required.

  • The alt text HTML attribute. Required.
  • A text-equivalent description in the article content itself.
  • A text-equivalent description external to the article.

Setting the alt text attribute in a ServiceNow article

When you insert an image in a Knowledge Base article, you must provide alternative text using the alt text attribute. 

This HTML attribute is automatically generated when you fill out the Alt field in the Insert/Modify Image dialog box.
ServiceNow Knowledge Editor, Insert/Modify Image dialog box; the Alt field is highlighted.

What you enter into the Alt field depends entirely on the image's context. A good guideline here is to think: what meaning is a sighted user deriving from this image? Then, use that information to write your alt text. This will ensure that anyone who can't see the image is still getting equal access to its meaning.

For example, in the context of this article, the alt text for the image above could be ServiceNow Knowledge Editor, Insert/Modify Image dialog box; the Alt field is highlighted.

The "null" alt text attribute 

If the information provided by an image is already described in the surrounding text, and the image provides no additional information, you may be able to use null (empty) alt text. This allows assistive technology, such as a screen reader, to ignore it. Otherwise, the screen reader will read both the surrounding text and the alt text which would be repetitive and distracting.

The HTML for the "null" alt attribute is "" (two double quote marks with no separating space). 

Generating "null" alt text in ServiceNow

ServiceNow automatically generates the "" HTML code. (Other editors may behave differently.) When "null" alt text is appropriate for the article context, simply leave the Alt text field blank. 

  • Note: Also leave the Tooltip text field blank when you use "null" alt text. Otherwise, it too would be repetitive.

Writing alternative text for technical documentation

Writing alternate text for images in technical documentation can be easier than writing alternative text for images where the context may not be so clear. 

Most images for configuration or process instructions fall into one of three categories: 

  • Images that show the user what something looks like
  • Images that help the user locate something
  • Images that help the user confirm settings

That said, context is everything. 

Buttons

  • If an image is of a button and if it is in line with the surrounding text that names the button, then use the null alt text attribute. For example:
    Click the Insert/Edit image button KB0013318-insert-edit-image-icon-20161207.PNGx on the Knowledge Base editor toolbar.
  • When an image depicts a navigation button, because the button is also a link, set the alt attribute to the name of the button. For example: The alt text for the following instruction and associated image is "hardware." 
    "Click Hardware from the menu bar on the left. The Hardware window opens."
    Hardware

Images containing more information than is provided in article text

If an image communicates more content than the context provided by the surrounding text, the alt text should describe the additional content. For example,

  1. Start JAMF Pro.
  2. Click User and Location.
    JAMF Pro Inventory tab menu bar with User and Location highlighted.
    The alt text for the image above could be JAMF Pro Inventory tab menu bar with User and Location highlighted. 

Images representing result(s) of doing a process 

If an image represents the result of taking a series of steps and it provides no additional information, use the null alt text attribute. A good example is an image depicting the results of filling out form fields. For example:

Fill out the form fields. For each one, you can start typing or use the Lookup using list button KB0013318-lookup-using-list-icon-20161207-1.PNGx to the right of each field.

  1. Enter the Service Offering
  2. Enter the appropriate Technology, if any.
  3. Select the appropriate Knowledge Base
  4. Select the Category.
    KB0018278-servicenow-knowledge-article-form-fields-20190722.JPGx

    Note: Be sure an image depicts the results of having followed the step(s) that came before it. It should not show partial results or no results at all. 

Images that contain text only

When an image contains only text, the text being displayed can usually be used as alt text. For example, the alt text for the following image generated when someone registers for a course in Training Hub would be Training Hub popup window. "You have been enrolled in this course."
Sample image containing text only

If the text displayed in the image is already provided in the surrounding text, as above, use the null alt text attribute.

Interface images

When you have an image that shows an application interface in which nothing is highlighted, depending on the context, the following options might be appropriate:

  • Using the Alt text attribute to name the interface. 
  • Naming the interface and naming all the form fields in the body of the article. 

For example, the alt text for the image below could be:

  • The ServiceNow Knowledge Editor displaying all form fields.
  • The ServiceNow Knowledge Editor window displaying all form fields: Number, Service Offering, Technology, Knowledge base, Category, Display Attachments checkbox, Workflow, Expiration, Valid to, Assignment Group, Assigned To, Source Task, Title, Content, Keywords, Internal Support Notes - Not Viewable by the Customer.
    1. Select Knowledge, then Create New Article in the Application Navigator on the left. The editing window appears.
    The example image described above.

Complex graphics (info-graphics)

When you have a complex graphic such as an info-graphic, you can provide alternative text outside of the article content on another page, unless having a complete description within the article itself would serve all audiences.

If you need an external page, you should:

  • Describe the graphic accurately and completely. 
  • Provide a link adjacent to the image or set the image as the link to the external page.
  • Set the alt text attribute to describe the general content and that it will open in a new page. 

Below is a sample infographic. In the context of this article the content of the sample info-graphic does not apply. It merely serves as an example; the alt text attribute is set to "Sample info-graphic".

If the content were pertinent, the text in this example could be expressed in a table in the body of the article itself, in which case:

  • The table would serve as the alternative text. 
  • The alt text attribute could be "info-graphic describing the 5 ServiceNow Knowledge Bases".
    Sample info-graphic

Alt attribute rules

Some of the following rules are adapted from the WebAIM article on Alternative Text

Typically, the alt attribute should:

  • Be accurate and equivalent in presenting the same content and function of the image (an example of a functional image is a navigation bar button). 
    • Terminology should be referenced exactly as it is presented in the application interface.
  • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Usually no more than a few words are necessary. Sometimes a short sentence or two may be appropriate.
  • Include the full title of window, tab, heading, menu, or screen. 
  • NOT include:
    • Instructions that already appear in the surrounding text (e.g. "Click Next," "Enter your NetID").
    • Descriptions of color, position, etc. (e.g. "Red Button," "upper-left")
  • NOT be redundant  - be the same as adjacent or body text 
  • NOT use the phrases "image of ...", "graphic of ..." or "screenshot of€¦" to describe the image. It is usually apparent to the user that it is an image. 
    • If there could be confusion about whether a user can interact with the image, then it's OK to use "screenshot of€¦" in the alt text. For example:
      5. Click Submit a Paper.
      Screenshot of Submit A Paper button
      The alt text for the above image is "Screenshot of Submit A Paper button".

Additional resources