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
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 [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