Accessible interactive books with EPUB 3

Highly accessibleinteractive EPUB Liza Daly (@liza) Threepress / Ibis Reader

Highly accessibleinteractive EPUB

accessible1 Usable with standard tools and interfaces.1 Can be fully experienced by the print-disabled.

1 Usable with standard tools and interfaces.

WAI-ARIA gWAI-ARIA provides a framework foridentifying features for user interaction, howthey relate to each other, and their current state.

WAI-ARIA gIt describes new navigation techniques to markregions as menus, primary/secondary content,and other types of Web structures.

HTML5 gIt describes new navigation techniques to markregions as menus, primary/secondary content,and other types of Web structures.

ARIA HTML5 g g application header article nav main section navigation article region footerARIA and HTML5 have some overlap in the semantic language they use to describe documentstructure. When working with HTML5 and/or EPUB 3, you should use the HTML5 elementsrather than these ARIA roles. (Or both!)

applicationBecause this talk is about interactivity, I’m going to focus on those aspects of ARIA that aremeant to enhance the accessibility of “applications,” as opposed to “documents.” Aninteractive EPUB will often be more like an application (or even an app!) than a document.

application ARIA Roles This speci cation identi es the types of widgets and structures that are commonly recognized by accessibility products, by providing an ontology of corresponding roles that can be attached to content.

application State A state is a dynamic property expressing characteristics of an object that may change in response to user action or automated processes.

application Property Attributes that are essential to the nature of a given object, or that represent a data value associated with the object.

Property Attributes that are essential to the nature of a given object, or that represent a data value associated with the object. “I could not be more delighted to see you!,” I exclaimed.In this example I’m creating a ﬁction book in which the prose contains hidden elements thatdescribe what the narrator was thinking at the time.

PropertyAttributes that are essential to the nature of agiven object, or that represent a data valueassociated with the object. “I could not be more delighted to see you!,” I exclaimed.

Property Attributes that are essential to the nature of a given object, or that represent a data value associated with theIn truth, I loathe her. object. “I could not be more delighted to see you!,” I exclaimed.In a visual presentation, the user would click on the word “delighted” and the note would popup indicating how the narrator really felt at the time. In a normal scenario, the popup herewould _not_ be visible to a screen reader, nor would the user of the assistive reader evenrealize that “delighted” could be activated.

Property Parenthetical aside Attributes that are essential to the nature of a given object, or that represent a data value associated with theIn truth, I loathe her. object. “I could not be more delighted to see you!,” I exclaimed. Behaves like a linkTo begin to annotate this with ARIA information, I need to annotate the text with its role inthe application. “Delighted” behaves like a hyperlink -- but it’s not actually a link to anotherdocument. It only has the behavior of a link. Likewise, the popup is semantically an aside --it’s part of the document but not critical to the ﬂow.

State Propertya dynamic property expressing A state is Attributes that are essential to themay change in nature of a characteristics of an object that given object, or that represent a data value response to user action or automated processes. associated with the object. May be displayed or not In truth, I loathe her.When I analyze the states available, I come up with the fact that the popup may be in thestate of being “visible” (in a broad sense) or hidden.

<div id="container" role="document"> <div id="main" role="main"> <p> “I could not be more <span id="lie-1" role="link" aria-haspopup="true">delighted </span> to see you!” I exclaimed. </p> </div> <aside> <p id="lie-1-aside" role="note" aria-live="assertive" aria-hidden="true"> In truth, I loathe her.</p> </aside> </div>Here’s the markup I used, which is a mix of HTML5 and ARIA. I indicated that “delighted” hasa role of “link” and also more speciﬁcally that it has a popup. But note that it is not an HTML<a>.

<div id="container" role="document"> <div id="main" role="main"> <p> “I could not be more <span id="lie-1" role="link" aria-haspopup="true">delighted </span> to see you!” I exclaimed. </p> </div> <aside> <p id="lie-1-aside" role="note" aria-live="assertive" aria-hidden="true"> In truth, I loathe her.</p> </aside> </div> *[aria-hidden=true] { display: none; }I use the aria-hidden attribute to tell the screenreader that it should be hidden, and alsoapply that presentation to the CSS so it is also hidden for visual users.

[Video demo]

1 Usable with standard tools and interfaces.

The Open UniversityThese EPUBs from the Open University in the UK are available on iTunes U and make use ofsome accessible HTML5. Speciﬁcally they use HTML5 <canvas> for some very excitinginteractive elements, but provide an alternate version that was carefully tested with VoiceOveron iOS.

[Demo of the Open University book being read by VoiceOver on a Mac]

The Open University http://bookbind.sourceforge.net/Their toolkit for creating these books is completely open source.

accessible1 Usable with standard tools and interfaces.1 Can be fully experienced by the print-disabled.

1 Can be fully experienced by the print-disabled.

A brief digressionabout games.

The Entertainment Software Association (2008) 65%

The Entertainment Software Association (2008) 65% of Americans play videogames

Pew Internet (2008) 50%of teenagers played a game

Pew Internet (2008) 50%of teenagers played a game yesterday

Pew Internet (2008) 97%of all American teenagers play videogames

Pew Internet (2008)1 in 3read discussions about games

Pew Internet (2008) 1 in 6 write about gamesWhat’s important about these numbers is that games aren’t a solitary experience. Evengames that are meant for just one player generate a tremendous amount of discussion andengagement. Game plots are analyzed and debated. Character motivations are discussed.And unlike books, games offer players the ability to ﬁnd new things and bring thosediscoveries to the community.

Videogames are absolutely central to the lives of many younger people. They’re a form ofexpression in their own right and one that everyone should be able to participate in if at allpossible.

Terry Garrett 1 Can be fully experienced by the print-disabled.Terry Garret is a blind gamer who learns to play games designed for sighted players only by listening to the audio.

[snippet of audio from the game]

Not all games are visual...

Papa Sangre[Demo from Papa Sangre, a game for iOS that uses only 3D audio and no graphics]

Some games used to be text...

Get Lamp, by Jason Scott[Clip from Get Lamp by Jason Scott, featuring blind players of text adventure gamesdescribing their experience]

I believe that there’s a possible to bring games and books together in a way that is stillessentially bookish. We in the book community are uniquely positioned to bring the best ofthe gaming experience to the world of literature. We can invite readers to not just turn pages,but to take their own paths through the story and share those paths with others.

Fundamentally bookish. Hybrid audio/text. Encourage exploration and sociability.and we can do this in a way that is highly accessible to everyone.

References http://www.archive.org/stream/refractionhowtor00thoriala http://www.archive.org/stream/ bradleysgamesthe00milt http://www.archive.org/stream/internationalgam00gibs http://bibliodyssey.blogspot.com/2010/02/ beautiful-bookbinding.html http://www.archive.org/stream/machinery00unkngoog Entertainment Software Association http://www.scribd.com/doc/4786879/ Pew Internet and American Life Project http://bookbind.sourceforge.net/ http://www.pewinternet.org/Reports/ 2008/Teens-Video-Games-and- Civics.aspx Accessible Rich Internet Applications (WAI-ARIA) 1.0 http://getlamp.com/ http://www.w3.org/TR/wai-aria/ Use of this PDF is governed byThanks! - @liza Creative Commons Share-Alike Non-Commercial http://creativecommons.org/licenses/by-nc-sa/3.0/us/

http://blog.threepress.org	6883
url_unknown	45
http://translate.googleusercontent.com	38
http://www.slideshare.net	16
http://paper.li	12
http://sunproxy1.appspot.com	7
http://www.bookbee.net	4
http://www.thesearchengine.net	3
http://bookbee.net	2
http://www.google.com	2
http://fanyi.youdao.com	1
http://philipproxy.appspot.com	1
http://tweetedtimes.com	1
http://www.hanrss.com	1
http://207.46.192.232	1
http://portal.unitbv.ro	1

Accessible interactive books with EPUB 3

by lizadaly on Jun 08, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

16 Embeds 7,018

Statistics

Accessible interactive books with EPUB 3 — Presentation Transcript