Accessibility Summit 2014: Writing Great Alt Text

At the Accessibility Summit 2014 conference, user research expert Whitney Quesenbery discussed alt text, explained why we need it, and shared useful tips for creating better alt text.

Here are my notes, and some of the social media discussion, from her Writing Great Alt Text presentation:

What is Alt Text and Why Do We Need It?

• Alt stands for alternative
• When we add an image to a web page or application, we include text that allows people who can’t see the images to know what the image is about
• Alt text is a principle of accessibility. From Web Content Accessibility Guidelines 2.0, Principle 1: Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
• Alt text is code, included as an image attribute.
• Alt text is about appealing to all senses. We need to give alternatives so that no matter what sense you’re using to access the web, you can have the benefit of all the content.
  
  When we have images, we need alt text.
  
  When we have videos/animations, we need captions, video descriptions, transcripts.
  
  When we have audio, we need transcripts.
• Assistive technology needs alt text to describe the image.
  We don’t name our file names semantically, what does fb-1165.jpg mean?
• The most important reason we do alt text is because people need it. People who have low vision, are blind, prefer uncluttered pages, or who speak English as a second language all benefit from alt text.

Why Is There So Much Bad Alt Text?

• It seems simple to add alt text. Unfortunately, it’s not implemented well. And everyone has an opinion.
• Alt text is invisible content. Unless you inspect the element in the source code, you can’t see it.
• Bad alt text can pass automated accessibility checkers
• Who owns alt text? The developer, designer, programmer? It often falls between the cracks.
• Adding alt text to content is a workflow nightmare. Find the image, open the properties, navigate to right page, enter the alt text. For every image.
• Start simply: what information does this image add?
• For images with text, repeat the words. For images with visual info, explain it. For images with sensory info, describe it. And if it’s a decorative image, ignore it.
• When a document is converted to a PDF file, and the document images didn’t include alternative text, it’s cumbersome to add alt text to the PDF images.

  Oh, yes. Anyone who has added ALT text to a PDF file knows it’s tedious work. ~ @whitneyq #a11ysummit

  — Deborah Edwards-Oñoro (@redcrew) September 10, 2014

• Are you using figure or figcaption? If you do, you can manage the image, alt text, and caption together. According to CanIUse, there’s good support for figure and figcaption, with only Internet Explorer 8 and Opera Mini not providing support.

Where Can I Start?

• Good alt text starts with a content strategy
• Know your audience. What terminology do they know?
• Context is crucial. What is the reader’s goal? What’s around the image?
• Depending on context, the same image may have different ALT text
• Use a consistent voice

Tips for Writing Alt Text

• Repeat the text in an image
• Be clear about the target of an image link. Identify the target. Example: for a Facebook icon, alt text could be “UXPA group on Facebook.”
• Images used as bullet points in a list can have empty alt text
• If you have a caption and alt text for same image, don’t repeat the same text in both
• When info is in a chart, combine the visual chart with a data table
• When text is long, put the text on the same page, and link to it
• If the text is in an infographic that’s an image, repeat the text under the infographic. Better yet: create your infographic in HTML and CSS, so the text is actual text and not an image.

Add Alt Text to Your Workflow

• Make alt text part of the writing process
• Keep alt text short. Determine how long alt text should be (two to three words, two to three sentences?)
• Write the text, caption, and alt text together. Tip: hiding the image in the text may make it easier

I loved how Whitney ended her talk:

Every time you write alt text, a fairy gets their wings.
And there is one less inaccessible image in the world.

Thank you, Whitney for uploading your Writing Great Alt Text presentation to Slideshare.