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.
Important
Always back up your image files before optimizing them.
Shared Learning
Flag this content to your friends, connections, and colleagues.
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.
To consider
Content and images can be contained by a <figure>
element. The HTML5 specification directs that when a <figure>
is removed, it does not affect the content flow of the document.
Can we adhere to that?
2.2. Consider alternative text
Alternative texts serve two main purposes:
- When an image fails to load, the browser informs our user of its alternative text.
- To enable assistive technologies like screen readers to announce the image content to people who cannot otherwise perceive it.
- 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.
-
In this first example, the
alt=""
is "empty" (containing only a space) so AT will not announce the image and browsers may or may not show the image is missing.<img src="../imageName.png" width="600" height="200" alt="">
-
In this second coded example, the image will never display and you will get the sense of what alt text looks like in the browser when an image fails to display.
<img src="../imageName.png" width="600" height="200" alt="Example alternative text">
Hint
As with any design, it depends on the browser when and how the alternative text is displayed. A border has been added to the previous example for clarity.
In Chrome, the alt text appears inside a box with an image icon. In Firefox, the alternative text appears as normal copy text: a good reason to write strong alternative text copy.
2.2.2. Writing the alternative text value
To write an alternative text value, think about:
- When the browser fails to load an image.
- The browser will display the alternative text in its place.
- 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.
- Does the image contain text?
- Yes:
- …and the text is also present as real text nearby.
Use an empty
alt
attribute. See Decorative Images. - …and the text is only shown for visual effects.
Use an empty
alt
attribute. See Decorative Images. - …and the text has a specific function, for example is an icon.
Use the
alt
attribute to communicate the function of the image. See Functional Images. - …and the text in the image is not present otherwise. Use the
alt
attribute to include the text of the image. See Images of Text.
- …and the text is also present as real text nearby.
Use an empty
- No:
- Continue.
- Yes:
- Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn't there?
- Yes:
- Use the
alt
attribute to communicate the destination of the link or action taken. See Functional Images.
- Use the
- No:
- Continue.
- Yes:
- Does the image contribute meaning to the current page or context?
- Yes:
- …and it's a simple graphic or photograph.
Use a brief description of the image in a way that conveys that meaning in the
alt
attribute. See Informative Images. - …and it's a graph or complex piece of information. Include the information contained in the image elsewhere on the page. See Complex Images.
- …and it shows content that is redundant to real text nearby.
Use an empty
alt
attribute. See (redundant) Functional Images.
- …and it's a simple graphic or photograph.
Use a brief description of the image in a way that conveys that meaning in the
- No:
- Continue.
- Yes:
- Is the image purely decorative or not intended for the user?
- Yes:
- Use an empty
alt
attribute. See Decorative Images.
- Use an empty
- No:
- Continue.
- Yes:
- Is the image's use not listed above or it's unclear what
alt
text to provide?- This decision tree does not cover all cases. For detailed information on the provision of text alternatives refer to the Image Concepts Page.
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.
Condition | Procedure |
---|---|
Your browser's code inspector |
|
In your CMS |
|
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.
Hint
Alternative content includes:
- primary content available in the page or document text copy.
- Alternative text attributes (see Section 2.2 above).
- Captions.
- Alternative pages or documents.
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
![](img/image-optimization/example-flow.png)
- Our Customer enters the store and enquires after an item.
- The Store checks the stock against the Warehouse inventory.
- The Warehouse is out of stock.
- The Warehouse informs the Store. The Store informs our Customer that the item is not available and may be ordered with a deposit.
- Our Customer places the order, reads the Terms and Conditions, and pays the deposit.
- The Store confirms the order with the Warehouse.
- The Warehouse places the order with the Supplier.
- The Supplier arranges despatch.
- The Supplier confirms the order and advises of the expected delivery date.
- The Warehouse informs the Store of the expected delivery date.
- 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.
Hint
The CMS or our user may open images and other media file in a new browser tab or window and, or elect to Save them to their device.
We can direct that the image (or other file) is downloaded when its link is activated. Simply place the download
attribute at the end of the anchor link. How we do that depends on our users, our use case, and platform restrictions. Here are some ideas.
Example HTML link with the download attribute
<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>
We can also offer the download as an accessible file type such as a PDF with copy text. Remember to let our user know what will happen in the link. The title
attribute can help.
Example HTML link to PDF
<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>
An alternative HTML strategy
<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:
- HTML methods of replacing the HTML text with an HTML image and
alt
attribute. - 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.
Example HTML heading text with decorative image
<h2><img src="overview-icon.svg" width="32" height="32" alt="">Overview</h2>
Example HTML heading using a functional image
<h2><img src="overview-icon.svg" width="32" height="32" alt="Overview" role="text"></h2>
Note: in his article on this topic, O'Hara (2017) advises the use of the ARIA's uncertain role="text"
on the image when its role is…um…text. Investigate. The ARIA role="text"
landscape is still forming. (Visit WAI's ARIA Issue 435 and Mozilla's Developer Portal, 'WAI-ARIA Roles' for more uncertainty.)
Test
Design with care. The second example may create a higher cognitive load for screen-reader users when the img
and alt
attribute add to the verbosity of the speech synthesis.
Read the PowerMapper screen-reader test where the image alt
attribute is found able to replace copy text for all screen-readers.
CSS methods
CSS can be employed as demonstrated in the following example. Accessibile UX is not all HTML, HTML, HTML!
The procedure is as follows:
- Mark up the element with the copy text. Here, we use a heading level two (
h2
). - Contain the copy text within a span.
- Give the span a
class=""
attribute orid=""
for the CSS declaration to act upon. - Displace the span accessibly off the viewport.
- Give the element a CSS
background:
declaration.
The result is for screen-readers to announce the h2
copy text and for visual users to observe the image.
Using a similar syntax, we can also use CSS to add an icon to the h2
, or to the span using a pseudo element, i.e. :before
.
HTML
<h2 id="uniqueId"> <span>Heading Copy Text</span> </h2>
CSS
#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; }
An icon can be added to the h2
using a pseudo element without the need for alternative content when the heading and the icon share the same semantic. For example, use :before
.
HTML
<h2 id="uniqueId">Heading Copy Text</h2>
CSS
#uniqueID { padding:inherit inherit inherit 1em; } #uniqueID:before { content:""; width:32px; height:32px; background: transparent url("directory/onstage-spritesheet.png") no-repeat 34px 68px;
Tip
The key is to know what strategy to use and when to use it.
Always consider the comparable experience of the fully able when compared to that of the less-able user. Narrow the gap!
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
![dieUX cartoon strip by Pat Godfrey - What does a UX designer do exactly?](img/image-optimization/dieUX-20190314-accessible-in-pink.png)
Our seasoned UX designer's colleague tells him that the Director wants their app design to be accessible.
Our designer responds, "We use semantic architecture, ARIA controls, clear typography as standard…"
The colleague stops him short and announces, "I was thinking more of something in pink?"
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).
Condition | Procedure |
---|---|
Your browser's code inspector |
|
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?
Watch Brad Allen's cautionary story explaining borrowed beliefs or alternatively, read the Borrowed Beliefs text article.
Reference this article
Godfrey, P. (Year, Month Day). Article Heading. Retrieved Month Day, Year, from URL