Slide 1

Accessibility is AccessibleSue-Ann Ma, DIAGRAM Center, BenetechJune 16, 2016

Page #

6/27/2011Digital Image and Graphics Resources for Accessible Materials1

Benetech: A Different Kind of Tech Company

Global LiteracyMaking reading accessible to everyone, such as those with disabilities

Human RightsEmpowering human rights defenders to pursue truth and justice

Benetech LabsExploring new technology and engaging communities for social impact at scale

Page #

6/27/20112

DIAGRAM Center CommunityMost wonderful collaboration I have ever been a part of. DIAGRAM Community Member

Page #

6/27/2011Digital Image and Graphics Resources for Accessible Materials3

Basic Image Accessibility

Page #

4

Critical Diagrams Found in STEM

Page #

6/27/2011Digital Image and Graphics Resources for Accessible Materials5

Accessible Images: Challenges

Page #Accessible Images: Challenges: ExpertiseLack subject-matter expertiseNot familiar with accessibility & standardsIndividuals possess varying levels of expertiseTime and CostTime to find referencesTime to get trained up on best practicesTime and cost required to produce contentCost-benefit: limited user reach when produced adhocUser-Centric Resources & GuidelinesLack guidelines for a broad range of image typesMinimal examples produced by expertsConfusing standards that are constantly evolving Unsure how to incorporate new technologies6/27/2011Digital Image and Graphics Resources for Accessible Materials6

Poet Image Description Training Module

Page #Word and HTML version of DIAGRAM Image Description Guidelines available at: http://diagramcenter.org/table-of-contents-2.html#book

6/27/2011Digital Image and Graphics Resources for Accessible Materials7

When to describe

Page #Decision Tree developed through DIAGRAM subcontract with Touch Graphics; available at: https://diagram.herokuapp.com/training/when_to_describe6/27/2011Digital Image and Graphics Resources for Accessible Materials8

Demo of Poet Image Description Training Module

Page #Video demonstrating how the interactive series of questions that takes users through the decision of when a text-based or alternative mode is needed for an image/diagram.6/27/2011Digital Image and Graphics Resources for Accessible Materials9

How to describe (in development)

Page #General guidelines that apply when writing descriptions for any image/diagram6/27/2011Digital Image and Graphics Resources for Accessible Materials10

General Image GuidelinesCategory#Image TypeStyle & Language1Context is Key2Consider Your Audience3Be Concise4Be Objective5General to Specific6Tone & LanguageFormatting & Layout7Insets8Page Layout

Page #Table of General Style Guides:Style & LanguageContext is KeyConsider Your AudienceBe ConciseBe ObjectiveGeneral to SpecificTone & Language Formatting & Layout InsetsPage Layout

Example of a general guideline for Consider Your AudienceGeneral Guidelines:Know your target reader (e.g. age, culture, subject-matter expertise).Use vocabulary and phrases appropriate for the reader.Reference examples and details that the reader will understand (this includes objects and attributes used in the description).Description: this is a photograph of the Louvre Museum in France at night. The entrance to the museum is a large pyramid made out of glass. Image in Context:This photograph of the Louvre is part of an introduction to a chapter in a history textbook for young children. The description uses language and introduces shapes appropriate for a young child.

6/27/2011Digital Image and Graphics Resources for Accessible Materials11

Practice describing

Page #Additional, self-paced resource allowing users to practice writing image descriptions, developed in collaboration with NCAM (National Center for Accessible Media).

6/27/2011Digital Image and Graphics Resources for Accessible Materials12

Expanded Image Categories & Types#Image Type1Bar Chart2Complex Diagram/Illustration3Flow Chart4Line Graph5Mathematical Equation6Pie Chart7Scatter Plot8Standard Diagram/Illustration 9Table10Venn Diagram

Category#Image TypeArt, Photos & Cartoons1Drawings & Paintings2Photographs3Cartoons & ComicsChemistry4Chemical ElementDiagrams: Illustrated5Comparing Objects, Simple6Comparing Objects, Complex7Comparing Events Over TimeDiagrams: Relational8Venn Diagrams9Radial/Web Diagrams10Hierarchy / Tree Diagram11Flow Charts12CyclesGraphs13Bar Graphs14Line Graphs15Pie Graphs16Scatter PlotsMaps17Geographic Map18Political MapMathematics19Graphs20Math Diagrams21Geometry22Equations & ExpressionsTables23Simple24ComplexText Only Images25Nutrition Label26Timeline

Page #Expanded from 10 to 26 Image Types, expanding beyond STEM to include templates for images such as maps, photos, and art. Also applied categories for grouping ease.

6/27/2011Digital Image and Graphics Resources for Accessible Materials13

Examples, Guidelines & Templates

Page #The practice writing section also provides template-based description guides from Touch Graphics and MathTrax.6/27/2011Digital Image and Graphics Resources for Accessible Materials14

Image Description ModuleSimplified framework for entering descriptions Applies the latest standards for EPUB3 and DAISY

Page #

6/27/2011Digital Image and Graphics Resources for Accessible Materials15

Making Math Accessible

Page #

16

Making Digital Math Accessible

(sqrt 54 = x^3)

See

HearStart Root 54 End Root equals x cubed

Page #

6/27/2011Digital Image and Graphics Resources for Accessible Materials17

Visual Rendering of Math by BrowsersBrowser 1

Browser 2

Browser 3

Page #A solution that supports visual rendering across a range of platforms/browsers: Browser 1: PNG by TeX on FirefoxBrowser 2: MathML by browser on FirefoxBrowser 3: MathML by browser on Chrome or IESample equations pulled from Mozillas MathML Torture Test: https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/MathML_Torture_Test?redirectlocale=en-US&redirectslug=Mozilla_MathML_Project%2FMathML_Torture_Test6/27/2011Digital Image and Graphics Resources for Accessible Materials18

Aural Rendering of Math Across ATs

NVDA

Orca

Voiceover

Page #Sample math equation with Firefox from: http://www.maths-informatique-jeux.com/blog/frederic/?post/2015/05/06/MathML-AccessibilityVisual rendering of equation from MathJax website: https://www.mathjax.org/6/27/2011Digital Image and Graphics Resources for Accessible Materials19

Demo of MathML Cloud

MathML Cloud: https://mathmlcloud.org/

Page #MathML Cloud is available at https://mathmlcloud.org

6/27/2011Digital Image and Graphics Resources for Accessible Materials20

One Accessible Math Production Tool

Page #

6/27/2011Digital Image and Graphics Resources for Accessible Materials21

Customized to Different Workflows

Page #

6/27/2011Digital Image and Graphics Resources for Accessible Materials22

Demo of Math Support Finder [Beta]

Math Support Finder [BETA]: http://msf.mathmlcloud.org/

Page #Math Support Finder [BETA] is available at: http://msf.mathmlcloud.org/

6/27/2011Digital Image and Graphics Resources for Accessible Materials23

Reading Digital Math Accessibly

Page #Next step after the production of accessible math content is to help users discover what tools can be used to read math accessibly.6/27/2011Digital Image and Graphics Resources for Accessible Materials24

Word (.doc) Support?

Page #Search according to tools used by the end-users. In this example, two results are returned when searching for configurations using Word (desktop). 6/27/2011Digital Image and Graphics Resources for Accessible Materials25

Questions?

Page #

26

ReferencesBenetech: benetech.orgDIAGRAM Center: diagramcenter.orgImage Descriptions:Poet Image Description Training Module: https://diagram.herokuapp.com/training/indexImage Guidelines document: http://diagramcenter.org/table-of-contents-2.html Math: MathML Cloud: mathmlcloud.orgMath Support Finder: msf.mathmlcloud.org

or email Sue-Ann: sueannm@benetech.org

Page #

6/27/2011Digital Image and Graphics Resources for Accessible Materials27