Document Accessibility

---

Diagrams

Overview

• Wrap up math: Born accessible
• Diagrams:
  • Vector graphics
  • Tactile, audio-tactile, audio
  • Diverse sources

Taxonomy of Sources

• Retro-digitized
• Born Digital
• Born Accessible

Born Accessible Documents

Conversion to formats that are in principle accessible

• PDF documents
• ePub and similar formats, like Daisy
• Web documents (as discussed in detail)

PDF documents

• PDF can be made accessible, there is even a version: PDF/UA
• Requires a lot of "goodwill" by authors
• Some tools are more suitable for generating accessible PDFs
  • Word good, LaTeX not
• There are a number of tools for accessibility checking
  • Some free
  • Acrobat Pro is proprietary and not free

Generating accessible PDF

• Important: Reading order, Alt Texts, Header nesting
• Word can generate PDF/UA without Math support
• LaTeX has very poor support for PDF/UA
• Adobe Acrobat Pro can help adding accessibility
• Alternatively consider a pandoc workflow via Word
• LaTeX is good for Maths but not for structure

PDF: Current state

No generator for fully accessbile PDF

• Fixing Accessibility issues is
  • Time consuming
  • Often repetitive
  • Only work well in Acrobat Pro (proprietary + not free)
• PDF has multiple layers to hide additional information or alternative formats
  • Poorly supported
  • No flexible reflow

EPubs

• Format is close to HTML5
• Same techniques as for our web documents apply
• Some issues due to XHTML handling: namespaces, etc.
• Epub readers very greatly
  • provsion of MathJax for Math
  • SVG for Diagrams
  • Javascript for accessibility

Let's have a look at the diagram report Test with EPub reader

Other Alternative Formats: Braille

• Tactile output, Abstraction, Summaries $$ \vec{\nabla} \times \vec{F} = \left( \frac{\partial F_z}{\partial y} - \frac{\partial F_y}{\partial z} \right) \mathbf{i} + \left( \frac{\partial F_x}{\partial z} - \frac{\partial F_z}{\partial x} \right) \mathbf{j} + \left( \frac{\partial F_y}{\partial x} - \frac{\partial F_x}{\partial y} \right) \mathbf{k} $$

• This is pushed to a Braille display

Alternative Formats: Tactile Hardcopy

• Tactile textbooks are still transcribed by hand
• Longwinded process, often 6 months
• Math is particular challenging
• Transcriptions can vary depending on transcriber

Tactile Math: Automated Support

Source: LaTeX in PreTeXt format

Target: embossed Braille

• PreTeXt is an XML markup with LaTeX for math.
• PreTeXt books are translated automatically into Braille with
  • Liblouis for the text
  • MathJax for formulas using SRE's Nemeth translation
• Multistep translation pipeline server-side using MathJax
• Tactile graphics generation

Example: Tactile Hardcopies

Tom Judson's Abstract Algebra Book

• Tactile output

Automatic and aided transcription

• Tactile graphics

Intermission

Diagrams and Graphics

• Bitmap images: jpeg, png, tiff, etc.
  • Fixed in size
  • No scale, no zoom, no semantics
• Vector Graphics: SVG, WMF, PGF, EPS
  • Descriptions in terms of points, elements, and shapes
  • Scalable
  • Sometimes additional data can be embedded

Diagrams in Alternative Formats

• Providing Alternative text is generally not enough
• Conveying information of most diagrams in a Tweet is nearly impossible
• Automatic recognition works pretty well for "information free" images
• In STEM you need precision
• Interaction is even more important if you cannot read it
• Converting diagrams can be difficult and SVG are not supported in most Typesetting systems

Information Diagram Examples

• Bitmaps vs SVG
• SVG with information

Scalable Vector Graphics

SVG for scalable vector graphics is part of the web stack

• Drawing via declarative commands
• Grouping and descriptions allow for some semantics
• Animations
• Foreign objects
• Inclusion of namespaces

SVG: Basic Components

Drawing components:

• Basic shapes: circle, line, rect, ellipse
• Complex shapes: polygon, polyline, path
• Text elements: text, tspan

Styling:

• via Tags: style, hatch, hatchpath
• via Attributes: stroke, fill, font-*
• via CSS

SVG: Annotations

SVG can be structured via invisible container elements

• Most important: Grouping tag g
• Others: pattern, symbol, defs, switch

Descriptive Elements

• title: Accessible name element
• desc: Further description on tabbing
• metadata: Structured information, e.g., machine-oriented semantics

SVG: Advanced Components

Transformations via transform attribute

• Direct transfomations via translate, scale, rotate, skewX, skewY
• Compositions via matrix

Animations via tags and attributes

• Timed animation: animate, set
• Motion animation: animateMotion, animateColor, animateTransform
• Associated attributes: begin, dur, to, ...

Conditionals (switch), Nesting (svg in svg), foreign objects, ...

SVG: Simple Animation

The following is a simple timed animation using set:

Animated roots of unity.

SVG: Good vs Bad

Badly constructed SVG

• Drawn elements added "systematically":
  • Lines, characters, circles, etc.
• Global transformations: Prevents magnification
• No annotations

Good

• Semantically grouped elements
• Title and Descriptions elements
• Metadata, hidden landing zones, etc.

SVG: Examples

Bad example:

• Aspirin: visual elements only

Good example:

• Well structured and annotated

Updating bad SVG can be done manually, e.g. Inkscape

Beware of SVG optimisation!

Output Formats

SVG is an ideal basis for various output formats:

• tactile
• audio-tactile
• screen reading
• sonification
• 3D printing
• ...

Tactile Graphics

• Embossing straight from SVG or via PDF
• Braille notation can be problematic

Tactile Graphics Picture

Audio Tactile Graphics

• Combination of tactile graphics and voice output
• ViewPlus IVEO products

Example

Outlook

• Voicing Diagrams
• Sonification
• Advanced Content
• Interaction