Alt-text

Home » Alt-text
Headshot of Ariane Smith, Digital Publications Manager
Ariane Smith
Digital Publications Manager
envelope icon
Table of Contents

Background

WSU will ensure that students, faculty, staff, and visitors have access to university facilities, technology, and information needed to have an equal opportunity to succeed in their education, employment, and community activities. 
. . .
Digital accessibility refers to the practice of designing and developing digital content, applications, and services in a way that ensures they can be used by everyone, including people with disabilities. It means creating an inclusive digital environment where all employees, students, and visitors can access and interact with digital resources without barriers.  

WSU’s digital accessibility training goes into detail about each of these, but the core concepts, which address a majority of the barriers to digital content and technology, are: 

    • Headings
    • Links
    • Lists
    • Images
    • Color + contrast
    • Tables
    • Audio + video

For the materials that Instructional Design and Digital Publishing create and maintain—session Powerpoints, the Medicine Digital Learning site, Case-Based Learning eBooks, and the MedTech site—we will take care of all of these for the authors, except the images. This is because doing useful alt-text requires the perspective of a subject-matter expert, which we are not.

Types of images

For the purpose of this topic, I’ve simplified us to two types of images:

    • decorative images
    • images that require alt-text

Decorative images do not convey important content, are used only for layout or aesthetic purposes, or do not have a function (e.g., are not links). Decorative images must be implemented in a way that can be ignored by assistive technology. This will improve the experience for people using assistive technology.

Digital Publishing will take care of decorative images in our digital-accessibility projects. We don’t use a lot of them, but an example would be the red stub that is found under the title of a PPT session slide. (It’s also found in CBL on the first page of the session text.)

Informative images add task-related information beyond the contents of the surrounding page copy. If they visualize information that is already communicated elsewhere in writing, these images are considered redundant and will benefit from a deeper analysis into whether they actually require alt text.

For example, a graph showing a full data set accompanying a written analysis of that data is informative. Informative images don’t serve a functional purpose. Alt text for informative images should highlight the unique value they contribute to the page and avoid redundantly restating things already communicated elsewhere. Alt-text for informative images tends to be the most difficult to write.

Informative images can be simple or complex, depending on how easy it is to textually describe the information conveyed by the image.

 

Simple images

An informative image is considered simple when its main message can be summarized in one sentence that fits within about 150 characters.

Simple informative images often include:

    • Photographs
    • Illustrations
    • Simple graphs
    • Graphic-based logos
    • Animations
    • Simple graphics
    • Paintings
    • Sketches
    • Simple renderings
    • Pictograms
    • Silhouettes

 

While some images, such as graphs and charts, seem complicated at first glance, their main point is often simple.

For example, a line graph might contain hundreds of data points, yet its main message might be the simple correlation between the two variables, which can be succinctly described in one sentence. The author of the material would know this automatically; a designer would have to read, understand, and distill the information—a much more time-consuming task (if it can be completed at all).

FDA: This graphic is a simple informative image: it communicates that a nutrition label has four sections and explains what those sections are. While there is a lot of information in the image, most of it is irrelevant to the purpose of this particular image and is explored in detail later on. One sentence of alt text as a summary would likely suffice in this case (with the option of including more detail in a hidden table as part of a long description).
HTML: alt= “Nutrition labels have four sections: serving information, calories, nutrients, and percentage of daily values, for which 5% or less is low, 20% or more is high.”

 

Live 5 News WCSC: This photo is a simple informative image — its main purpose is to illustrate what a ‘soft room’ is like. The image is highly relevant to the page content, so the alt text should emphasize the sentiment of security and comfort within the room conveyed by the photo. Notice how the emotions communicated by the image are not communicated in the page copy.
HTML: alt= “A small, inviting room with warm lighting, several cushioned chairs arranged to facilitate discussion, blankets, and calming photos on the walls.”

Simple informative images may include text. If the text is short enough to fit with about 150 characters and is an important part of the image’s message, include the exact words in the alt text. Otherwise, including the exact text isn’t necessary.

 

Complex images

An informative image is complex when:

    • Its message cannot be summarized in 150 characters, and
    • A structured description could convey its meaning better.

 

This is often the case for intricate visuals that communicate more than one point.

Complex informative images often include:

    • Charts
    • Graphs
    • Figures
    • Diagrams
    • Maps
    • Infographics
    • Tables
    • Flowcharts
    • Blueprints
    • X-rays
    • Heatmaps
    • Schematics
    • Histograms
    • Mind maps
    • Collages
    • Timelines
    • Pie charts
    • Venn diagrams
    • Gantt charts
    • Nutrition labels
    • Screenshots (which turn page copy into an image)

 

Make complex informative images more accessible by altering the page copy surrounding the image. Editing the page copy to communicate the image’s message often makes the visual itself redundant. In many cases, this could be as simple as including a list or table within the HTML of the page.

If the page’s body copy cannot be altered, consider adding a caption right above or below the image. Richer page copy can also benefit users with low vision, learning disabilities, or lack of subject-matter expertise, but must be balanced with brevity.

 

For unalterable page content, provide expanded alt text in a long description. Long descriptions house more detailed information than is reasonable to stuff into traditional alt text. They can include longer paragraphs of text, lists, or tables.

A long description is text that is present in the HTML but invisible to people who do not use a screen reader. It can live on the same page as the image, ideally next to it, or on a separate page, linked to from an invisible link next to the image. If the description is located on a separate page, it can be made visible or invisible, depending on the HTML and the preferences of the designer.

 

Complex graphs or charts

https://digitalstrategy.unt.edu/clear/teaching-resources/accessibility/images-alternate-text.html

Complicated graphs, charts, and other images will require more information than a brief description that is suitable for Alt Text.  The best practice in these cases is to provide both a brief Alt Text description, e.g., “An XY chart about the unemployment rate in the United States”, plus a detailed textual description of the graph before it appears on the page.  An example of this is below:

The graph here is a XY Chart, entitled “My Charts and Graphs Are.”  The chart contains a left-to-right “X” axis and an up-to-down “Y” axis, which intersect one another at the center, forming a cross.  At the left of the X axis is the word “Boring,” and at the right is the word “Fascinating,” representing opposites, with the space in-between representing gradients between these two polar opposite perceptions or moods.  The top of the “Y” axis is labeled “Easy to comprehend,” and the bottom of the axis is labeled “Hard to comprehend.”  Toward the top right of the graph, at the point representing a strong combination of “Easy to Comprehend” and “Fascinating” is a plotted red dot labeled “My perception.”  At the bottom left corner, representing a strong combination of “Boring” and “Hard to comprehend,” is a second plotted dot in green labeled “Everyone else.”

Here's why we need you

In order to do this well—to follow the spirit of the law and make the information contained in alt-text useful to a reader—it is vital to take the specific context of your manuscript into account: there is no “one-size-fits-all” alt text, and the same picture can have very distinct meanings and functions in two different publications.

Moreover:

    • In the case of very complex visual content (e.g., diagrams, charts, etc.), it may be useful to provide readers with a long description, in addition to the mandatory alt text. Provide long descriptions only if necessary. For more information and examples, please refer to our detailed guidelines.
    • Tables may be used to render complex data sets, but keep in mind that tables are only accessible to a certain degree and require a lot of effort from visually impaired readers to navigate. If possible, present your data as a simple list.
    • Make sure to submit tables and simple text diagrams as text and not as images.
    • Never rely exclusively on figures to convey key information! Important data should always be included in the surrounding text.
    • Do not repeat the caption in the alt text. Information that is not displayed in the figure itself (such as author, date, source, bibliographical reference) doesn’t belong in alt text.
    • Also avoid repeating sentences that are already part of the surrounding text. If the figure is described so precisely in the main text and/or caption that any alt text would be repetitive, please use “See caption” or “See main text” instead. This is to inform visually impaired readers that the alt text has not been forgotten but deliberately omitted.
    • Do not include additional information or interpretation in alt text that a sighted person would not see on the figure.

Let's try it

  • Consider the context

    Read the page copy surrounding the image to understand its purpose. Look for any references to the image or explanations of the image — especially if image captions are present. (Struggling to understand context is one reason AI does not write good alt text on its own.)

    The context of an image and the author’s intention for including it determine what the alt text should say, which is why the best alt text is created by those who write the content and choose the images. Alt text for the same image changes from context to context because different things will be relevant about the same image in different places.

  • Identify the intention

    Write the basic idea(s) that the image conveys in the context of the surrounding page copy. Try answering the question “Why did the author include this image?”

  • Trim the text

    Focus the alt-text on the unique value that the image adds to the page. Reduce the alt text to state only that unique message to avoid redundancy with other page copy. (AI can be helpful for simplifying your writing at this stage.)

These common errors hinder the accessibility and usability of images:

    • Images that are not decorative are missing alternative text.
    • Alternative text does not meaningfully describe the image content or function.
    • Images that contain text (e.g., images of event flyers) do not duplicate the text as alt text.
    • Complex images are not described in detail.
    • Images with motion cannot be paused, stopped, or hidden by the viewer.

Top tips

Follow these best practices to improve the accessibility and usability of images in your digital content.

  • Decorative images are implemented in a way that can be ignored by assistive technology.

  • Image content or function is described with alternative text.

    The text is short (less than 150 characters) and uses proper punctuation.
    Alt-text is meaningful within the context of the content the image is used with.
    Do not begin the alternative text with phrases such as “image of,” “photo of,” or “graphic of” (assistive technology automatically announces images).

  • Complex images are described in detail.

  • Text that is part of an image is duplicated as alternative text.

    Do not duplicate captions or supporting text in the alt text.
    Use visible text such as a caption for information meant for everyone, e.g., image copyright/attribution.

  • Images with motion can be paused by the viewer.

What can we skip?

Web content that meets all four of the following points does not need to meet WCAG 2.1, Level AA: 

    • The content was created before the date the state or local government must comply with this rule, or reproduces paper documents or the contents of other physical media (audiotapes, film negatives, and CD-ROMs for example) that were created before the government must comply with this rule, AND 
    • The content is kept only for reference, research, or recordkeeping, AND 
    • The content is kept in a special area for archived content, AND 
    • The content has not been changed since it was archived. 

 

Refer to the ADA.gov website for a full summary of the exceptions

What are the risks of non-compliance?

Failing to ensure digital accessibility denies access and exposes employees and the institution to legal liability. Under EP 7, creators must consult with the ADA Coordinator/Compliance and Civil Rights (CCR) if they believe making specific content accessible would constitute a fundamental alteration or undue burden AND must still provide alternative access for people with disabilities. 

At the time of writing, Artificial Intelligence (AI) tools still struggle to reliably write good alt text that communicates the intention behind images and accommodates their context.

Use AI to refine alt text rather than relying on AI to write it from scratch — particularly when using LLM chatbots like ChatGPT. One critical step in writing useful alt text is to identify the intention behind including the image.

AI cannot read the mind of the author; it can only describe what it “sees.” When given strict parameters and adequate context, it might generate something decent for redundant or simple informative images. But it will struggle to produce accurate alt text for functional images because it may have difficulty interacting with interfaces and might not have a real understanding of what each interface element does.

When it comes to alt text for complex informative images, AI tends to write too much.

We hope that future accessibility software will leverage AI to efficiently aid in laborious accessibility work, but we are not there yet. Even AI-infused accessibility widgets are not yet up to the task and can cause more harm than good.

Wrangling AI to write alt text is often more time-consuming than doing it yourself. However, if you are set on using an AI chatbot to help, the results should be reviewed by those who understand the intentions behind images. Your prompts should include the following parameters (which can also be used to evaluate the bot’s output):

    • A character limit (~150) (However, remember that concise writing is not the same as useful alt text.)
    • Context for the image (whether in writing or a screenshot that shows the image in the context of the larger page)
    • A reminder to describe the message of the image, not describe what it looks like
    • A focus on what the image uniquely contributes to the page to avoid redundancy

 

When we tested AI’s alt text writing ability, we found the results were largely lackluster. Important details were often omitted for the sake of concision, and the chatbots misidentified key aspects of the image. While the AI-generated alt text was usable after some editing, it took more time and effort to hold its hand than to write it ourselves.

Source

This is a quick and dirty page that should not be shared.
I've written some of the content and also copied and pasted from these sources: