Born Accessible
Books in Browsers
October 25, 2013
What is Accessibility for Print Disabled Students?

http://youtube.com/watch?v=sUMmzi3nmig

Jessica, Steffon and
Shane are ...
Challenge: The Need

30 million
Americans with print disabilities

15-20%
in U.S. have language-based disability

285 mill...
Challenge: Everyone’s a Content Creator

$1.1 billion
in new edtech financing in 2012

2,500%
more expensive to retrofit for...
Page 5
A Critical Strategy

All materials

Born Digital
Must be

Born Accessible
Page 6
Accessible Content Highlights
Structure

Images

Navigation
Sections

Descriptions
Multi-modal (touch, sound)

Text

Math
...
Images are Challenging (especially STEM)

Page 8
What is an Accessible Image?

● 

Provides different
mode of access to
visual information
contained in an image

● 

Beyond...
SVG Is Ideal for Accessibility
● 

SVG can contain textual and structured descriptions and data
–  http://describler.com
–...
STEM Descriptions Need More than 120 chars
About this description
Author: John Doe, Ph.D. in Water Engineering
Target Age:...
Poet: Crowdsourcing Image Descriptions

Page 12
Mathematics

● 

MathML support is taking steps forward
–  Safari and Firefox visually render MathML
–  Aural rendering in...
Stopgap Math Accessibility Solutions
● 

MathJax JavaScript library for all browsers

● 

MathJax + Chrome(Vox) on the ser...
Interactive Content / Widgets
● 

Simulations
Interactive Number Lines

● 

Quizzes

● 

3D models

● 

●  http://www.w3.o...
How Can We Discover Accessible eBooks?

Page 16
Schema.org Can Provide an Answer

Page 17
Recipe HTML 5 Tagging Example

<div itemscope itemtype="http://schema.org/Recipe">
<div itemprop="nutrition” itemscope ite...
Accessibility Properties

Access	
  Mode	
  
Media	
  Feature	
  
Alterna5ves	
  

•  auditory,	
  textual,	
  visual	
  
...
Google Custom Search Example
Search for “history” titles on Bookshare filter by presence of
image descriptions:

http://www...
What can you do?
1.  Leverage standards, such as HTML 5, WAIARIA, EPUB 3
2.  Build content creation tools that make
access...
Upcoming SlideShare
Loading in …5
×

Born Accessible - Books in Browsers

1,722
-1

Published on

Presentation at Books in Browsers on Born Accessible and the latest advances in STEM accessibility

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,722
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Explain what a print disability ishttp://readingrights.orghttp://www.who.int/mediacentre/factsheets/fs282/en/: number of people with vision impairmenthttp://www.insidehighered.com/news/2013/05/09/berkeley-agrees-do-more-help-disabled-students-do-homework-and-research : increase at UCB
  • Organizations like Bookshare and UC Berkeley’s DSS cannot scale convert this explosion of content into accessible content.The solution is that..
  • … and stay that way…
  • Image: Screen shot of a biology book shown in the Bookshare Web Reader. There are two viewing panes. The left hand pane shows a well ordered structure of headings and sub-headings, going four layers deep, all selectable. The right hand pane shows an image with a description, an active link, and reflowable text.Around the image are tips for accessible content:Structure: Navigation, SectionsImages: Longdesc, DiAGRAM Content ModelText: Reflowable, Style/Content, FormattingMath: MathML, DescriptionTables &amp; Lists: Headers, OrderingVideo: Track: subtitles, description, etc.
  • Images:Collection of 4 complex images from the textbook CK-12 Biology I.
  • Image:Sample tactile graphics being explored by users at DIAGRAM meeting.
  • This is an example that illustrates the DIAGRAM Content Model.Image:An image depicting the hydrologic cycle. The text items on the slide are examples of alternative descriptions of the graphic content. An additional callout balloon pointing to “Long Description” reads “You can add long descriptions to HTML 5!”
  • Image:Screenshot showing browser with two main vertical panels. Left panel is 25% of the screen and contains list of images, each accompanied by a dropdown. The left panel takes up the rest of the screen. It contains text followed by an image in a box. Next to the image is an editable box that holds the image description.
  • NIMAC: National Instructional Materials Accessibility Standards Center recommends MathML 3 in June 2012.
  • Born Accessible - Books in Browsers

    1. 1. Born Accessible Books in Browsers October 25, 2013
    2. 2. What is Accessibility for Print Disabled Students? http://youtube.com/watch?v=sUMmzi3nmig Jessica, Steffon and Shane are three of 250,000+ members who can access Bookshare’s library of 210,000+ books, textbooks and periodicals with reading tools tailored to their special needs Page 2
    3. 3. Challenge: The Need 30 million Americans with print disabilities 15-20% in U.S. have language-based disability 285 million people with vision impairment worldwide 115% More requests for alternative materials at UC Berkeley in 4 years Page 3
    4. 4. Challenge: Everyone’s a Content Creator $1.1 billion in new edtech financing in 2012 2,500% more expensive to retrofit for accessibility from print (or print equivalents) Page 4
    5. 5. Page 5
    6. 6. A Critical Strategy All materials Born Digital Must be Born Accessible Page 6
    7. 7. Accessible Content Highlights Structure Images Navigation Sections Descriptions Multi-modal (touch, sound) Text Math Reflowable Style/Content Formatting Tables & Lists Headers Ordering MathML Description Widgets Video ARIA Multi-modal Track: subtitles, description, etc. Page 7
    8. 8. Images are Challenging (especially STEM) Page 8
    9. 9. What is an Accessible Image? ●  Provides different mode of access to visual information contained in an image ●  Beyond just alt text! Page 9
    10. 10. SVG Is Ideal for Accessibility ●  SVG can contain textual and structured descriptions and data –  http://describler.com –  http://d3js.org/ ●  Author with SVG and if need be distribute as PNG/JPEG ●  SVG can more easily be turned into tactile graphics ●  SVG has potential to be 3D printable ●  SVG can be sonified –  http://svg-sonifier.com –  http://github.com/benetech/svg-sonifier Page 10
    11. 11. STEM Descriptions Need More than 120 chars About this description Author: John Doe, Ph.D. in Water Engineering Target Age: 9-12 Target Grade: 4-7 Summary The image depicts the cycle of water evaporating, turning into clouds, falling back to earth in the form of precipitation and being filtered through sediment. Long Description The image depicts the natural process of evaporation and precipitation and how rain water gets filtered and cleansed through the earth's sediment. On the left-hand side of the image is a lake... A weather event such as a rainstorm eventually returns the precipitation to the ground... The natural filtering agents in the soil... Annotation added by teacher In the winter we get snow instead of rain. Simplified Language Description The image shows how water becomes clouds, then rain, and then gets cleaned by the soil. Tactile Image [Tactile image] You can add long descriptions to HTML 5! In the upper left corner of the tactile… Simplified Image [Simplified image] Moving front the top left corner of the image Page 11
    12. 12. Poet: Crowdsourcing Image Descriptions Page 12
    13. 13. Mathematics ●  MathML support is taking steps forward –  Safari and Firefox visually render MathML –  Aural rendering in Safari, Chrome(Vox) and is coming in NVDA –  Visual and aural rendering in IE 9 with MathPlayer plugin ●  But steps backward as well –  Chrome dropped MathML support –  IE 10 & 11 do not support MathPlayer plugin Page 13
    14. 14. Stopgap Math Accessibility Solutions ●  MathJax JavaScript library for all browsers ●  MathJax + Chrome(Vox) on the server as a web service –  Input: MathML or LaTex –  Output: SVG with embedded descriptions or PNG/JPG with alt descriptions Page 14
    15. 15. Interactive Content / Widgets ●  Simulations Interactive Number Lines ●  Quizzes ●  3D models ●  ●  http://www.w3.org/community/stemwidgets Page 15
    16. 16. How Can We Discover Accessible eBooks? Page 16
    17. 17. Schema.org Can Provide an Answer Page 17
    18. 18. Recipe HTML 5 Tagging Example <div itemscope itemtype="http://schema.org/Recipe"> <div itemprop="nutrition” itemscope itemtype="http:// schema.org/NutritionInformation"> Nutrition facts: <span itemprop="calories">240 calories</span>, </div> Ingredients: - <span itemprop="ingredients">3 or 4 ripe bananas, smashed</span> - <span itemprop="ingredients">1 egg</span> Page 18
    19. 19. Accessibility Properties Access  Mode   Media  Feature   Alterna5ves   •  auditory,  textual,  visual   •  alterna5veText,  MathML,  cap5on   •  hasAdapta5on,  isAdapata5onOf   Access  Hazard   •  flashing,  mo5onSimula5on   Others   •  AccessAPI,  controlFlexibility   http://a11ymetadata.org Page 19
    20. 20. Google Custom Search Example Search for “history” titles on Bookshare filter by presence of image descriptions: http://www.a11ymetadata.org/bookshare-tags-over-195000-titles-with-accessibilitymetadata/ Page 20
    21. 21. What can you do? 1.  Leverage standards, such as HTML 5, WAIARIA, EPUB 3 2.  Build content creation tools that make accessibility easy 3.  Create reading systems that are accessible to use, leverage standards and build on open source projects like Readium 4.  Hack – http://github.com/benetech http://bornaccessible.org Page 21

    ×