TDX 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. Without alt text, screen reader users 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 are making 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)
• Setting the alt text attribute in a TDX article
• The "null" alt text attribute
• Writing alternative text for technical documentation
  • Buttons
  • Images containing more information than is provided in article text
  • Images representing result(s) of doing a process
  • Images that contain text only
  • Interface images
  • Complex graphics (info-graphics)
• Alt attribute rules
• Additional resources

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 TDX knowledge article

When you add 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 Alternative Text field in the Image Properties dialog box.

What you enter into the Alternative Text 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 visually see the image is still getting equivalent access to its meaning.

Example: In the context of this article, the alt text for the image above could be: TDX Image Properties window, Image Info tab filled out displaying: URL, Alternative Text, values for Width, Height, and Border. and an image Preview.

The "null" alt text attribute 

Null (or empty) alt text may allow assistive technology, such as a screen reader, to ignore an image. The HTML for the "null" alt attribute is be alt="" in the Source Code (two quotation marks without a space).

Including alternative text on an image that is already described in detail by the surrounding text means the screen reader will read both the surrounding text and the alt text which can be repetitive and distracting. Alternatively, having null alt text on images can cause confusion as to why the image was included and whether the alt text is purposefully null or if the alt text is insufficient. 

Our best practice is to include alt text on all images. If the image is truly null, consider removing it entirely.

Writing alternative text for technical documentation

Writing alt 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 button's name.
  • Example: Click the Insert/Edit image button  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.
  • 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."
    

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.
   
   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, the alt text can be a short explanation that the image is an example or result of the surrounding steps. 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 icon  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.
   
   
   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."

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.
  

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 infographic does not apply. It merely serves as an example; the alt text attribute is set to "Sample infographic".

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 "infographic describing the 5 ServiceNow Knowledge Bases."
  

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. 

Generally, Alt text should 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")
• Be redundant - be the same as adjacent or body text 
• 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. Example:
    5. Click Submit a Paper.
    
    The alt text for the above image is "Screenshot of Submit A Paper button".

Additional resources

• WebAIM is an organization dedicated to web accessibility.Their website has an Introduction to Web Accessibility which includes a section on Alternative Text. 
• Add an Image to an Article
• Add or Edit Alternative Text in the Technology Help Website
• Add Alternative Text to Images in TDX