Splunk® Style Guide

Splunk Style Guide

Acrobat logo Download manual as PDF


Acrobat logo Download topic as PDF

Include alt text

Some Splunk customers use screen reader software, or screen readers, to read our documentation. Screen readers convert the contents on a page into synthesized speech for a user to listen to. All images in Splunk docs must have alt text so the entire page is accessible through screen reader software. Alt text is a written-out equivalent of the image that a screen reader can dictate.

You can find more information about website accessibility requirements on the Americans with Disabilities Act (ADA) website and on the Section 508 government website. For more information on accessibility in Splunk docs, see Write docs for everyone.

Best practices

All images in Splunk docs, whether a screenshot, diagram, GIF, or inline image, must have alt text. For inline images, GIFs, and complex diagrams, it's important to have adequate surrounding text so you don't place too much information in the alt text.

Surrounding text

When you're writing surrounding text, keep the following points in mind:

  • For an inline image, write the name or a description of the icon in the sentence. Put the icon in parentheses immediately after that text.
  • For a complex diagram, use lines of surrounding text to explain the diagram. You can include a simple sentence in the alt text that refers to this descriptive text.
  • It's okay to use "before", "after", and "following" in the surrounding text when you reference an image. Do not rely on directional language, such as "left", "right", "above", or "below", when you refer to a location in a UI or document. These instructions are unhelpful to visually impaired users.
  • Lead into the image with a complete sentence. Punctuate the end of the sentence with a colon.

Alt text

When you're writing alt text for an image, keep the following points in mind:

  • Describe the meaning of the image rather than what you see.
    • Introduce only relevant information.
    • Don't call out implications or add new information to the alt text.
  • For complex images, place the most important information about the image in the first sentence of alt text.
    • If the surrounding text describes the image, add a second sentence of alt text that describes where the surrounding text is on that page.
    • If the surrounding text doesn't describe the image, you can use multiple sentences of alt text to describe the image.

Alt text examples

Good alt text describes an image so that a user who uses screen reader software can visualize the image as easily as a user who looks at the image.

The following images show examples of good alt text.

Screenshot of full-width UI

This example shows a screenshot of the full width of the UI:

This screenshot shows the list of Save As options. The list includes Report, Dashboard, and Alert. Report is highlighted.

Screenshot with user input

This example shows a screenshot with user input:

This screenshot shows the Relative option. For the "Earliest" time, the number 2 is typed in. From the drop-down list, "Days Ago" is selected. For the "Latest" time, the radio button "Now" is selected.

Diagram with brief alt text

This example shows a simple diagram with brief alt text:

This diagram shows individual events being processed by a streaming command, one event after another.

Diagram described by surrounding text

This example shows a diagram that is described in the surrounding text within the topic:

Example
In a typical distributed search process, there are two search processing phases: a map phase and a reduce phase. The map phase takes place across the indexers in your deployment. In the map phase, the indexers locate event data that matches the search query and sorts it into field-value pairs. When the map phase is complete, indexers send the results to the search head for the reduce phase. During the reduce phase, the search heads process the results through the commands in your search and aggregate them to produce a final result set.
The following diagram illustrates the standard two-phase distributed search process.
This diagram shows a standard two-phase search process. The process is described before the diagram, in the section "Overview of parallel reduce search processing".

GIF

This example shows a GIF that has a detailed description of what happens during the animation:

The following animation shows how to add a Flow Model and launch the Explorer. The animation starts from the home page. Then, the user clicks the Add new Flow Model button. A pop-up message appears, and the user enters a name and base search for the Flow Model and clicks submit. In the Flow Model editor, the user selects customer_id under correlation ID and action under step, and then clicks Explore. The Explore view shows a flowchart of steps, starting with "new account created" and ending in "purchased game".

Named inline image

This example shows a named icon that users must click as part of a step in a task:

Click the embedded file icon (Image of the embedded file icon.) in the editor toolbar to insert the markup.

Unnamed inline image

This example shows an unnamed icon that users must click as part of a step in a task:

Click the gear icon (Image of a gear.).
Last modified on 20 September, 2019
PREVIOUS
Write docs for everyone
  NEXT
Capitalization

This documentation applies to the following versions of Splunk® Style Guide: current


Was this documentation topic helpful?

You must be logged into splunk.com in order to post comments. Log in now.

Please try to keep this discussion focused on the content covered in this documentation topic. If you have a more general question about Splunk functionality or are experiencing a difficulty with Splunk, consider posting a question to Splunkbase Answers.

0 out of 1000 Characters