How to describe complex images for accessibility
Download
1 / 65

How to Describe Complex Images for Accessibility - PowerPoint PPT Presentation


  • 77 Views
  • Uploaded on

How to Describe Complex Images for Accessibility. Presented by the DIAGRAM Center Bryan Gould WGBH National Center for Accessible Media. Introduction Describing Complex Images: Guidelines Describing Complex Images: Examples Adding Image Description to Digital Media

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' How to Describe Complex Images for Accessibility' - sutton


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
How to describe complex images for accessibility
How to Describe Complex Images for Accessibility

Presented by the DIAGRAM Center

Bryan Gould

WGBH National Center for Accessible Media


Introduction

Describing Complex Images: Guidelines

Describing Complex Images: Examples

Adding Image Description to Digital Media

DIAGRAM Tools & Resources

Alternatives: Recorded, Tactile, Haptic & Smart Images


Digital Image And Graphic Resources

for AccessibleMaterials

  • 5-year Research & Development Center

  • Funded by Department of Education, Office of Special Education Programs (OSEP)

  • Awarded to Benetech along with partners:

    • NCAM

    • U.S. Fund for DAISY


Some diagram activities
(some) DIAGRAM Activities

  • Description guidelines training

  • Product evaluation matrices

  • User survey on reading technologies

  • Report on metadata images

  • SVG and 3D printing evaluation

  • Audio-Tactile usability study

  • POET

  • Standard development: content model

  • Collaboration with Mathematics eText Research Center (MeTRC, U. of Oregon)

  • diagramcenter.org


Ncam est 1993
NCAM (est. 1993)

  • Research and Development

    • develops technical solutions

    • conducts research

    • promotes advocacy via outreach

    • supports national policy decisions


Accessible digital images
Accessible Digital Images

iBooks

WEBSITES

BOOKSHARE

ASSESMENTS



How to write descriptions
How to Write Descriptions

  • Be a subject matter expert.

  • Write well and take care to review spelling, grammar and punctuation.

  • Monitor length, vocabulary and sentence structure to minimize cognitive load.

  • Review image in context to ensure the proper tone, structure and vocabulary.

  • Have access reference materials.

  • Descriptions should be reviewed by someone who has not seen the image, to ensure clarity and effectiveness.


How to write descriptions1
How to Write Descriptions

The description author should consider three basic questions about each image in order to give effective and efficient description.

  • Why is the image there?

  • Who is the intended audience?

  • If there is no description what will the viewer miss?


STEM Description Guidelines

Four years of NSF-funded research produced guidelines for making STEM images accessible.

STEM = Science, Technology, Engineering and Math


Stem description guidelines
STEM Description Guidelines

Brevity

Data

Clarity

Drill-Down Organization

Tables, Lists & MathML


3 describing complex images examples
3. Describing Complex Images: Examples


Parts of a Complex Description:

Title

Construction of the Image

Summary or Overview

Data


Title

The line graph is entitled "FOREIGN TRADE OF COUNTRY X, 1968 through 1980, in United States dollars".

Construction

There are two lines on the graph, a dashed line labeled "Exports" and a solid line labeled "Imports".

The vertical axis is labeled "Billions of Dollars," beginning with zero to eighteen, in increments of 2. Note: one billion equals a one followed by 9 zeros.

The horizontal axis is labeled "Year" and lists all the years from 1968 through 1980.

Summary

The Exports line begins in 1968 at 3 billion dollars, rises steeply, then drops, then shoots up to 15.5 billion, then trails off to 10 billion in 1980.

The Imports line begins in 1968 at 2 billion and rises steadily to 8.75 billion in 1980, except for 2 minor dips.


  • Data

    • The data is provided in the following table. Figures are in billions of dollars.

    • All data are approximate.


Common types of complex images
Common Types of Complex Images

Straight to Table

Straight to List

Tons of Info!

Tons of Words!

Illustrations & Cartoons


Straight to table
Straight to Table


Table titled expanding education decreasing illiteracy
Table titled, Expanding Education/Decreasing Illiteracy


Straight to table list
Straight to Table / List


A bar chart shows funding in billions of dollars per year 2010
A bar chart shows funding in billions of dollars per year (2010)

  • Marshall Plan (1948-1951), $27 billion

  • Global Environment Facility lending (2009), $1 billion

  • Bill and Melinda Gates Foundation lending (2009), $3 billion

  • World Bank lending (2008), $39 billion

  • Foreign Aid budget of developed economies (2008), $125 billion

  • Millennium Development Goals financing gap (2003), $105 billion

  • Investment needs for universal modern energy (2009), $37 billion

  • UNFCC commitment, $100 billion


S traight to l ist
S (2010)traight to List



S traight to list
S (2010)traight to List?


  • A (2010)diagram titled, basic overview of energy and human life.

  • Going in the body:

    • Chemical energy

      • Carbohydrates

      • Fats

      • Others

  • Inside the body:

    • ATP

      • body’s “energy currency”

    • metabolism

  • Leaving the body:

    • chemical waste

      • carbon dioxide

      • water

    • heat

Unnecessarily

Complex!


A diagram titled, basic overview of energy and human life. The diagram shows chemical energy (carbohydrates, fats and others) going into a human body. Inside the body are ATP (body’s “energy currency”) and metabolism. Leaving the body are chemical waste (carbon dioxide and water) and heat.


Tons of info
Tons The diagram shows chemical energy (carbohydrates, fats and others) going into a human body. Inside the body are ATP (bodyof Info!


Title The diagram shows chemical energy (carbohydrates, fats and others) going into a human body. Inside the body are ATP (body

Little or None

Some

Much

Parts of a Complex Description:

Title

Construction of the Image

Summary or Overview

Data


Title The diagram shows chemical energy (carbohydrates, fats and others) going into a human body. Inside the body are ATP (body

Table

Map

Provide map as separate list.


Map of Electoral Votes The diagram shows chemical energy (carbohydrates, fats and others) going into a human body. Inside the body are ATP (body

Democratic: Won all states except those listed below (California was the only state to divide its electoral votes: 2 to Democratic and 11 to Progressive.)

Progressive: Washington, South Dakota, Minnesota, Michigan, Pennsylvania. (California: 11 to Progressive and 2 to Democratic.)

Republican: Vermont and Utah.

Socialist: None


States Won The diagram shows chemical energy (carbohydrates, fats and others) going into a human body. Inside the body are ATP (body

All except those listed below

WA, SD, MI MN, PA. CA…

VT and UT

None

Alternative approach: add map info to the table as a new column.


Break it down into parts The diagram shows chemical energy (carbohydrates, fats and others) going into a human body. Inside the body are ATP (body


Summary of Time Zones The diagram shows chemical energy (carbohydrates, fats and others) going into a human body. Inside the body are ATP (body


2. Summary of railroads by 1870, in relation to time zones, name key cities and the one transcontinental line (outlier.)



Tons of words
Tons name key cities.of Words!


Break it down into parts name key cities.

1

2

3


This is a vertical info-graphic, containing a header, footer, and three main sections between them. The header reads, 'FIND OUT IF YOU HAVE HEPATITIS C - IT COULD SAVE YOUR LIFE. SOME PEOPLE DON’T KNOW HOW OR WHEN THEY WERE INFECTED.' The first section below the header reads, "BORN FROM 1945-1965? People born from 1945-1965 are 5X MORE LIKELY TO BE INFECTED WITH HEPATITIS C. 3 OUT OF EVERY 4 people with Hepatitis C were born between these years.'


  • The next section contains a silhouette of a human figure with the liver highlighted. Two text circles connect to the liver with lines.

  • The text in the first circle reads, 'Up to 75% of people living with Hepatitis C DO NOT KNOW THEY ARE INFECTED.'

  • The second circle has an hourglass and text that reads, 'Many people can live with HEPATITIS C for DECADES WITH NO SYMPTOMS.'

  • Below the two text circles is a banner across the human silhouette’s abdomen. On the left side of the banner is a small to-do-list with a single item labeled 'Hep C Blood Test'. It is check-marked off. The banner text reads, 'CDC recommends anyone born from 1945-1965 GET TESTED'.


  • The final section before the footer has two columns, representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.

  • Under the 'Tested' column, text reads, 'KNOWING YOU HAVE HEPATITIS C can help you make important decisions about your health. Many people can get LIFESAVING CARE AND TREATMENT. Successful treatments can ELIMINATE THE VIRUS from the body.'

  • Under the 'Not Tested' column, the text reads, '60% of people with HEPATITIS C will develop SERIOUS LIVER PROBLEMS. Left untreated, HEPATITIS C can cause LIVER DAMAGE & LIVER FAILURE. HEPATITIS C is a leading cause of LIVER CANCER.

  • The footer has the logos for CDC-HHS and Know More Hepatitis on the right-hand side and text on the left that reads, 'Don’t go down the wrong path, talk to your doctor about getting tested. It could save your life.


Break it down into parts representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.


Illustrations & Cartoons representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.


Summarize
Summarize! representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.

Mostly blue and green

Mostly orange and red


Context
Context representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.

Requires specific description detail.


Cartoons
Cartoons representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.

Setting

Characters

Details as needed

Caption


Data visualization
Data Visualization representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.


4 adding image description to digital media
4. representing a choice of two paths - one, to get Tested; the other column/path, to not get tested. Adding Image Description to Digital Media


Adding Image Description representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.

  • HTML & EPUB

    • alt

    • longdesc

    • ARIA (W3C) contains several image-description properties

  • DTB

    • alt

    • prodnote


Adding Image Description representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.

  • PDF

    • figure tag (text only, no markup)

  • MS Word

    • alternative text within image properties

  • InDesign

    • alternative text


5 diagram center tools resources
5 representing a choice of two paths - one, to get Tested; the other column/path, to not get tested. . DIAGRAM Center Tools & Resources


Diagram s poet
DIAGRAM representing a choice of two paths - one, to get Tested; the other column/path, to not get tested. ’s POET

http://www.youtube.com/user/diagramc


Diagram s content model
DIAGRAM representing a choice of two paths - one, to get Tested; the other column/path, to not get tested. ’s Content Model


Content Model: representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.

Container for Additional Information

Multiple Alternative Elements

  • short description

  • long description

  • SVG reference

  • description of SVG, tactile

  • simplified description

  • alternative image

  • alternative image description


Content Model: representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.

Container for Additional Information

Metadata

  • purpose, age/grade level

  • links to specific image description repositories

  • quality rating

  • concept (of the image)

  • version of content model


6 alternatives recorded read live tactile haptic and smart images
6. Alternatives representing a choice of two paths - one, to get Tested; the other column/path, to not get tested. : Recorded, Read Live, Tactile, Haptic, and Smart Images


Recorded Narration or Read Live representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.

Parts of a Complex Description:

Title

Construction of the Image

Summary or Overview

Data


Title representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.

The figure is entitled "FOREIGN TRADE OF COUNTRY X, 1968 through 1980, in United States dollars".

Construction

There are two lines on the graph, a dashed line labeled "Exports" and a solid line labeled "Imports".

The vertical axis is labeled "Billions of Dollars," beginning with zero to eighteen, in increments of 2. Note: one billion equals a one followed by 9 zeros.

The horizontal axis is labeled "Year" and lists all the years from 1968 through 1980.

Summary

In the graph, the Exports line begins in 1968 at 3 billion dollars, rises steeply to 14 billion in 1974, then drops to 9.5 billion in 1975 and 1976. In 1977, the Exports line shoots up to 15.5 billion, then trails off to 10 billion in 1980.

In the graph, the Imports line begins in 1968 at 2 billion and rises steadily to 8.75 billion in 1980, except for minor dips in 1972 and 1979.

Data

The year is followed by imports in billions of dollars and then exports in billions of dollars.

  • 1968, 3, 2

  • 1969, 3, 2.3

  • 1970, 4, 2.4

  • 1971, 5, 3.1

  • …continued

Read Just Like the Table


Tactile representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.


Enhanced Tactile representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.


Manipulatives representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.


3D Printers representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.


Haptic representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.


Smart Images representing a choice of two paths - one, to get Tested; the other column/path, to not get tested.

Vibration!


Contact information
Contact representing a choice of two paths - one, to get Tested; the other column/path, to not get tested. Information

Bryan Gould

WGBH National Center for Accessible Media

[email protected]

DIAGRAM Center

Funded by Department of Education, Office of Special Education Programs (OSEP)

diagramcenter.org


ad