460 likes | 595 Views
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. 2. How to attach descriptions to images in electronic publications
E N D
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 2 • 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)
3 HTML
HTML 4 Where all image descriptions begin: alt
HTML 5 <img src=“picture.jpg”alt=“brief description here” ... />
HTML 6 <img src=“croc.jpg” alt=“A smiling crocodile” ... />
HTML 7 But what about longer descriptions? 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 PDF
Image descriptions in PDF 16 • Begin with the source document, not the PDF • Word • OpenOffice Writer • InDesign • Add image descriptions to the source • Export tagged PDF
Word: add image descriptions 17 Insert the image Right click Choose Format Picture Choose Alt Text tab; enter text in Description field Plain text only; no markup
Word: exporting to PDF 18 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
OpenOffice: adding image descriptions 19 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
OpenOffice: exporting to PDF 20 Choose File Export as PDF Click on General tab; make sure the “Tagged PDF” box is checked (persistent setting)
InDesign: adding image descriptions 21 Insert the image Object Object Export Options Alt Text Custom Enter alt text Windows and Mac
InDesign: Exporting to PDF 22 Choose File > Export > PDF When prompted, be sure to check the “Create Tagged PDF” box (persistent setting)
What if the source document isn’t available? 23 • 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
What if the source document isn’t available? 24 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
25 EPUB
How do I author an EPUB book? 26 • Source applications • InDesign • OpenOffice • HTML • others • Export to EPUB
How do I provide descriptions in EPUB? 27 • alt • longdesc • aria-describedby • epub-describedat (?) • figcaption
InDesign: add image descriptions (EPUB) 28 Insert the image Object Object Export Options Alt Text Custom Type alt text Windows and Mac
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? 31 • 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
OpenOffice: add image descriptions (DTB) 32 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)
OpenOffice: exporting a DTB 33 • Export as DAISY XML • File > Export as DAISY XML • Open .XML file in Tobi
Word: add image descriptions (DTB) 34 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)
Word: exporting a DTB 35 Download and install Save as DAISY add-in After writing the book, choose Accessibility tab > Save As DAISY Open in Tobi Demo (Win)
Tobi: adding long descriptions to a DTB 36 • 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
Tobi: adding long descriptions to a DTB 37 Open exported XML file in Tobi Choose Descriptions tab Select image; click Add/edit button
TOBI: adding long descriptions to a DTB 38 Choose Text Descriptions tab Select Edit button In description window, enter long-description text
TOBI: adding long descriptions to a DTB 39 • Choose File > Export • Accept defaults; save file • Test • Dolphin EasyReader (Windows; shows longdesc on screen) • ReadHear (Win/Mac; does not show longdesc on screen)
Poet 40 • 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
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?
Contact information 46 DIAGRAM Center Julie Noblitt julien@benetech.org http://diagramcenter.org 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 geoff_freed@wgbh.org; bryan_gould@wgbh.org http://ncam.wgbh.org