born accessible - books in browsers
DESCRIPTION
Presentation at Books in Browsers on Born Accessible and the latest advances in STEM accessibilityTRANSCRIPT
![Page 1: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/1.jpg)
Born Accessible Books in Browsers October 25, 2013
![Page 2: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/2.jpg)
Page 2
What is Accessibility for Print Disabled Students?
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
http://youtube.com/watch?v=sUMmzi3nmig
![Page 3: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/3.jpg)
Page 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 4: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/4.jpg)
Page 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 5: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/5.jpg)
Page 5
![Page 6: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/6.jpg)
Page 6
A Critical Strategy
All materials
Born Digital
Must be
Born Accessible
![Page 7: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/7.jpg)
Page 7
Accessible Content Highlights
Structure Navigation Sections
Text Reflowable Style/Content Formatting
Tables & Lists Headers Ordering
Math MathML Description
Images Descriptions Multi-modal (touch, sound)
Video Track: subtitles, description, etc.
Widgets ARIA Multi-modal
![Page 8: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/8.jpg)
Page 8
Images are Challenging (especially STEM)
![Page 9: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/9.jpg)
Page 9
What is an Accessible Image?
● Provides different mode of access to visual information contained in an image
● Beyond just alt text!
![Page 10: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/10.jpg)
Page 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 11: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/11.jpg)
Page 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]
In the upper left corner of the tactile…
Simplified Image
[Simplified image]
Moving front the top left corner of the image
You can add long descriptions to
HTML 5!
![Page 12: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/12.jpg)
Page 12
Poet: Crowdsourcing Image Descriptions
![Page 13: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/13.jpg)
Page 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 14: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/14.jpg)
Page 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 15: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/15.jpg)
Page 15
Interactive Content / Widgets ● Simulations ● Interactive Number Lines ● Quizzes ● 3D models ● http://www.w3.org/community/stemwidgets
![Page 16: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/16.jpg)
Page 16
How Can We Discover Accessible eBooks?
![Page 17: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/17.jpg)
Page 17
Schema.org Can Provide an Answer
![Page 18: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/18.jpg)
Page 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 19: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/19.jpg)
Page 19
Accessibility Properties
• auditory, textual, visual Access Mode
• alterna5veText, MathML, cap5on Media Feature
• hasAdapta5on, isAdapata5onOf Alterna5ves
• flashing, mo5onSimula5on Access Hazard
• AccessAPI, controlFlexibility Others
http://a11ymetadata.org
![Page 20: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/20.jpg)
Page 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-accessibility-metadata/
![Page 21: Born Accessible - Books in Browsers](https://reader036.vdocuments.mx/reader036/viewer/2022062707/558675b3d8b42ae16d8b4763/html5/thumbnails/21.jpg)
Page 21
What can you do?
1. Leverage standards, such as HTML 5, WAI-ARIA, 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