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

Humans Accessibility Summit 2014

Perceivable
Information and user interface components must be presentable to users in ways they can perceive.

Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

alt="#A11YSUMMIT. Buy tickets">

Video – captions and video descriptions action
Audio - transcripts

An accessible UX principle:
Accessible Media: Appeal to all Senses
A Web for Everyone by Sarah Horton and Whitney Quesenbery
http://rosenfeldmedia.com/books/a-web-for-everyone/

the meaning of the image without it.

images are missing or turned off
For translations

Personas from A Web for Everyone by Sarah Horton and Whitney Quesenbery
http://rosenfeldmedia.com/books/a-web-for-everyone/resources/

or bad...or even it it's there.
Even bad alt text passes accessibility checkers.

properties sheet
navigate to the right page
to enter the alt text

over and over and over for each image

the wrong time, and in the wrong way.

text

the page make sense without it?
What kind of information is it?

information Describe it
Nothing new Ignore it

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

4 Syllables - http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/

Sept 8, 2014) http://rawgit.com/w3c/alt-techniques/master/index.html

and caption together

Example from: http://rawgit.com/w3c/alt-techniques/master/index.html#m6

will they know?

image fit into the page?

What other information is around the image?

(stylistic) voice of the site, in how images are voiced (by assistive technology).

Functional?
Descriptive?
Emotional?

Credit: J. and K. Hollingsworth/USFWS

shown in the image says
Red Fox (Vulpes vulpes)
Description
Red foxes are a rusty reddish color on the upper side of their body and tail. They have a white underside, chin and throat. Their tail is very bushy with a characteristic white tip, and they have prominent pointed ears. The backs of the ears, lower legs and feet are black. Other than the common rusty red, red foxes have three different color variations: a black phase where they are almost completely black, a silver phase in which they are black with silver-tipped hairs, and a "cross" phase where individuals are reddish brown with a dark cross across their shoulders. Adults typically stand 15 to 16 inches from the ground and are 35 to 41 inches in length. They can weigh between 8 and 15 pounds.

caption:

From left to right: 1. Monarch butterfly on a New England aster, credit: Greg Thompson/USFWS 2. Red fox, credit: John & Karen Hollingsworth 3. Eastern brook trout, credit: USFWS Click image for full-size.

Applying 21st Century Toxicology to Green Chemical and Material Design. September 20-21, 2011”

group on Facebook” "@UXPA_Int on Twitter" "UXPA's LinkedIN profile"

have empty alt text.
If they are clickable make them part of the text link.

alt="Photo of Caroline">
or

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.”

& Karen Hollingsworth

Alt text: Red Fox as Sachuest Point NWR. Credit J and K Hollingsworth

Chan is an alumnus of the public health school, having earned master’s and doctorate degrees in the 1970s

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.

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.

The caption reads: Example snapshots of personas demonstrate Spanish-speaking users’ language needs and preferences, as well as medical literacy, web skills, and other relevant characteristics. Read the text in this image."

The link points to a grey box below

a data table.

The alt text:
"Bar chart of data in table below"

The title:
"More Education Means More Money"

http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21

and CSS so the text is text.

Not as easy to do, but a better experience for everyone.

http://simplyaccessible.com/article/text-is-text/ and
http://apps.washingtonpost.com/g/page/national/the-health-hazards-of-sitting/750/

(WebAIM)
5-15 words? (Many sources)
30-50 words (2-3 sentences)? (W3C Draft)

long prose).

Avoid noise words
"Image of.. "
"This is a..."

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

manuscript makes it easier to visualize the flow of the words.

This is the text in the image:
...mall, we realized that even everyday items such as clothing and shoes would also be bought in installments (see Figure 1). A light bulb went off for us—not only was it common to pay in installments, but it applied to items we did not expect, too.
 
Alt text: Picture of shoes with installment pricing sign
Figure 1. In a mall in Sao Paulo, our research team spotted more items sold in installments than we initially expected. Notice that the installment price is more visually prominent than the total price!

Add alt text to the writing workflow

a day (but if you don't start, you never get there)

Everyone with Sarah Horton
http://rosenfeldmedia.com/books/a-web-for-everyone/