Writing for UX Optimizing Images Step 2: Alternative Content

Updated by Pat Godfrey: February 1, 2020

This is the second of three articles exploring steps of a typical Image Optimisation Workflow:

• Step 1 reflects on our choice of images, their inclusivity, and their source.
• Step 2 discusses optimizing the alternative content experience of digital images.
• Step 3 outlines strategies to optimize images for performance before uploading them.

Each step guides an approach to, and design of our users' experience of images. This is of immediate interest to anyone writing and uploading content to enterprise CMS or B2C web applications.

2.1. Design for accessibility

Access to our content is a human right.

2.1.1. Alternative text or alternative content?

Alternative text and alternative content are not a boolean accessibility choice. They work together and offer alternative content consumption channels to match an individual's preferences and overcome limitations of technology.

2.1.2. Accessibility is a requirement

Legislation is in place across NA and the EU. Litigation is on the increase where less able users have proved that organisations neglected to design for accessibility.

Accessibility is not only making coded content accessible. It is creating a comparable experience and understanding of the content for all users regardless of their ability.

Accessible content and image design is essential to our users' experience of our content.

2.1.3. Accessibility by image type

Decorative image accessibility

Decorative images must have an "empty" alternative text attribute, alt="". The empty value informs screen readers that the image has no semantic meaning. They will move on without acknowledging the image.

Illustrative image accessibility

Illustrative images must have a populated alternative text attribute. It must describe the image content so a blind visitor can discern what the image illustrates. The alternative text displays when an image fails to load. Alternative text helps everyone access image meaning or content.

Informative image accessibility

Informative images containing bitmap text and graphics are not accessible. Their content must be explained on the page as alternative content or a link offered to an accessible file.

2.2. Consider alternative text

Alternative texts serve two main purposes:

1. When an image fails to load, the browser informs our user of its alternative text.
2. To enable assistive technologies like screen readers to announce the image content to people who cannot otherwise perceive it.
3. To enable images to replace text copy.

2.2.1. The HTML alt attribute

The alternative or equivalent text is contained in an <img> or <area> tag, and optionally in <input>, <applet>, and one or two depreciated tags. The attribute is expressed as, alt="". When required, the value is placed between the quotation marks.

The alt="" attribute may be confused with the title="" attribute. Foolish, we know. Some desktop browsers may display the alternative text as a tool-tip when a pointer hovers over the image. That doesn’t make the alt="" attribute a tool-tip! It only makes those browsers old and stupid.

2.2.2. Writing the alternative text value

To write an alternative text value, think about:

1. When the browser fails to load an image.
2. The browser will display the alternative text in its place.
3. What alternative text will enable our users to experience the image context and content without the image displaying?

Alternative text can be any length. Research suggests AT users can become irritated by long alternative texts. The quality of the writing may have been at fault. When considered too long, we can add a link to alternative content that describes the image in full. The alternative content may be on the same or a new page.

When the image content is also in the copy text, then their alternative text value may be shorter. As always, test your assumptions.

Search Engine Optimization (SEO) is important to our business. It relies on image optimization. Alternative texts encourage Search engines to surface our brand from the image results. For example, "the myBrand myDeviceName payment transaction card reader terminal" may match more search queries than "A payment terminal".

2.2.3. Help deciding on the alternative text

W3C's Web Accessibility Initiative (WAI) offer An alt Decision Tree that describes how and where to include alternative texts.

2.2.4. Testing alternative text

You can test the effectiveness of your alternative text in your browser's code inspector.

Don't worry! This test is non-destructive. Refresh your browser to erase your changes.

2.3. Consider alternative content

Alternative content should:

• Be available to users regardless of their ability.
• Meet a range of user and learner preferences.
• Act as a contingency for when an informative image or media is unavailable.

2.3.1. Primary content

Our images all illustrate. When they inform with diagrams or image text, the ideal is for the image to repeat content available as copy text nearby on the page.

In effect, the image is the alternative content channel.

Example Purchase Order Flow

1. Our Customer enters the store and enquires after an item.
2. The Store checks the stock against the Warehouse inventory.
   1. The Warehouse is out of stock.
   2. The Warehouse informs the Store. The Store informs our Customer that the item is not available and may be ordered with a deposit.
3. Our Customer places the order, reads the Terms and Conditions, and pays the deposit.
   1. The Store confirms the order with the Warehouse.
   2. The Warehouse places the order with the Supplier.
4. The Supplier arranges despatch.
   1. The Supplier confirms the order and advises of the expected delivery date.
   2. The Warehouse informs the Store of the expected delivery date.
   3. The Store informs our Customer of the expected delivery date.

Explanation

The image is given an empty alt attribute as the content is available in the adjacent copy text. The image acts as an alternative information channel for users with a visual learning preference.

When the image becomes too small to read in narrower viewports, or fails to display, then the content remains available in the main text.

Note: Designers and writers can determine whether the image precedes the copy text in the HTML or visual flows. CSS {display:grid;} and {display:flex;} can update the visual order without changing the DOM architecture or Accessibility Tree).

The HTML

<h4>Purchase Order Flow</h4>
<img src="img/image-optimization/example-flow.png" width="800" height="885" alt="">
<ol>
  <li>Customer enters the store and enquires after an item.</li>
  <li>The Store checks the stock against the Warehouse inventory.
	<ol type="a">
…</ol>

Read the WAI Web Accessibility Tutorial, Complex Images for more examples.

Strategies

We can break complex info-graphics or flow diagrams into component parts and punctuate them with explanatory text. Be mindful that:

• Users may prefer to see the topic as an overview and in one piece.
• Using multiple images may affect page loading performance.
• To avoid repetition or to reduce the amount of real estate, we may need to Show and Hide content, which requires an overhead in effective design, testing, and implementation.

<a href="directory/file.png" download>
	<img src="directory/file.png" width="800" height="266" alt="Process flow" title="Save the image to your device">
</a>

<a href="directory/file.pdf" download>
	<img src="directory/file.png" width="800" height="266" alt="Process flow" title="Download an accessible PDF version of this image content">
</a>

<img src="directory/file.png" width="800" height="266" alt="Process flow">
<p><a href="directory/file.pdf" download>Save the image as an accessible PDF</a></p>

Video

Video (also discussed later in Section 2.3.3.) should be produced with Closed Captioning (CC) and may have descriptions added in some cases. Many designers provide text transcriptions created from the video audio track. Each strategy is valid and "accessible" and may fail to offer a comparable experience to watching the video for some users.

Transcripts often fail to offer the same nuance as a video and can be difficult to understand without the visual context. More work can be done.

Branching scenario videos used to instruct users can be transcribed with additional explanatory text and formatted using HTML. This enables linking between decision points and trees.

Designing the experience for everyone sometimes needs different designs for someone.

2.3.2. Images replacing text content

Images can replace in-line copy text using two key strategies:

1. HTML methods of replacing the HTML text with an HTML image and alt attribute.
2. CSS methods displacing the text with an image called by the CSS.

HTML Method

Both of the following HTML examples are valid HTML and meet WCAG and WAI guidelines. Although accessible, the experience may be improved using CSS.

<h2><img src="overview-icon.svg" width="32" height="32" alt="">Overview</h2>

<h2><img src="overview-icon.svg" width="32" height="32" alt="Overview" role="text"></h2>

CSS methods

CSS can be employed as demonstrated in the following example. Accessibile UX is not all HTML, HTML, HTML!

<h2 id="uniqueId">
	<span>Heading Copy Text</span>
</h2>

#uniqueID {
width:12em;
height:3em;
background: transparent url("directory/image-12-x-3.png") no-repeat top left;
background-size: contain;
}

#uniqueID span {
position:absolute;
top:0;
left:-9999px;
width:1px;
height:1px;
padding:0;
color:transparent;
}

<h2 id="uniqueId">Heading Copy Text</h2>

#uniqueID {
padding:inherit inherit inherit 1em;
}
#uniqueID:before {
content:"";
width:32px;
height:32px;
background: transparent url("directory/onstage-spritesheet.png") no-repeat 34px 68px;

2.3.3. Captions

Captions are our opportunity to briefly describe the content and relevance of an image. Unlike alternative texts, captions are always available to our user.

Combined, captions and alternative texts offer a comparable experience to seeing the image.

The figcaption is valid and meets WCAG and WAI guidelines although browser reliability may be in question? Adding a heading to the caption may improve the situation. (Read the PowerMapper screen-reader figcaption test).

Example dieUX Cartoon strip: 'Accessibility is Pink'

A cartoon strip by Pat Godfrey

Explanation

The alternative text describes what the image is. The figcaption describe the cartoon strip's content and context to provide a near equivalent experience of the cartoon for our screen-reader and Braille display users.

The image is also set up to display in portrait in narrower viewports.

The HTML

<h4><span class="hidden"> dieUX </span>Cartoon strip: 'Accessibility is Pink'</h4>
<p>A cartoon strip by Pat Godfrey</p>
<img src="img/image-optimization/dieUX-20190314-accessible-in-pink.png" alt="dieUX cartoon strip by Pat Godfrey - What does a UX designer do exactly?" height="316" width="794" />
<figcaption>
<p>Our seasoned <abbr title="User Experience">UX</abbr> designer's colleague…

Note: Designers and writers can determine whether the image precedes the caption in the HTML or visual flow. CSS {display:grid;} and {display:flex;} can update the visual order without changing the DOM architecture or Accessibility Tree).

2.3.4. Planning alternative pages and files

Alternative pages are linked to from near the image or media. They are useful when the visual content is long. An example is a video or overly complex info-graphic. Alternative pages must be justified against the additional work our user needs to do to navigate to and return from them.

Note: Images require a suitable alternative text whether empty or not.

Often described as 'text only', alternative content pages are not featureless. They should aim to engage as you carefully crafted info-graphic has been designed to do.

Images can still be used when required. The alternative content may be any user's preference. Use the content information architecture and learning strategies that are appropriate to your audience.

I did mention user research, personas, and the like in Step 1?

Reference this article

Godfrey, P. (Year, Month Day). Article Heading. Retrieved Month Day, Year, from URL

❮ Step 1 Step 3 ❯

Sponsored Ads