a11y from the start: how to produce born accessible ebooks in a collaborative workflow - kevin...

BORN ACCESSIBLEA11Y FROM THE START

A11Y FROM THE START

A11Y FROM THE START

Accessible Publishing Is Good Publishing

A11Y FROM THE START

WHY MAKE BOOKS ACCESSIBLE?

Use

▸ For readers with print disabilities

▸ For readers who are situationally disabled

▸ But, what a11y features are supported by reading systems?

A11Y FROM THE START

WHY MAKES BOOKS ACCESSIBLE?Business

▸ Reuse of books/archival access

▸ Marketing: Content that is more usable is more valuable

▸ Futureproofing

▸ Financial

▸ Legal requirements

A11Y FROM THE START

WHY MAKES BOOKS ACCESSIBLE?

Philosophical

▸ Democratic

▸ Make books as rich as possible

▸ Enhanced experience

▸ Streamlined Workflow

A11Y FROM THE START

COLLABORATIONHow can workflow participants collaborate?

▸ Business

▸ Organization

▸ Supply Chain

A11Y FROM THE START

AREAS OF A11Y CONCERN

▸ What a11y features should your book include?

▸ Structure

▸ Images

▸ Navigation

▸ Print design adaptation

▸ Special Features

A11Y FROM THE START

DEFINE STRUCTURE

▸ When designing for print, designer should remember that structure is on an equal footing with aesthetics in digital.

▸ Internal head structure (h1–h6)

▸ Text must be in natural reading order

▸ Identify sidebars/pullquotes: aside

▸ Identify footnotes/endnotes: aside

▸ Semantic markup of all elements: fig, figcaption; glossary

A11Y FROM THE START

▸ If design element conveys meaning for print, adapt for e.

▸ <i> vs <em> vs <cite>: editor to indicate

▸ <i> Eloise planned to travel on the Queen Mary.

▸ <em> She had to sail on Monday.

▸ <cite> As they left port, she thought of the movie Titanic.

▸ <b> vs <strong>: editor to indicate

▸ <b>The ship’s log<b>. The captain of the ship maintains the log.

▸ <strong> Warning</strong>: The ship will capsize at 0200 hours.

STRUCTURE: DESIGN + EDITORIAL

A11Y FROM THE START

EPUB:TYPE

▸ Editorial indicates in ms while marking for typesetting (establish house style guide)

▸ Designer/typesetter apply to mechanical, or

▸ Developer apply based on editorial guidance

▸ from within InDesign

▸ in XHTML

A11Y FROM THE START

LANGUAGE

▸ What is the dominant language

▸ Are there exceptions?

▸ Editor marks in manuscript + developer executes

▸ Special pronunciations (from Garrish; SSML)

▸ Record or record?

▸ Editor marks in manuscript + developer executes

▸ Not supported yet, but will they be?

A11Y FROM THE START

NAVIGATION

▸ Inside-the-book TOC needed even if not included in print edition.

▸ How many levels to use in the in-book TOC? (use ‘hidden’ to remove unwanted levels)

▸ Consider UX for in-book TOC: multi levels on smart phone are ugly and hard to use

▸ Remember, all will be available in device TOC

▸ Landmarks

▸ As many as possible

A11Y FROM THE START

NAVIGATION

▸ Extra nav lists

▸ Tables

▸ Illustrations

▸ Audio

▸ Video

▸ Page List

▸ When ebook corresponds to print volume

▸ When ebook will be used in classroom along with print edition

A11Y FROM THE START

IMAGES

▸ Is an image decoration or meaningful? For a decorative instance:

▸ Developer: use empty alt tag; role: presentation)

A11Y FROM THE START

IMAGES: CAPTION + ALT TEXT

▸ Meaningful images

▸ Is the image thoroughly described in text or caption?

▸ Mention text reference in alt tag.

▸ If brief additional content helpful, supply alt tag.

▸ Developer: pull alt text (from Structure in ID; from Bridge; from image metadata)

▸ Developer: include aria-describedby for lengthy, complicated descriptions

A11Y FROM THE START

IMAGES: WHAT MAKES A GOOD ALT TAG?

▸ Helpful geographical description: The estuary scenery is a mix of salt marsh and tidal creeks flanked by industrial complexes.

▸ Less helpful: Power lines in the morning sun.

▸ Helpful environmental description: The large pylon lines tower over woodland and are visible for many miles around

▸ Less helpful: Pylons in a field.

A11Y FROM THE START

IMAGES: TEXT AS ART

▸ Text as art (e.g., illustrated pie chart):

▸ alt=“pie chart showing 30% apples, 30% oranges, 40% plums”

▸ Title Page, e.g. Use

▸ epub:type:frontmatter title page

▸ alt=“book title, author, publisher”

A11Y FROM THE START

TABLES

▸ Rework for ebook use if feasible.

▸ Mark up correctly in XHTML.

▸ If using an image for tabular matter, provide fallback (link to nonlinear content or to website)

A11Y FROM THE START

MATH ML

▸ Math symbols are often expressed as images in digital content rendering them inaccessible

▸ If expressed as MathML the symbols can be accessed by a screenreader

▸ MathML consists of a number of XML tags for marking up equations in terms of presentation and semantics

A11Y FROM THE START

DESIGN

▸ Ebook design does not need to mirror print design

▸ It’s possible to create unaccessible EPUBs, so it’s important to spend the time getting it right

▸ Design adaptation considerations

▸ Account for design and semantic elements not needed in print (TOC; narrative pause; extra content)

▸ Move elements (e.g., copyright to back)

A11Y FROM THE START

DESIGN

▸ Color:

▸ Must not convey meaning.

▸ Contrast must be high enough to be visible on all screens.

▸ e-ink

▸ night mode

▸ media queries to target devices/modes

A11Y FROM THE START

DESIGN

▸ Designer must use tools appropriately

▸ style sheets

▸ master pages

▸ text flow

▸ image management

▸ color management

A11Y FROM THE START

SPECIAL E-ONLY FEATURES

▸ Media Overlays

▸ Different from TTS (text-to-speech)

▸ Read-aloud materials

▸ Record audio: synchronized audio narration

▸ Implement in EPUB (using SMIL markup: sync audio with text)

A11Y FROM THE START

SPECIAL E-ONLY FEATURES

Audio/video

▸ Provide fallback description for video.

▸ Use native HTML5 for controls if possible.

▸ Plan and design interface in advance. If custom controls are necessary (image as button, e.g.) use ARIA roles, states, and properties.

▸ Subtitles + captions:

▸ Editor creates in manuscript

▸ Developer executes

A11Y FROM THE START

SCRIPTING

▸ All content must be available with or without script.

▸ Accessibility concerns

▸ And, many reading systems don’t currently allow scripting (hello, Kindle)

▸ From EPUB3 Best Practices (Garrish/Gylling):

▸ Does scripted content include useful information, or is it only diversionary.

▸ Can content be made accessible in a usable way, and can you build a fallback to provide the same or similar experience?

A11Y FROM THE START

EXTRA CONTENT

▸ Richer backmatter

▸ Appendices

▸ Bibliography

▸ Annotations

▸ Indexes

▸ Hyperlinked backmatter (good or bad—what’s the link life?)

▸ Extra front matter

▸ TOCs

▸ Introductory material

A11Y FROM THE START

METADATA

▸ ebooks with accessibility metadata are discoverable.

▸ Include a11y metadata for any elements present.

▸ ONIX 3, Codelist 196 includes 23 a11y description codes. Some are:

▸ table of contents and Index navigation

▸ Reading order

▸ Short and Full alternative descriptions

A11Y FROM THE START

RESOURCES

Books

EPUB3 Best Practices by Matt Garrish & Markus Gylling http://shop.oreilly.com/product/0636920024897.do

BISG Quick Start Guide to Accessible Publishing http://bisg.org/news/297929/The-BISG-Quick-Start-Guide-to-Accessible-Publishing-Moving-Inclusion-Forward.htm

Accessible EPUB3, by Matt Garrish http://shop.oreilly.com/product/0636920025283.do

HTML5 & CSS3 Visual QuickStart Guide, 7th Edition, Elizabeth Castro & Bruce Hyslop http://www.peachpit.com/store/html5-css3-visual-quickstart-guide-9780321719614

Reading System Support http://epubtest.org/

Participate https://www.w3.org/community/epub3/

Color webaim.org

A11Y FROM THE START

RESOURCES

W3C http://w3.org/accessibility

Images, alt text http://diagramcenter.org/59-image-guidelines-for-epub-3.html

http://diagramcenter.org/standards-and-practices/accessible-image-sample-book.html

http://diagramcenter.org/poet.html

epub:type

▸ https://idpf.github.io/a11y-guidelines/content/semantics/epub-type.html

A11Y FROM THE START

CONTACT US

Sarah Hilderley

shilderley@gmail.com

@quarrypress

Kevin Callahan

www.BNGOBooks.comkevin@BNGOBooks.com

@BNGOBooks