1 / 46

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

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

jetta
Download Presentation

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

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

  2. 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. 3 HTML

  4. HTML 4 Where all image descriptions begin: alt

  5. HTML 5 <img src=“picture.jpg”alt=“brief description here” ... />

  6. HTML 6 <img src=“croc.jpg” alt=“A smiling crocodile” ... />

  7. HTML 7 But what about longer descriptions? longdesc

  8. HTML 8 <img src=“picture.jpg” alt=“brief description here”longdesc=“longdescription.html” />

  9. HTML 9 <img src=“picture.jpg” alt=“brief description here” longdesc=“longdescription.html”

  10. HTML 10 • longdesc in HTML can provide descriptions in any manner • plain text • markup • lists • tables • anything

  11. 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.

  12. 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.

  13. 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

  14. Description guidelines 14 • Effective Practices for Description of Science Content within Digital Talking Books • HTML5: Techniques for Providing Useful Text Alternatives

  15. 15 PDF

  16. 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

  17. 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

  18. 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

  19. 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

  20. OpenOffice: exporting to PDF 20 Choose File  Export as PDF Click on General tab; make sure the “Tagged PDF” box is checked (persistent setting)

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

  22. InDesign: Exporting to PDF 22 Choose File > Export > PDF When prompted, be sure to check the “Create Tagged PDF” box (persistent setting)

  23. 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

  24. 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. 25 EPUB

  26. How do I author an EPUB book? 26 • Source applications • InDesign • OpenOffice • HTML • others • Export to EPUB

  27. How do I provide descriptions in EPUB? 27 • alt • longdesc • aria-describedby • epub-describedat (?) • figcaption

  28. InDesign: add image descriptions (EPUB) 28 Insert the image Object  Object Export Options Alt Text  Custom Type alt text Windows and Mac

  29. 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. 30 Digital Talking Books (DTB)

  31. 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

  32. 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)

  33. OpenOffice: exporting a DTB 33 • Export as DAISY XML • File > Export as DAISY XML • Open .XML file in Tobi

  34. 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)

  35. 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)

  36. 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

  37. Tobi: adding long descriptions to a DTB 37 Open exported XML file in Tobi Choose Descriptions tab Select image; click Add/edit button

  38. TOBI: adding long descriptions to a DTB 38 Choose Text Descriptions tab Select Edit button In description window, enter long-description text

  39. 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)

  40. 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

  41. 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

  42. 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

  43. 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

  44. 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. 45 Questions?

  46. 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

More Related