EqTDs: Making Alternative Text More Functional

EqTDs: Making Alternative Text More Functional

Denis Anson, MS, OTRRoger O. Smith, PH.D.

Aura Hirshcman, MS, CRC

Denis Anson, MS, OTRRoger O. Smith, PH.D.

Aura Hirshcman, MS, CRC

The Current “Standard”The Current “Standard”

The first formal description of HTML (HTML 2.0) included a requirement that any non-text element have a text equivalent

In 1995, many people still used text-only browsers to access the World Wide Web

The early idea of the web was that it would be used primarily for text, while graphics would be accessed via Archie, Veronica, and other repository tools

The Current “Standard”The Current “Standard”

Because many users of the World Wide Web were using text-only browsers at the time, they would not have access to information presented only as a graphic

Information should, therefore, be provided both in graphical and text form, so that all browsers would have access to it

The Current “Standard”The Current “Standard”

A second group of “alt” text users were those with low-vision or blindness, who couldn’t see the graphics, no matter the browser

There is nothing “magical” about text, but it can be converted to a form that virtually anyone can get access to

The Current “Standard”The Current “Standard”

Because the text equivalent is to be used in place of the graphic, it is referred to as “alternative text.”

Because it is now most commonly (and incorrectly) associated with blindness, alt-text is also called an alt-text description.

This term is part of the problem, as we will see

When the Current Standard Fails

When the Current Standard Fails

Some common errors in writing alt-text

Telling me what the image tells sighted people

“A diagram showing the website development process”

When the Current Standard Fails

When the Current Standard Fails

Some common errors in writing alt-text

Describing the image

“This image includes four circles connected by lines. The red circle at the top is above a light blue, a dark blue, and a green circle. The light blue circle is connected to the red circle by...”

When the Current Standard Fails

When the Current Standard Fails

Some common errors in writing alt-text

Repeating the file name and size

<img src="images/x123001.gif" alt="x123001.gif" />

When the Current Standard Fails

When the Current Standard Fails

Some common errors in writing alt-text

Alt-text that isn’t needed (on eye-candy)

<img src=”redball.gif” alt=”Red Ball”/>Vegetable broth</br>

The Goal of Alt-TextThe Goal of Alt-Text

The goal of alt-text is to provide the information of the image to those who do not have access to the image

But sometimes it can be difficult to extract the “information” of the image.

What is the correct Alt-Text Here?

What is the correct Alt-Text Here?

Data vrs. InformationData vrs.

InformationDec 1, 2011382.54389.00380.75387.9313,827,900387.93Nov 30, 2011381.29382.28378.30382.2014,497,800382.20Nov 29, 2011375.84378.83370.20373.2013,423,400373.20Nov 28, 2011372.35376.72370.33376.1212,371,900376.12Nov 25, 2011368.42371.15363.32363.579,098,600363.57Nov 23, 2011374.51375.84366.88366.9915,295,400366.99Nov 22, 2011371.02377.93370.94376.5114,607,900376.51Nov 21, 2011370.40371.68365.91369.0115,999,300369.01Nov 18, 2011378.92379.99374.88374.9413,283,500374.94Nov 17, 2011383.98384.58375.50377.4117,139,300377.41Nov 16, 2011389.25391.14384.32384.7712,471,800384.77Nov 15, 2011380.80389.50379.45388.8315,386,100388.83Nov 14, 2011383.52385.25378.20379.2615,460,900379.26Nov 11, 2011386.61388.70380.26384.6223,349,500384.62Nov 10, 2011397.03397.21382.15385.2226,598,300385.22Nov 9, 2011396.97400.89394.23395.2819,953,000395.28Nov 8, 2011402.21408.00401.56406.2314,301,500406.23

Information of the Graph

Information of the Graph

After performing at very low level for many years, in 2004, Apple’s stock began to an accelerating climb that shows no sign of peaking

When the Current Standard Fails

When the Current Standard Fails

Sighted users, when confronted with a graphic, have the option of ignoring it, or coming back to examine it later

When the Current Standard Fails

When the Current Standard Fails

A person using an screen reader [The sun setting over the Pacific ocean on a clear evening. The ocean is very smooth, and the sky and water are colored various shades of gold. There are evergreen shrubs in the foreground.] will have the flow of the document disrupted.

The State of AltThe State of Alt

Many blind people find alt-text to be worse than useless, it interrupts reading and interferes with understanding

When alt-text is included (often it is not), the information provided is poor

Sometimes, Doing the Wrong Thing is

Right

Sometimes, Doing the Wrong Thing is

RightThe alt-text implementation standard specifies that it is to be “rendered in place of” the non-text element

Microsoft’s Internet Explorer chose to show the alt-text when the mouse was hovered over an image (which is worthless to a blind person)

This led to a valuable discovery

Sometimes, Doing the Wrong Thing is

Right

Sometimes, Doing the Wrong Thing is

Right

A significant number of people have dysgraphia, a condition that makes interpretation of images difficult

Pairing an image with its text equivalent can enhance comprehension

Why the Current Standard Fails

Why the Current Standard Fails

Most authors don’t distinguish between what an image looks like, and what it does

What information does the image convey

We Need A Model for Alt-Text that Is More Useful

We Need A Model for Alt-Text that Is More Useful

The Equivalent Text Description Model is a layered approach to non-text content designed to provide a more functional approach.

It also uses an expanded idea of the role of alt-text to be alternative and augmentative text descriptions

The EqTD ModelThe EqTD Model

Brief Description

Essential Information

Detailed Description

Augmentative Description

Brief DescriptionBrief DescriptionThe equivalent of a quick glance at the graphic

The Brief Description provides just enough information for the reader to know if s/he should explore the image now, or defer it until later

The Brief Description should be placed in the alt-attribute of the image link

Essential Information

Essential Information

The essential information is text that replaces the function of the image or non-text element

It should contain the information that the author wished to convey with the image

This may be fairly long, if there is a lot of information in the image

The essential information should be placed in the longdesc of the image

The Content of an Essential Description varies with

application

The Content of an Essential Description varies with

application

Consider how different applications of this poster might have different content

The brief description might say “J. Howard Miller’s 'We Can Do It!' poster.”

The Content of an Essential Information varies with

application

The Content of an Essential Information varies with

applicationThe Essential Information in a Women’s Studies Class

"The expression of the woman in this poster shows strong determination and competence, in contrast to the 'weaker sex' image of women at the time."

The Content of an Essential Information varies with

application

The Content of an Essential Information varies with

applicationThe Essential Information in a US History Class

This image of a strong, determined woman wearing work clothes, saying “We can do it” conveys the ability of women to assist the war effort in jobs previously reserved for men.

The Content of an Essential Information varies with

application

The Content of an Essential Information varies with

applicationThe Essential Information in an Art and Design Class

The dark blue of the woman’s shirt, the bold red of her scarf, and the bold yellow gradient colors of the background all convey power and strength.

Detailed DescriptionDetailed Description

The purpose of the detailed description is to provide the individual who doesn’t have access to the image with enough information to describe it to someone else, or to repurpose the graphic in a different application

The detailed description is a verbal picture

The Detailed Description

The Detailed Description

J. Howard Miller’s “We Can Do It!” poster shows a mature young woman, facing right, with her sleeves rolled above the elbow, her elbow flexed, and her right hand in a fist. She is wearing a red scarf with white polka-dots over her hair, and has an expression of competence and determination. Above her head, in a dialog balloon, are the words “We Can Do It!”

To convey the idea that doing “a man’s work” does not require sacrifice of her feminine nature, the woman is wearing a subtle shade of lipstick and eyeliner. Her outline in the poster shows a suggestion of her figure, while not suggesting or emulating the pinup girl posters of the era.

A verbal imageA verbal image

A broad expanse of the river was turned to blood; in the middle distance the red hue brightened into gold, through which a solitary log came floating, black and conspicuous; in one place a long, slanting mark lay sparkling upon the water; in another the surface was broken by boiling, tumbling rings,that were as many-tinted as an opal; where the ruddy flush was faintest, was a smooth spot that was covered with graceful circles and radiating lines, ever so delicately traced; the shore on our left was densely wooded, and the somber shadow that fell from this forest was broken in one place by a long, ruffled trail that shone like silver; and high above the forest wall a clean-stemmed dead tree waved a single leafy bough that glowed like a flame in the unobstructed splendor that was flowing from the sun.

The Detailed Description

The Detailed Description

Not all of us are great writers, and most of us can’t really convey an image

Some images express ideas that do not translate readily to language

Non-Language Content

Non-Language Content

Non-Language Content

Non-Language Content

Non-Language Content

Non-Language Content

Augmentative Text Description

Augmentative Text Description

Augmentative text is provided for those who have difficulty interpreting graphics

Unlike the other parts of this model, it is displayed along with the graphic

The augmentative text calls the attention of the reader to salient points in the image or other element

This can be placed in the title attribute which is shown on mouse-over

The Content of an Essential Information varies with

application

The Content of an Essential Information varies with

applicationThe Augmentative in an Art and Design Class

Notice that the color of the woman’s shirt is echoed in the balloon. Notice the strong primary colors of the shirt, the scarf, and the background.

The Advantages of EqTDs

The Advantages of EqTDs

Access to documents is smoother

The Brief Description, serving as a quick glance, lets the reader decide when to examine the non-text element

Provides the essential information succinctly

The Essential Information conveys the information of the graphic

The Advantages of EqTDs

The Advantages of EqTDs

Provides more information appropriately

The Detailed Description is provided to convey visual content after the information is provided

Supports cognitively as well as visually impaired people

The Augmentative Text Description assists with interpreting graphics

The Weakness of EqTDs

The Weakness of EqTDs

EqTDs take more effort and more time to do well than Alt-Text

Most people can’t or won’t make appropriate alt-text

The chances of these same people doing appropriate EqTDs is almost nil

A Possible SolutionA Possible SolutionAutomatic EqTD creation

A web-based service that authors would use

On inserting an image, the service would examine the context and the image

It would present a short list of possible EqTDs to the author

The author could use one of these, or use them as a model to write his/her own