Alt-Text and Non-Text Content Labels

Workday appreciates that users have different abilities, and we strive to produce solutions that meet the needs of a diverse audience—including those with disabilities that use assistive technology to access digital content. By including and respecting diversity in our design process, we ensure that barriers are lowered and everyone can access the content they need.

Why Content Labels Matter

Many people who are blind or visually-impaired use an assistive technology called a screen reader to access a computer or mobile device. A screen reader converts text into speech or Braille output. For many people who use screen readers, UI text is how they interact with and experience a digital product.

Text-based experiences are also helpful for people with dyslexia and other cognitive or learning disabilities who need to see and hear the content to better understand it.

Some users experience situational impairments like a slow internet connection. In this case, images might not load, and users will need a faster loading content-only experience.

What is Alt-Text?

Alternative-text (or alt-text) is a text description of a static image, graphic, illustration, data visualization, or other visual-content. Providing alt-text ensures that all users are able to have an equitable experience and receive the same level of information and value from a UI.

In the context of the document, alt-text is the text equivalent to the image and is required if the image is non-decorative.

Alt-text should be considered early in the design process, not just as an afterthought. When creating images or graphics, make sure that the content has alt text to ensure an equitable non-visual experience.

Alt-Text vs. Captions

Alt-text is not the same as a caption. Alt-text describes the image for people who can’t see it. Captions are extra information about that image for both users who can and cannot see the image.

A caption is not a substitute for alt-text. If there is a caption for an image, there must also be alt-text.

Example:

Sticky notes are a great tool for brainstorming.

<figure>
  <img src="brainstorming.jpg" alt="Photo of people writing ideas on sticky notes." />
  <figcaption>Sticky notes are a great tool for brainstorming.</figcaption>
</figure>

Best Practices for Writing Alt-Text

Be Concise: An image is worth a thousand words, but would you read or listen to them all? 80 characters is a common width for refreshable Braille displays. Don't make your users scroll through an essay of your image's description.
Keep It Casual: Describe the image as if you were describing it aloud to a friend.
Focus on Value: Not every detail of the image needs to be described. Only describe parts of the image that add information not already available in the UI text. Ask yourself: “Why is this image included in the design? What is this image communicating to users?”
Use Proper Grammar: Use punctuation and capitalization correctly as this directly relates to the listening experience.
Be Specific: Don't include the word “image” in the description. Consider using more specific descriptors like "diagram," "flow chart," “illustration,” or “photo” if additional context is needed.
Ask, Is It Decorative?: Images or graphics that are purely decorative and provide no additional value to the user do not need alt-text. They can be marked as decorative so they are skipped by screen readers.

For more information on how and when to use alt-text, check out W3C’s alt Decision Tree.

Alt-Text Example:

Photo by You X Ventures via Unsplash

Do

Provide a high level overview of the image's value. Ex. "photo of woman placing sticky notes on wall in a meeting"

Don’t

Describe every detail of the photo. Ex. "A group of busy coworkers are all working around a messy conference table in an airy room with white walls. One woman wearing a white shirt is placing orange, yellow and pink sticky notes on a wall. There are 3 laptops, a plant, some notebooks and pads of sticky notes on the table."

Decorative image Example:

The playful illustration on the homepage of our Workday design site is decorative. It does not provide any additional information to users so it does not have alt-text and is marked as decorative.

What is Non-Text Content?

Non-text content is any interactive content in the UI, which is not text or an image. Examples include: icons, icon-only button variants, and interactive data visualizations. Similar to images, which require alt-text, non-text content requires descriptive labels in the code to ensure an equitable experience for all users. Like alt-text, labels for non-text content are not visible in the UI.

Best Practices for Writing Non-Text Content Labels

Focus on Purpose: Non-text content labels should explain the value of the content, what it does, rather than just what it looks like.
Use Proper Grammar: Use punctuation and capitalization correctly as this directly impacts the listening experience.
Avoid Duplication: To avoid audible duplication of interactive elements, don't include the state (pressed, disabled, etc...), or the word 'button' or 'link' in the description.
Distinguish Functionality: If multiple buttons on the same page have the same visual, they need uniquely distinguishable labels to make their functionality clear.
Consider Complexity: More complicated non-text content like a data visualization may require both a short text label or title as well as a longer description of the content’s details.
Data Visualization Considerations: For complex or dynamic data visualizations, the non-text content description might be represented with a table. Adding a caption can be useful for describing the analysis of, or main take-away from, the data visualization.

For a deep dive into how the brain processes data visually and how you can leverage different senses to provide an equivalent experience for people with disabilities, check out Data Verbalization by Doug Scheppers from Tenon’s Technica11y webcast series.

Non-Text Content Label Examples:

Icon Button Examples

Do

Describe the purpose of the icon or the action that it performs. Ex “Related Actions Allison Hunter”

Don’t

Describe what the icon looks like. Ex “rectangle with three dots”

Do

Provide uniquely distinguishable information in the label to contextualize the functionality of the button. Ex “Mark Options”

Don’t

Give multiple buttons with different actions the same label on a page. Ex “Options”

Chart/Graph Example

Do

Describe the title/purpose for the chart and provide an overview of the data. Ex. “Pie chart of breakdown of profit by region. USA Central: 605,500; USA Northeast: 611,800; USA Southeast: 1,323,000” Additionally, consider adding a caption below the data viz to describe in greater detail what its main takeaway is. Ex "USA Southeast accounts for 52% of total profit.”

Don’t

Just say it’s a chart or what type of chart it is. That's like setting up a joke, but leaving out the punch line! Ex “This is a pie chart”

Documenting Alt-Text and Non-Text Content Labels

Now that you have an understanding of how to write alt-text and labels, you’ll need documentation to align with development teams and ensure the labels are properly included in the code. A great way to do this is to include labels for non-text content as a part of the design spec.

In the following example from Enter Time, the designer used annotation bubbles to number each piece of non-text content in the UI screen and then included a legend on the side with the same numbering system to list out the label that corresponds to each element.

Best Practices for Alt-Text and Non-Text Content Label Documentation:

Focus on the outcome and desired experience.
Try not to prescribe a technical solution. Annotations should be non-technical in language—avoid using specific terms like 'aria-label' as that's not always the best way to add a label.

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section