Best Practices for Integrating Accessible Images into E-books and Digital Talking Books

Presented by the DIAGRAM Center and the WGBH National Center for Accessible Media (NCAM)

April 25, 2013

What to expect today

How to attach descriptions to images in electronic publications— working with source documents

HTML, PDFEPUBDigital Talking Books (DTBs)

— How to use specialized tools where necessaryAcrobat, TOBI

What image descriptions sound like when read aloud with assistive technology— screen readers (JAWS, NVDA, VoiceOver)— dedicated devices (Dolphin EasyReader; gh ReadHear)

2

3

HTMLHTML

HTML

Where all image descriptions begin:

4

alt

HTML 5

<img src=“picture.jpg” alt=“brief description

here” ... />

HTML 6

<img src=“croc.jpg” alt=“A smiling

crocodile” ... />

HTML

But what about longer descriptions?

7

longdesc

HTML 8

<img src=“picture.jpg” alt=“brief description here”

longdesc=“longdescription.html” />

HTML 9

<img src=“picture.jpg” alt=“brief description here”

longdesc=“longdescription.html”

HTML 10

longdesc in HTML can provide descriptions in any manner— plain text— markup

lists tables anything

HTML 11

aria-describedby can be used to associate a visible caption (description) with an image (text must be on same page; no off-page references)

<figure role="group"><img src="crocodile.jpg” alt="A smiling

crocodile” aria-describedby="croccaption"/>

<figcaption id="croccaption">Figure 1.1: A crocodile with an open jaw, revealing long, sharp and jagged teeth.</figcaption>

</figure>

Figure 1.1: A crocodile with an open jaw, revealing long, sharp and jagged teeth.

HTML 12

figure/figcaption can also be used to associate a visible caption (description) with an image (but without using aria-describedby)

<figure role="group"><img src="crocodile.jpg” alt=”A smiling

crocodile” />

<figcaption id="croccaption">Figure 1.1: A crocodile with an open jaw, revealing long, sharp and jagged teeth.</figcaption>

</figure>Figure 1.1: A crocodile with an open jaw, revealing long, sharp and jagged teeth.

HTML 13

A new ARIA property, aria-describedat, may eventually become available— can be used to associate hidden descriptions (e.g., off-page or

referred, similar to longdesc)— can be applied to any object, not just images— currently in development; at least one year away

Description guidelines 14

Effective Practices for Description of Science Content within Digital Talking Books

HTML5: Techniques for Providing Useful Text Alternatives

15

PDFPDF

Image descriptions in PDF

Begin with the source document, not the PDF— Word— OpenOffice Writer— InDesign

Add image descriptions to the source Export tagged PDF

16

Word: add image descriptions

Insert the image Right click Choose Format Picture Choose Alt Text tab;

enter text in Description field

Plain text only; no markup

17

Choose File Save as Adobe PDF

Click on Options; make sure the “Enable Accessibility…” box is checked (persistent setting)

Tagged PDF exports are Windows only

18Word: exporting to PDF

OpenOffice: adding image descriptions

Insert the image Right click Choose Picture Choose Options tab;

enter text in Alternative field

Plain text only; no markup

Windows and Mac Tag structure is

generally better than Word

19

Choose File Export as PDF

Click on General tab; make sure the “Tagged PDF” box is checked (persistent setting)

20OpenOffice: exporting to PDF

Insert the image Object Object Export

Options Alt Text Custom

Enter alt text Windows and Mac

21InDesign: adding image descriptions

Choose File > Export > PDF

When prompted, be sure to check the “Create Tagged PDF” box (persistent setting)

22InDesign: Exporting to PDF

What if the source document isn’t available?

Use Acrobat to add image descriptions Open Tags panel

— View > Show/Hide > Navigation Panes > Tags Expand the tag tree: click on Tags; press Shift + 8 Right-click on image’s tag Enter text into Alternate Text box

23

Open Tags Panel (View > Show/Hide > Navigation Panels > Tags)

Right-click on the image’s tag

Click on Tag panel Enter description in

Alternate Text box

24

What if the source document isn’t available?

25

EPUBEPUB

How do I author an EPUB book?

Source applications— InDesign— OpenOffice— HTML— others

Export to EPUB

26

How do I provide descriptions in EPUB?

alt longdesc aria-describedby

— epub-describedat (?) figcaption

27

Insert the image Object Object Export

Options Alt Text Custom

Type alt text Windows and Mac

28InDesign: add image descriptions (EPUB)

InDesign: exporting to EPUB 29

Choose File > Export > EPUB

In the Contents pane, choose XHTML as the format

Where does INDD put the description?

30

Digital Talking Books (DTB)Digital Talking Books (DTB)

How do I author a DTB?

Source applications— OpenOffice— Word (with Save As DAISY plug-in)— Dolphin Producer— others

DTBs can be read on software or hardware devices— Dolphin EasyReader (Win)— ReadHear (Win/Mac)— Read2Go (iOS)— GoRead (Android)— Plextalk devices; Victor devices— others

31

OpenOffice: add image descriptions (DTB)

Insert the image Right click Choose Picture Choose Options tab;

enter text in Alternative field

Brief description only (i.e. alt text, not long description)

32

OpenOffice: exporting a DTB

Export as DAISY XML— File > Export as

DAISY XML Open .XML file in

Tobi

33

Word: add image descriptions (DTB)

Insert the image Right click Choose Format Picture Choose Alt Text tab;

enter text in Description field

Brief description only (i.e. alt text, not long description)

34

Word: exporting a DTB

Download and install Save as DAISY add-in After writing the book, choose Accessibility tab > Save

As DAISY Open in Tobi Demo (Win)

35

Tobi: adding long descriptions to a DTB

Tobi is not a DTB-authoring tool— used to repurpose an existing document to a DTB— add (among many other things) long descriptions

and other image alternatives (using DIAGRAM content model)

Complete documentation

36

Tobi: adding long descriptions to a DTB

Open exported XML file in Tobi

Choose Descriptions tab

Select image; click Add/edit button

37

TOBI: adding long descriptions to a DTB

Choose Text Descriptions tab

Select Edit button In description

window, enter long-description text

38

TOBI: adding long descriptions to a DTB

Choose File > Export Accept defaults; save file Test

— Dolphin EasyReader (Windows; shows longdesc on screen)

— ReadHear (Win/Mac; does not show longdesc on screen)

39

Poet

Poet is a tool for adding image descriptions to existing DTBs— upload DAISY book to server— write descriptions— integrate descriptions back into DTB— download DTB with new descriptions

Complete instructions for using Poet Coming soon: add image descriptions to EPUB documents

40

iBooks Author (IBA) 41

IBA is for authoring iBooks textbooks only— iBooks textbooks can only be read on an iPad

IBA can include interactive elements in books— video/audio; various widgets

iBooks textbooks can be accessible—Creating Accessible iBooks Textbooks with iBooks

Author

iBooks Author (IBA) 42

IBA is not an EPUB editor— cannot import/edit existing EPUB docs— exports EPUB with custom extensions

that’s why IBA-authored books can only be read on an iPad

If just authoring an EPUB book, do not use IBA

IBA: adding image descriptions 43

Click on the image in the book Open Inspector panel Choose Widget inspector Click Layout button Enter description in window at

bottom of panel (plain text only)— IBA does not currently import

descriptions from source documents

Additional resources 44

ARIA (intro and recommendation) ARIA Authoring Practices WCAG 2.0 (intro, recommendation and related documents) Adobe Accessibility (PDF, InDesign guidelines; more) DIAGRAM Center

45

Questions?Questions?

Contact information

DIAGRAM CenterJulie Noblittjulien@benetech.org http://diagramcenter.orgDIAGRAM is funded by the U.S. Department of Education, Office of

Special Education Programs (OSEP)

NCAMGeoff Freed, Bryan GouldNational Center for Accessible at the WGBH Educational Foundationgeoff_freed@wgbh.org; bryan_gould@wgbh.org http://ncam.wgbh.org

46