best practices for integrating accessible images into e-books and digital talking books
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/1.jpg)
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
![Page 2: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/2.jpg)
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
![Page 3: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/3.jpg)
3
HTMLHTML
![Page 4: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/4.jpg)
HTML
Where all image descriptions begin:
4
alt
![Page 5: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/5.jpg)
HTML 5
<img src=“picture.jpg” alt=“brief description
here” ... />
![Page 6: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/6.jpg)
HTML 6
<img src=“croc.jpg” alt=“A smiling
crocodile” ... />
![Page 7: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/7.jpg)
HTML
But what about longer descriptions?
7
longdesc
![Page 8: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/8.jpg)
HTML 8
<img src=“picture.jpg” alt=“brief description here”
longdesc=“longdescription.html” />
![Page 9: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/9.jpg)
HTML 9
<img src=“picture.jpg” alt=“brief description here”
longdesc=“longdescription.html”
![Page 10: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/10.jpg)
HTML 10
longdesc in HTML can provide descriptions in any manner— plain text— markup
lists tables anything
![Page 11: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/11.jpg)
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.
![Page 12: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/12.jpg)
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.
![Page 13: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/13.jpg)
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
![Page 14: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/14.jpg)
Description guidelines 14
Effective Practices for Description of Science Content within Digital Talking Books
HTML5: Techniques for Providing Useful Text Alternatives
![Page 15: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/15.jpg)
15
PDFPDF
![Page 16: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/16.jpg)
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
![Page 17: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/17.jpg)
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
![Page 18: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/18.jpg)
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
![Page 19: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/19.jpg)
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
![Page 20: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/20.jpg)
Choose File Export as PDF
Click on General tab; make sure the “Tagged PDF” box is checked (persistent setting)
20OpenOffice: exporting to PDF
![Page 21: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/21.jpg)
Insert the image Object Object Export
Options Alt Text Custom
Enter alt text Windows and Mac
21InDesign: adding image descriptions
![Page 22: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/22.jpg)
Choose File > Export > PDF
When prompted, be sure to check the “Create Tagged PDF” box (persistent setting)
22InDesign: Exporting to PDF
![Page 23: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/23.jpg)
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
![Page 24: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/24.jpg)
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?
![Page 25: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/25.jpg)
25
EPUBEPUB
![Page 26: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/26.jpg)
How do I author an EPUB book?
Source applications— InDesign— OpenOffice— HTML— others
Export to EPUB
26
![Page 27: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/27.jpg)
How do I provide descriptions in EPUB?
alt longdesc aria-describedby
— epub-describedat (?) figcaption
27
![Page 28: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/28.jpg)
Insert the image Object Object Export
Options Alt Text Custom
Type alt text Windows and Mac
28InDesign: add image descriptions (EPUB)
![Page 29: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/29.jpg)
InDesign: exporting to EPUB 29
Choose File > Export > EPUB
In the Contents pane, choose XHTML as the format
Where does INDD put the description?
![Page 30: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/30.jpg)
30
Digital Talking Books (DTB)Digital Talking Books (DTB)
![Page 31: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/31.jpg)
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
![Page 32: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/32.jpg)
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
![Page 33: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/33.jpg)
OpenOffice: exporting a DTB
Export as DAISY XML— File > Export as
DAISY XML Open .XML file in
Tobi
33
![Page 34: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/34.jpg)
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
![Page 35: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/35.jpg)
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
![Page 36: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/36.jpg)
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
![Page 37: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/37.jpg)
Tobi: adding long descriptions to a DTB
Open exported XML file in Tobi
Choose Descriptions tab
Select image; click Add/edit button
37
![Page 38: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/38.jpg)
TOBI: adding long descriptions to a DTB
Choose Text Descriptions tab
Select Edit button In description
window, enter long-description text
38
![Page 39: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/39.jpg)
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
![Page 40: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/40.jpg)
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
![Page 41: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/41.jpg)
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
![Page 42: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/42.jpg)
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
![Page 43: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/43.jpg)
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
![Page 44: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/44.jpg)
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
![Page 45: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/45.jpg)
45
Questions?Questions?
![Page 46: Best Practices for Integrating Accessible Images into E-books and Digital Talking Books](https://reader031.vdocuments.us/reader031/viewer/2022020721/56813fc0550346895daa9e80/html5/thumbnails/46.jpg)
Contact information
DIAGRAM CenterJulie [email protected] 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 [email protected]; [email protected] http://ncam.wgbh.org
46