Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Highly accessibleinteractive EPUB    Liza Daly (@liza) Threepress / Ibis Reader
Highly accessibleinteractive EPUB    Liza Daly (@liza) Threepress / Ibis Reader
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...
WAI-ARIA                  gIt describes new navigation techniques to markregions as menus, primary/secondary content,and o...
HTML5                  gIt describes new navigation techniques to markregions as menus, primary/secondary content,and othe...
ARIA                                    HTML5                g                                            g           appl...
applicationBecause this talk is about interactivity, I’m going to focus on those aspects of ARIA that aremeant to enhance ...
application      ARIA Roles      This speci cation identi es the types of      widgets and structures that are commonly   ...
application       State       A state is a dynamic property expressing       characteristics of an object that may change ...
application      Property      Attributes that are essential to the nature of a      given object, or that represent a dat...
Property           Attributes that are essential to the nature of a           given object, or that represent a data value...
PropertyAttributes that are essential to the nature of agiven object, or that represent a data valueassociated with the ob...
Property            Attributes that are essential to the nature of a            given object, or that represent a data val...
Property                  Parenthetical aside            Attributes that are essential to the nature of a            given...
State            Propertya dynamic property expressing             A state is            Attributes that are essential to ...
<div id="container" role="document">           <div id="main" role="main">            <p>            “I could not be more ...
<div id="container" role="document">           <div id="main" role="main">            <p>            “I could not be more ...
[Video demo]
[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...
[Demo of the Open University book being read by VoiceOver on a Mac]
[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 sour...
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...
Videogames are absolutely central to the lives of many younger people. They’re a form ofexpression in their own right and ...
Terry Garrett              1 Can be fully experienced                                         by the print-disabled.Terry ...
[snippet of audio from the game]
[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 thei...
Get Lamp, by Jason Scott[Clip from Get Lamp by Jason Scott, featuring blind players of text adventure gamesdescribing thei...
I believe that there’s a possible to bring games and books together in a way that is stillessentially bookish. We in the b...
Fundamentally bookish.                                                               Hybrid audio/text.                   ...
References    http://www.archive.org/stream/refractionhowtor00thoriala                          http://www.archive.org/str...
Accessible interactive books with EPUB 3
Upcoming SlideShare
Loading in …5
×

Accessible interactive books with EPUB 3

20,253 views

Published on

Creating interactive ebooks doesn't mean they need to be inaccessible to users with print disabilities. Interactive textbooks are poised to be huge in education, where reaching all users is critical. There are also opportunities in fiction and storytelling to bring the sense of exploration that is so enjoyable in gaming into the world of books.

This presentation is released under a Creative Commons Non-Commercial Share-Alike license.

Published in: Technology
  • Be the first to comment

Accessible interactive books with EPUB 3

  1. 1. Highly accessibleinteractive EPUB Liza Daly (@liza) Threepress / Ibis Reader
  2. 2. Highly accessibleinteractive EPUB Liza Daly (@liza) Threepress / Ibis Reader
  3. 3. Highly accessibleinteractive EPUB Liza Daly (@liza) Threepress / Ibis Reader
  4. 4. Highly accessibleinteractive EPUB
  5. 5. accessible1 Usable with standard tools and interfaces.1 Can be fully experienced by the print-disabled.
  6. 6. 1 Usable with standard tools and interfaces.
  7. 7. WAI-ARIA gWAI-ARIA provides a framework foridentifying features for user interaction, howthey relate to each other, and their current state.
  8. 8. WAI-ARIA gIt describes new navigation techniques to markregions as menus, primary/secondary content,and other types of Web structures.
  9. 9. HTML5 gIt describes new navigation techniques to markregions as menus, primary/secondary content,and other types of Web structures.
  10. 10. 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!)
  11. 11. 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.
  12. 12. 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.
  13. 13. application State A state is a dynamic property expressing characteristics of an object that may change in response to user action or automated processes.
  14. 14. application Property Attributes that are essential to the nature of a given object, or that represent a data value associated with the object.
  15. 15. 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 fiction book in which the prose contains hidden elements thatdescribe what the narrator was thinking at the time.
  16. 16. 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.
  17. 17. 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.
  18. 18. 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 flow.
  19. 19. 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.
  20. 20. <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 specifically that it has a popup. But note that it is not an HTML<a>.
  21. 21. <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.
  22. 22. [Video demo]
  23. 23. [Video demo]
  24. 24. 1 Usable with standard tools and interfaces.
  25. 25. The Open UniversityThese EPUBs from the Open University in the UK are available on iTunes U and make use ofsome accessible HTML5. Specifically they use HTML5 <canvas> for some very excitinginteractive elements, but provide an alternate version that was carefully tested with VoiceOveron iOS.
  26. 26. [Demo of the Open University book being read by VoiceOver on a Mac]
  27. 27. [Demo of the Open University book being read by VoiceOver on a Mac]
  28. 28. The Open University http://bookbind.sourceforge.net/Their toolkit for creating these books is completely open source.
  29. 29. accessible1 Usable with standard tools and interfaces.1 Can be fully experienced by the print-disabled.
  30. 30. 1 Can be fully experienced by the print-disabled.
  31. 31. A brief digressionabout games.
  32. 32. The Entertainment Software Association (2008) 65%
  33. 33. The Entertainment Software Association (2008) 65% of Americans play videogames
  34. 34. Pew Internet (2008) 50%of teenagers played a game
  35. 35. Pew Internet (2008) 50%of teenagers played a game yesterday
  36. 36. Pew Internet (2008) 97%of all American teenagers play videogames
  37. 37. Pew Internet (2008)1 in 3read discussions about games
  38. 38. 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 find new things and bring thosediscoveries to the community.
  39. 39. 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.
  40. 40. 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.
  41. 41. [snippet of audio from the game]
  42. 42. [snippet of audio from the game]
  43. 43. Not all games are visual...
  44. 44. Papa Sangre[Demo from Papa Sangre, a game for iOS that uses only 3D audio and no graphics]
  45. 45. Some games used to be text...
  46. 46. Get Lamp, by Jason Scott[Clip from Get Lamp by Jason Scott, featuring blind players of text adventure gamesdescribing their experience]
  47. 47. Get Lamp, by Jason Scott[Clip from Get Lamp by Jason Scott, featuring blind players of text adventure gamesdescribing their experience]
  48. 48. 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.
  49. 49. Fundamentally bookish. Hybrid audio/text. Encourage exploration and sociability.and we can do this in a way that is highly accessible to everyone.
  50. 50. 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/

×