Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
minLevel1
maxLevel6
outlinefalse
stylenone
typelist
printablefalse

\uD83D\uDCD8 Instructions

Section 6.1: Alternative Text

All images regardless of their complexity need to have an Alt text in some way. Alt Text is a brief description of your image that is 150 characters or less. This Alt Text is meant for any image that has meaning within the context of the document. Screen readers cannot read images to the reader, so Alt text acts as a substitute. To add an Alt Text to your image,

  1. Right-click the image and select Edit Alt Text.

  2. Type the alt text in the menu that pops up to the right. Use 150 characters or less.

    A slide showing places to visit in Tokyo Japan with a photo of Tokyo and Mount Fuji at sunset.
  3. If the image is decorative, write the word Decorative as the alt text (do not check the box that says "Mark as decorative").

    A powerpoint slide with a decorative image. The Alt Text panel in open to the right with Decorative in the text box.
Tip

Our decorative image has an Alt Text that says “Decorative”. The Mark as Decorative checkbox is unchecked.

An Alt Text description that lacks details.
Warning

This example of Alt Text fails to describe all of the details in the image.

Example of a good alt text that is descriptive.
Tip

This example of Alt Text is much better. It describes many details in the image so that the reader has a better idea of what is in the picture.

Section 6.2: Long Descriptions for Complex Images, Pie Charts, and Bar Graphs

When using complex images like pie charts or bar graphs, it is better to use a long description rather than Alt Text. Alt Text is meant to be brief, while long descriptions give you a bit more freedom to explain the image. There are many ways to create a long description including:

  • Describing the complex image in text below the image.

  • Adding a link below the complex image.

  • Providing the data from the image in text form.

Make sure the long description is visible to all users. Even if they are links, or buttons.

A pie chart on the Most Popular Sports in the USA without a long description.
Warning

This pie chart is missing a long description. This will be an issue to readers who cannot see at all or can see very little.

A pie chart of the most popular sports in the USA with a link to the text description
Tip

This pie chart is now accessible due to it having a link. The link will take the reader to a long description or index when clicked.

A pie chart of the most popular sports in the USA with a long description of the chart underneath it
Tip

This pie chart contains a long description that tells the screen reader and reader exactly what is on the pie chart. This will make it much easier for the reader to understand the chart, and the statistics, and learn at a faster pace.

A pie chart of the most popular sports in the USA. The pie chart provides alt text explaining that the data can also be found in the table below.
Tip

This pie chart is also accessible because it provides Alt Text directing the readers attention from the pie chart to the table. A reader may have a difficult time reading a pie chart, to remedy this, create a table underneath the chart with the same information. This will give them the ability to get the information they need.

Additional Types of Long Descriptions

When you use complex images, you must describe it using Alt Text and have a longer description.

Complex Image without a Long Description.jpg
Warning

This image of the Hagia Sophia in Turkey has an Alt Text. However, there is no long description.

Complex Image with a link to a Long Description.jpg
Tip

This image of the Hagia Sofia has an alt text. There is also a link to the long description that will go into more detail about what is in the picture.

Section 6.3: Watermarks and Backgrounds

Watermarks and background images should not be used. They will interfere with peoples ability to read the page. Watermarks and backgrounds tend to be very distracting to most readers. It is best to use a background that does not interfere much at all with the text on the slide.

A slide on for the Introduction to the Stock Market.Image RemovedA slide on for the Introduction to the Stock Market.Image Added
Warning

This slide has a background that is very distracting to readers. These should always be avoided when making a presentation.

Introduction to the Stock Market slide with a non distracting background.
Tip

This background does not interfere with the text and gives the PowerPoint a very professional look.

Section 6.4: Text Boxes, Shapes, and Other Floating Objects

PowerPoint differs from Word in one very significant way: floating objects are easy to navigate and make up the very nature of the entire slide. The title field in a slide, for instance, is a text box. Users just needs to hit the tab button to navigate slide and each object will be selected, announced, and the alt text (if present) will be read.

You do not need to add alt text to text boxes, since the contents are directly read by a screen reader, but you MUST add alt text to other non-text objects, including shapes and icons (and of course, images, graphs, charts, etc.).

Section 6.5: Using a Series of Shapes

A series of the same shapes or images should be grouped. They should also be given alternative text and a long description. You can group them together by right clicking each of the shapes and pressing Control G.

Movie Rating with 5 stars. Four of them are filled and one is blank. The stars are all separate items.
Warning

These shapes are inaccessible due to them not being grouped. The Alt Text would also only apply to one star, and is not a good Alt Text example.

Movie Rating with five stars grouped together. Four out of five starts are filled. Alt Text is included.
Tip

These shapes are accessible because they are grouped together. The Alt Text is also more descriptive of what the shapes mean.

Filter by label (Content by label)
showLabelsfalse
max5
spacescom.atlassian.confluence.content.render.xhtml.model.resource.identifiers.SpaceResourceIdentifier@82d
sortmodified
showSpacefalse
reversetrue
typepage
labelskb-how-to-article
cqllabel = "kb-how-to-article" and type = "page" and space = "AN"