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

1. Born Accessible
Books in Browsers
October 25, 2013

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. 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. 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. Page 5

6. A Critical Strategy
All materials
Born Digital
Must be
Born Accessible
Page 6

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. Images are Challenging (especially STEM)
Page 8

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. 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. 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. Poet: Crowdsourcing Image Descriptions
Page 12

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. 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. Interactive Content / Widgets
●
Simulations
Interactive Number Lines
●
Quizzes
●
3D models
●
● http://www.w3.org/community/stemwidgets
Page 15

16. How Can We Discover Accessible eBooks?
Page 16

17. Schema.org Can Provide an Answer
Page 17

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. 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. 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. 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