PowerPoint Presentation

Born Accessible Books in BrowsersOctober 25, 2013Page #1What is Accessibility for Print Disabled Students?Jessica, Steffon and Shane are three of 250,000+ members who can access Bookshares library of 210,000+ books, textbooks and periodicals with reading tools tailored to their special needs

http://youtube.com/watch?v=sUMmzi3nmig Page #2Challenge: The Need30 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 #Explain what a print disability is

http://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 UCB3Challenge: Everyones a Content Creator

$1.1 billionin new edtech financing in 2012

2,500% more expensive to retrofit for accessibility from print (or print equivalents)

Page #Organizations like Bookshare and UC Berkeleys DSS cannot scale convert this explosion of content into accessible content.The solution is that..4

Page #A Critical StrategyAll materials

Born Digital

Must be

Born AccessiblePage # and stay that way6Accessible Content HighlightsStructureNavigationSectionsTextReflowableStyle/ContentFormattingTables & ListsHeadersOrderingMathMathMLDescriptionImagesDescriptionsMulti-modal (touch, sound)VideoTrack: subtitles, description, etc.

WidgetsARIAMulti-modalPage #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 & Lists: Headers, OrderingVideo: Track: subtitles, description, etc.7Images are Challenging (especially STEM)

Page #Images:Collection of 4 complex images from the textbook CK-12 Biology I.

6/27/2011Digital Image and Graphics Resources for Accessible Materials8What is an Accessible Image?Provides different mode of access to visual information contained in an image

Beyond just alt text!

Page #Image:Sample tactile graphics being explored by users at DIAGRAM meeting.

9SVG Is Ideal for AccessibilitySVG can contain textual and structured descriptions and datahttp://describler.comhttp://d3js.org/Author with SVG and if need be distribute as PNG/JPEGSVG can more easily be turned into tactile graphicsSVG has potential to be 3D printableSVG can be sonifiedhttp://svg-sonifier.comhttp://github.com/benetech/svg-sonifier

Page #STEM Descriptions Need More than 120 charsAbout this descriptionAuthor: John Doe, Ph.D. in Water EngineeringTarget Age: 9-12Target Grade: 4-7SummaryThe 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 DescriptionThe 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 teacherIn the winter we get snow instead of rain.Simplified Language DescriptionThe 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 tactileSimplified Image [Simplified image]Moving front the top left corner of the image

You can add long descriptions to HTML 5!Page #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! 6/27/2011Digital Image and Graphics Resources for Accessible Materials11Poet: Crowdsourcing Image Descriptions

Page #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.12MathematicsMathML support is taking steps forwardSafari and Firefox visually render MathMLAural rendering in Safari, Chrome(Vox) and is coming in NVDAVisual and aural rendering in IE 9 with MathPlayer pluginBut steps backward as wellChrome dropped MathML supportIE 10 & 11 do not support MathPlayer plugin

Page #NIMAC: National Instructional Materials Accessibility Standards Center recommends MathML 3 in June 2012. 13Stopgap Math Accessibility SolutionsMathJax JavaScript library for all browsers

MathJax + Chrome(Vox) on the server as a web serviceInput: MathML or LaTexOutput: SVG with embedded descriptions or PNG/JPG with alt descriptions

Page #Interactive Content / WidgetsSimulationsInteractive Number LinesQuizzes3D models http://www.w3.org/community/stemwidgets

Page #How Can We Discover Accessible eBooks?Page #6/27/2011Digital Image and Graphics Resources for Accessible Materials16Schema.org Can Provide an Answer

Page #6/27/2011Digital Image and Graphics Resources for Accessible Materials17Recipe HTML 5 Tagging Example