Table of Contents

Accessible Images Using Alt Text and Long Descriptions

Markette Pierce Updated by Markette Pierce

How to Describe Complex Images

Complex images contain substantial information – more than can be conveyed in a short phrase or sentence. These are typically:

  • graphs and charts, including flow charts and organizational charts;
  • diagrams and illustrations where the page text relies on the user being able to understand the image;
  • maps showing locations or other information such as weather systems.
  • Math equations
  • Flow charts/concept maps

Every image must have alternative text.

Alternative text should:

  • present the CONTENT and FUNCTION of the image.
  • be succinct.

Alternative text should not:

  • be redundant (be the same as adjacent or body text).
  • use the phrases "image of…" or "graphic of…".

Appropriate alternative text depends heavily on the image's context.

  • The alternative content can often be presented within the context of the page, such as in an adjacent data table. 
  • The alternative text can also be provided by linking to a separate web page that provides the longer description of the complex image. The link can be adjacent to the image or the image itself could be linked to the long description page

Alt Text Short Description:

Including a short alt text descriptions for images helps aid users with visual impairments, enhances the user experience for all, and is one of the pieces to being compliant with accessibility standards. It should be included for images that relate to the content. Otherwise, it can be marked as decorative.

Long Description:

When a complex image needs a fairly long description to properly describe the content. In this case the recommendation is to include a short summary in the ALT tag which points to or links blind users to a long text description which fully explains the image.

<img src=“image-source-location-goes-here” alt=“alt text goes here” longdesc=“long description goes here”/>

Example:

Technical Illustration

ALT Text short description: 

Velocity profile of laminar flow in a pipe.

Long Description:

This diagram shows fluid flowing through a pipe along the x-axis in parallel layers with minimal disruption. Velocity arrows are shorter on the edges, representing a slower velocity vx and longer in the center, representing a faster. The edges of the arrow form a parabola and represent the "velocity profile."

Note: Only those visual details needed for understanding the concept are included in the long description
Diagrams:

Alt text:

Pie chart showing the career outcomes for 41 PhD students from the last 10 years of the WSU BTP. It shows who earned their PhD went on to work in biotech companies (32%), begin post-doc research (22%), or are currently looking for work (12%).

Long Description:

The pie chart shows the career outcomes for 41 PhD students from the last 10 years of the WSU BTP.

Career Outcome

Percentage

Academic Instructor

2%

Assistant Professor

7%

Biotech Companies

32%

Entrepreneurs (started own Biotech business)

5%

Government Laboratories

7%

Looking for Employment (recent 2015 grads)

12%

Medical Research Labs

3%

Pharmaceutical Companies

5%

Post-Doc

22%

Private Research Institutes

3%

Other

How did we do?

Accessible Excel Files

Contact