Writing great alt text презентация

Writing great alt text Whitney Quesenbery Center for Civic Design @civicdesign | @whitneyq Environments for Humans Accessibility Summit 2014

The basics Alt means alternative

Alt text is... A principle of accessibility

Alt text is... A requirement for accessibility

Alt text is... Code. Specifically, an attribute in the image element

Alt text is... Part of appealing to all senses. Images – alternative text Video – captions and video descriptions action Audio - transcripts

Because technology needs it Screen readers (and other assistive technology) can't interpret the meaning of the image without it.

Because people need it People who use screen readers and other AT When images are missing or turned off For translations

The problem Why are we (still) talking about alt text?

Alt text is invisible content It's hard to tell if it's good or bad...or even it it's there. Even bad alt text passes accessibility checkers.

Is it code or content? Who "owns" the alt text? Developers Art directors Authors

The tools don't help It's no fun to find each image click open the properties sheet navigate to the right page to enter the alt text over and over and over for each image

Or they get in the way They ask for the information at the wrong time, and in the wrong way.

The usual rules A simple way to decide how to write alt text

The simplest guideline Start with this question: What information does this image add? Does the page make sense without it? What kind of information is it?

If the image contains Text Repeat the words Visual information Explain it Sensory information Describe it Nothing new Ignore it

A simple decision tree What is the role of the image? Decorative? Use null alt text or CSS Sensory? Write a descriptive identificaation Informative? No new info? Use null alt text Simple or a link? Write short alt text Complex image? Create long text Section of the same page Linked page Longdesc

Or, a detailed analysis

On the HTML5 standards horizon: <figure> and <figcaption> Keeps the image, alt text, and caption together

A writer's approach Start with a content strategy

1. Know your audience What knowledge or background do they have? What terminology will they know?

2. Context, not just rules What is the reader's goal? How does the image fit into the page? What other information is around the image?

3. Create a consistent 'voice' Make the alt text part of the (stylistic) voice of the site, in how images are voiced (by assistive technology). Functional? Descriptive? Emotional?

Consider the fox What should the alt text for this image be?

What if we see it on this page?

Or on this one

Examples...examples...and more examples

Get the basics right Repeat the text in the image. Alt text: “Webcast. Applying 21st Century Toxicology to Green Chemical and Material Design. September 20-21, 2011”

Get the basics right Identify the target of a link Alt text: “UXPA group on Facebook” "@UXPA_Int on Twitter" "UXPA's LinkedIN profile"

Don't create noise When images are used like a bullet, they can have empty alt text. If they are clickable make them part of the text link.

Don't hide meaningful images Is a profile photo part of the content?

Make captions and alt text work together The caption: “Birnbaum, right, joined Collins at front stage as she accepted a Director’s Award on behalf of employees honored for their contributions to the Deepwater Horizon Gulf Oil Spill Response. (Photo courtesy of NIH)” The alt text: “NIEHS/NTP Director Linda Birnbaum, Ph.D. accepts award from NIH Director Francis Collins, M.D., Ph.D.”

Don't hide information in the alt text

Don't just repeat the same text

Consider the surrounding text The caption: “Figure 1: The ABC of research methods” The alt text: “ABC diagram.” or "ABC diagram sketched on a chalkboard.” or “A diagram sketched on a chalkboard as a triangle. Top: Attitude. Right: Behavior. Left: Comprehension.

When the text is long... Put the text on the same page, and link to it. The alt text: “Two personas" The caption includes a link: “Read the text in this image” The text is in a box at the end of the article.

When the information is in a chart... Combine the visual chart with a data table. The alt text: "Bar chart of data in table below" The title: "More Education Means More Money"

When the text is in an infographic.. Design the infographic in HTML and CSS so the text is text. Not as easy to do, but a better experience for everyone.

Workflow Make alt text part of the writing process

How long should alt text be? No more than a few words? (WebAIM) 5-15 words? (Many sources) 30-50 words (2-3 sentences)? (W3C Draft)

Keep it short Focus on the important words (no prizes for writing long prose). Avoid noise words "Image of.. " "This is a..."

Be consistent Each image, each page, each section is all part of your site or app. Use the same approach everywhere, especially for functional elements: Providing additional text Locating explanatory text or data Identifying figures in the text

Add alt text to the writing workflow Write the text, caption, alt text together Hiding the image in the manuscript makes it easier to visualize the flow of the words.

This is change! Admit it Embrace it Set a reasonable pace Rome wasn't built in a day (but if you don't start, you never get there)

Make the web a better place. Write some (great) alt text today!

Get in touch! Whitney Quesenbery [email protected] @whitneyq http://civicdesign.org @civicdesign

Thank you.