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, PDF  EPUB  Digital Talking Books (DTBs) — How to use specialized tools where necessary  Acrobat, 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 HTML

HTML Where all image descriptions begin: 4 alt

HTML 5

HTML 6

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 1.1: A crocodile with an open jaw, revealing long, sharp and jagged teeth. 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 1.1: A crocodile with an open jaw, revealing long, sharp and jagged teeth. 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 Effective Practices for Description of Science Content within Digital Talking Books  HTML5: Techniques for Providing Useful Text Alternatives HTML5: Techniques for Providing Useful Text Alternatives

15 PDF

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 18 Word: 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) 20 OpenOffice: exporting to PDF

 Insert the image  Object  Object Export Options  Alt Text  Custom  Enter alt text  Windows and Mac 21 InDesign: adding image descriptions

 Choose File > Export > PDF  When prompted, be sure to check the “Create Tagged PDF” box (persistent setting) 22 InDesign: 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 EPUB

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 28 InDesign: 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)

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 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-inSave as DAISY add-in  After writing the book, choose Accessibility tab > Save As DAISY  Open in TobiTobi  Demo (Win) 35

Tobi: adding long descriptions to a DTB  Tobi is not a DTB-authoring tool Tobi — 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 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 Poet — upload DAISY book to server — write descriptions — integrate descriptions back into DTB — download DTB with new descriptions  Complete instructions for using Poet 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 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  ARIA Authoring Practices ARIA Authoring Practices  WCAG 2.0 (intro, recommendation and related documents) WCAG 2.0  Adobe Accessibility (PDF, InDesign guidelines; more) Adobe Accessibility  DIAGRAM Center DIAGRAM Center

45 Questions?

Contact information  DIAGRAM Center Julie Noblitt DIAGRAM is funded by the U.S. Department of Education, Office of Special Education Programs (OSEP)  NCAM Geoff Freed, Bryan Gould National Center for Accessible at the WGBH Educational Foundation 46