Moving STEM Documents Online

---

Sustainable Workflows for Accessible Content

Overview

• Accessibility
  • Why is it important?
  • Why now?
• STEM Accessibility
  • Why is it hard?
  • Why is it even more important now?
• Bridging Technologies for STEM
  • Some example workflows
  • Some authoring tips
  • How to check your work?

What is Accessibility?

• Overcoming the barriers that we build

👁 Visual: blindness, low vision, impaired vision, distracted vision

👂 Aural: deaf, hard of hearing, distracted hearing

🖐 Movement: no mouse use, slow reaction time, limited fine motor skills

🧠 Cognition: Dyslexia, Dyscalculia, Distraction, Memory deficits

We are all not fully able at some point in our life

• Temporary and situational disabilities

Inclusive Education

• Equal access to education regardless of special needs
• Accessibility of teaching material is key to inclusion
• Provision of alternative formats
• Provision of specialist help
• Often only K-12. And then what?

Historical Solutions

• Learning and reading material in Braille or large print
• Textbooks audio recorded by expert readers, allowed for independent study
• Use of models, tactile prints, swell paper, etc. in class
• Complex content could only be interpreted/explained by a human
• Exams: Specialist support needs to be provided, often one-on-one

The Present and Future

• Most content is in electronic form
• Anyone can prepare material, often on the fly
• Moving to web based learning management systems
• Students are expected to work through material independently

And what about Covid-19?

• Everything is being rushed online
  • Teaching, Learning, Exams, Social Interaction
• Creates even more barriers:
  • No experts can read formulas in person
  • You can not have an amanuensis at home
  • Subtitling your lecture video
  • Fairness at exams

Accessibility in a Pandemic

An afterthought?

• "Don’t we have more important problems now?"
  • No, you need to more content online anyway
  • You might as well do a good job
  • Don't accrue technical debt
• "But it has to be fast!"
  • It often only needs little (or no) extra work
  • (the right) knowledge is key
• "Target audience is too small"
  • Not just for persons with special needs
  • Everyone can benefit
  • Example: Function image

Example (1): Function (Bitmap Image)

Source: Wikipedia

The red curve is the graph of a function, because any vertical line has exactly one crossing point with the curve.

• Poor choice: Bitmaps (png, jpg, gif, ...) do not scale!

Example (2): Function (SVG)

Source: Wikipedia

The red curve is the graph of a function, because any vertical line has exactly one crossing point with the curve.

• Better choice: Scalable vectors graphics scales.
• Problem: Color reference is useless if you change to high contrast.

Example (3): Function (Color Reference)

Source: Wikipedia

The red curve is the graph of a function, because any vertical line has exactly one crossing point with the curve.

• One solution: Text color in line with graph color.
• Still a problem: Useless for monochromatic colors.

Example (4): Two Functions (Two References)

Source: Wikipedia

Graph of two trigonometric functions: sine and cosine. Sine is the red solid curve. Cosine is the blue dashed curve.

• Good practice graphics: Use of SVG.
• Good practice captioning: Reference by color and pattern.

Defining Accessibility

• Web Content Accessibility Guidelines (WCAG)
  • ~60 "Success Criteria" across 3 Levels: A, AA, AAA
  • A&AA is the legal basis in most countries, AAA optional/ideal
  • Not just the web but electronic material in general
• WCAG's core principles: POUR
• For all users all content must be:
  • Perceivable: Alt text, sub-titles
  • Operable: Keyboard, touch
  • Understandable: Language of a document
  • Robust: Not just for Browser X on OS Y

WCAG for STEM content?

• Even if WCAG is satisfied, STEM is rarely accessible.

Because STEM is different (and hard)

• STEM brings together some of the hardest a11y problems
  • Specialised vernacular, scripts, tables, formulas, diagrams
  • Animations, simulations, Interactive exercises
• STEM are infinite languages
  • meaning shifts, vernacular is added
  • aimed at diverse audiences (pubils, students, scientists)
  • difficult to understand (in particular automatically)
  • precision is important (vague recognition is not enough)
• Standard declarative approaches often fail
• Many solutions are good for K-12 only

STEM Accessibility: Common Myths

• PDF is accessible
  • Very rarely, and definitely not when it comes to Maths content
• Content needs to be in MathML to be accessible
  • No! In fact tools like MathJax can do a much better job when supplied with LaTeX
• If all Math were in MathML we have solved the accessibility problem
  • Definitely not for advanced Mathematics
• My content is too complex to make accessible
  • Often not the content but the way it is authored
• I don't want to change how I author
  • You don't have to. You just need to be a bit more careful.
  • And have a some knowledge on some of the target technology.

Traditional vs Electronic Content

• The Web as a Superset Medium
  • Replicate print media but it can do so much more!
• Content provision
  • render ⟹ deliver vs deliver ⟹ render
• The medium is now vertical. We scroll.
  • width/height fixed vs varied width/infinite height
• Pagination vs Reflow
  • content position vs content order

GBU Maths Content

• Really old
  • Rendered as a bitmap image
  • Fixed resolution, does not scale, information lost
• Somewhat old
  • Rendered with HTML elements
  • Often ugly, no nesting, limited expressiveness
• More modern
  • Rendered as SVG images
  • Scales, some information contained, needs to be pre-prepared
• Fully rendered
  • Rendered on the fly in the browser
  • Scales, information can be embedded

All this is still used. But they are only visual; sometimes we want more.

Example: Interactivity and Screenreading

• Listen to the quadratic formula $$ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$
• Source in LaTeX
• Rendered with MathJax
  • Javascript library for rendering LaTeX, AsciiMath, MathML in all browsers
  • One extra line of HTML
• Accessibility "built-in"

Compute Speech

• Enrich Math using Speech Rule Engine
• Javascript library for translating XML into Speech (markup)
• Open source library available at github
• Only Math speech solution in JavaScript
• Runs in browser, command line, as node module.
• Initially implemented in the context of ChromeVox
• Speech solution for: ChromeVox, MathJax, EquatIO, MathLive, ...

Generate and Embed Semantics

• Math markup (e.g., LaTeX, MathML) are not very expressive
• MathJax rewrites internally into semantically improved term structure

    ax^2+bx+c=0

<math>
  <mi>a</mi>
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
  <mo>+</mo>
  <mi>b</mi>
  <mi>x</mi>
  <mo>+</mo>
  <mi>c</mi>
  <mo>=</mo>
  <mn>0</mn>
</math>

Separation of Concerns

Distinct technologies addressing separate concerns/purposes.

Separation of Concerns on the Web:

• HTML for structure/semantics
• CSS for presentation/layout
• JavaScript for interactivity/context adaptation
• SVG for scalable vector graphics
• WAI-ARIA for (human-oriented) semantics/accessibility
• RDF, Owl, etc. for (machine-oriented) semantics

Hide semantics: One source, many alternative formats

Alternative Formats for Math

• 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} $$

Other Formats:

• General E-books, Epub3, etc.
• 3D printing and embossing
• Fulltext translation to Braille, e.g., PreText to Nemeth
• But also computational elements for JupyterLab, Sage, R, Maple, MatLab
• Subtitling, e.g., via automatic text generation

What about STEM Diagrams

• WCAG says: Provide alternative text
• For STEM diagrams this is generally not enough
• Try to conveying information on a molecule in a Tweet
• Automatic recognition works pretty well for "information free" images
• In STEM you need precision
• Interaction is even more important if you cannot see it
• Even more important than for formulas:
  • Convert sources carefully
  • Generate the right format
  • Include sufficient information

Graphical content

• Bitmap images: jpeg, png, tiff, etc.
  • Fixed in size
  • No scale, no zoom, no semantics
• SVG format: Scalable Vector Graphics
  • Scalable
  • Grouping and descriptions allow for some semantics
  • Additional data can be embedded
• Bitmaps vs SVG
• SVG with information

Get Semantics from Scratch

• Image analysis and recognition
• Alternatively: Unique Identifiers
• Generation of annotated SVG
• Semantic enrichment
  • Recursively identify major components
  • Use web services for naming
• Generate hierarchical navigation structure

Chemistry Example

Generate with Knowledge

• Easiest way to embed knowledge is, if I know what I am talking about
• If you have the Chemical specification (mol, cml, Smiles) results are perfect
• Know the formats you are working with

Other Examples

• Data visualisations directly generated from statistical models
• R statistics package
  • Authors do not even realise that it is accessible out of the box
• HighCharts, ViewPlus

Statistics Diagram Example

Some Sample Workflows

• Workflows for bulk conversion of documents, not formula by formula
• Maximum automation, minimum interaction
• Do not change your authoring habits
• Do not be afraid of the command line
• Make output as future proof as possible:
  • Technology of tomorrow might be provide accessibilty to content of today
  • Retain as much semantics/information/sources as possible

A tex4ht Workflow

• Source: LaTeX
• Target: HTML

tex4ht and make4ht are part of standard TeX distributions

htlatex filename.tex "xhtml,html5,charset=utf-8" " -cmozhtf -utf8"

Equivalent and simpler:

make4ht foo.tex

To enable mathjax:

make4ht foo.tex "mathjax"

Optional TeX drivers, e.g. \def\pgfsysdriver{pgfsys-dvisvgm4ht.def} for tikz

A pandoc Workflow

• Sources: Word, Markdown, LaTeX, ...
• Target: many (here HTML)

Pandoc: Universal document converter. Simple use:

pandoc input.tex -o output.html --standalone

If pandoc uses dated/wrong MathJax URL, add option:

--mathjax=https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg-full.js

To get as much TeX out (but as little processing) as possible:

--raw-tex

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 as only source

Source: Nothing but inaccessible PDF

• Surprisingly difficult problem
• Requires: pattern recognition or OCR
• Maxtract system (2008), currently reworked at IIT India
• Infty system, also for general Math OCR
• State of the art is improving, but not quite there yet

Other Alternative Formats: Braille

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
• Current pipeline is mainly a prototype
• Tactile graphics still done primarily manually
• Project with the NFB, PreTeXt and AIM

Graphics

• LaTeX graphics packages:
  • tikz: tex4ht has decent support
  • xyPic: MathJax extension for rendering
  • pstricks: best to be avoided
• Statistics: Try BrailleR
• Chemistry: Progressive Access
• Maps and Data visualisation: Highcharts

Authoring for the Web

• Stop thinking "print only"
  • You are no longer bound to a paper size
  • Spacing should be flexible, colors can change
• Reflow vs Pagination
  • Do not assume pages for referencing, positioning, etc.
  • Graphics, tables, images might be in different positions
• Size really matters
  • Content can be viewed on various form factors
  • Make sure it displays fine even on extreme zoom
• Remember: There might be more than one output format

Note: That does not mean we want you to change your authoring workflow!

Some Tips for Math Authoring

• no plain TeX - LaTeX only please!
• use standard environments for lists, figures, tables
  • no custom counters, \item[...]
• avoid spatial and layout manipulation
  • no box hackery, e.g., parbox, minipage, pbox, fbox, raisebox, rotatebox
  • hardcoded linebreaks, linelengths, whitespace
• try to write clean math
  • avoid mixing text and math mode
  • avoid large tables in math mode (consider tabular)
  • avoid long inline equations (no linebreaks)
  • use auto aligned environments
  • no punctuation near math
• ...

Is your document accessible? Just try.

Do some simple tests that consume very little time

• Zoom
  • How does content react when zooming in or out?
  • Just a few key strokes
• High Contrast
  • What if you change the colour palette?
  • One Chrome extension, one key stroke
• Keyboard interaction
  • Can you reach everything without a mouse?
  • Multiple keystrokes

Try it yourself (2)

• Form Factors (desktop, laptop, tablet, mobile ... )
  • Simulate in browser
• Screen reading
  • Try a screen reader yourself
    • Windows: NVDA, Jaws, Narrator (Windows + Enter)
    • Apple: Voiceover (Command + F5)
    • Linux: Orca
    • Chrome/ChromeOS: ChromeVox
• Audit tools
  • Many are freely available. Try Lighthouse in the dev tools.
  • ...

Conclusions

• Basic mechanisms for accessible STEM on the web are available
• We just have to use them right
• Do not change your authoring tools just your habits
  • Better to learn a bulk workflow than yet another markup standard
  • Get familiar with the issues and the dos and don'ts
• Stay future ready:
  • Preserve as much information as possible
  • Once it is an image the information is lost!
  • When producing formats like MathML do not throw away your LaTeX!

Deep Dives and Other Sources

• Past material from conferences: AHG, CSUN, Empower
• AMS Workshop
• There might be a JMM Workshop in 2022
• MathJax Documentation
• We also offer bespoke training and seminars