Moving STEM Documents Online

Moving STEM Documents Online
Sustainable Workflows for Accessible Content

Volker Sorge

University of Birmingham, UK University of Birmingham Crest cs.bham.ac.uk/~vxs

MathJax Consortium MathJax Logo mathjax.org

Progressive Accessiblity Solutions Progressive Access Logo progacc.com

Overview

What is Accessibility?

πŸ‘ 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

Inclusive Education

Historical Solutions

The Present and Future

And what about Covid-19?

Accessibility in a Pandemic

An afterthought?

Example (1): Function (Bitmap Image)

Source: Wikipedia

Function graph

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

Example (2): Function (SVG)

Source: Wikipedia

Function graph

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

Example (3): Function (Color Reference)

Source: Wikipedia

Function graph

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

Example (4): Two Functions (Two References)

Source: Wikipedia

Function graph

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

Defining Accessibility

Notes

WCAG for STEM content?

Because STEM is different (and hard)

STEM Accessibility: Common Myths

Traditional vs Electronic Content

GBU Maths Content

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

Example: Interactivity and Screenreading

Click or focus on the formula and press ENTER to start, Escape to quit.

Compute Speech

Generate and Embed Semantics

    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:

Hide semantics: One source, many alternative formats

Alternative Formats for Math

Click or focus on the formula and press ENTER to start, Escape to quit.

Other Formats:

What about STEM Diagrams

Graphical content

Get Semantics from Scratch

Image of Siramesine: an inaccessible bitmap.

Chemistry Example

NONF
a13 a1 a6 a7 a23 a27 a11 a32 a17a13 a7 a1 a17 a6 a27a1 a17 a11 a32 a23a2 a10 a18 a22 a31 a8 a9 a26 a12a2 a12 a8 a18 a31a2 a12 a10 a9 a22 a26a33 a24 a11 a28 a19 a25a5 a4 a14 a15 a3 a16a20 a29 a21 a30a34 a14a1 a2 a3 a4 a5 a6 a7 a8 a9 a10 a11 a12 a13 a14 a15 a16 a17 a18 a19 a20 a21 a22 a23 a24 a25 a26 a27 a28 a29 a30 a31 a32 a33 a34a1as21b2b13a7b22a17b136a23b190a1as34b13b19a7b20a17b133a23b195a2as55b32b5a12b54a26b220a31b321a2as61b5b22a12b52a26b226a31b320a3as85b12b8a14b84a16b126a4as82b10b1a5b11a15b103a5as81b11b1a4b12a16b116a31b330a6as25b14b24a17b146a27b244a7as22b2b7a1b21a13b73a8as53b4b16a12b44a18b162a20b170a9as64b3b18a10b33a22b185a10as63b3b6a9b34a12b62a11as32b35b15a17b153a25b200a28b260a32b351a11as74b20b26a17b150a25b205a28b263a32b350a12as54b4b5a8b43a2b55a10b60a12as62b5b6a8b40a2b51a10b63a13as23b25b7a7b72a27b254a14as84b8b9a3b85a15b93a34b390a14as101b39a3b80a15b90a34b392a15as83b10b9a14b94a4b102a16as86b12b11a5b111a3b125a17as26b14b13a1b131a6b145a11b150a17as33b13b15a1b134a6b140a11b152a18as52b31b16a8b163a31b311a19as72b36b27a28b273a33b361a20as91b29a8b170a29b292a21as93b28b30a29b282a30b304a22as65b23b18a9b184a26b236a23as35b34b19a1b194a32b341a24as76b21b38a25b215a33b381a25as75b21b20a11b204a24b216a26as66b23b22a2b221a22b235a27as24b25b24a6b245a13b253a28as73b27b26a11b264a19b272a29as92b29b28a21b283a20b291a30as94b30a21b303a33b370a31as51b32b31a18b312a2b325a5b330a32as31b34b35a23b345a11b352a33as71b36b38a19b362a30b370a24b386a34as102b39a14b391b11a4a5b21a1a7b31a9a10b41a8a12b51a2a12b61a10a12b71a7a13b81a3a14b91a14a15b101a4a15b111a5a16b121a3a16b131a1a17b141a6a17b151a11a17b161a8a18b171a8a20b181a9a22b191a1a23b201a11a25b211a24a25b221a2a26b231a22a26b241a6a27b251a13a27b261a11a28b271a19a28b281a21a29b291a20a29b301a21a30b311a18a31b321a2a31b331a5a31b341a23a32b351a11a32b361a19a33b371a30a33b381a24a33b391a14a34as1as111as2as3a1a6a7a11a13a17a23a27a32b2b7b13b14b15b19b24b25b34b35as2as12a1a6a7a13a17a27a1a6a7a13a17a27b2b7b13b14b24b25as3a11a176b130as3as11a1a11a17a23a32a1a11a17a23a32b13b15b19b34b35as7a112as2a14a173b130as4as114as5as6a2a8a9a10a12a18a22a26a31b3b4b5b6b16b18b22b23b31b32as9b173as8b331as5as41a2a8a12a18a31a2a8a12a18a31b4b5b16b31b32as6a25a124b50as6as42a2a9a10a12a22a26a2a9a10a12a22a26b3b5b6b18b22b23as5a21a122b50as7as112a11a19a24a25a28a33a11a19a24a25a28a33b20b21b26b27b36b38as1a114as9b371as8as115a3a4a5a14a15a16a3a4a5a14a15a16b1b8b9b10b11b12as10a144as4b331as9as113a20a21a29a30a20a21a29a30b28b29b30as4b171as7b374as10as116a14a34a14a34b39as8a141as111as1as4as7as8as9as10a1a2a3a4a5a6a7a8a9a10a11a12a13a14a15a16a17a18a19a20a21a22a23a24a25a26a27a28a29a30a31a32a33a34b1b2b3b4b5b6b7b8b9b10b11b12b13b14b15b16b17b18b19b20b21b22b23b24b25b26b27b28b29b30b31b32b33b34b35b36b37b38b39
Click or focus on the diagram and press A to start, Escape to quit..

Generate with Knowledge

Other Examples

Statistics Diagram Example

56789050100150Boxplots for OzoneMonthsOzone
graphics-plot-1-main-1.11chartgraphics-plot-1-xlab-1.11xaxisgraphics-plot-1-bottom-axis-line-1.11xaxisgraphics-plot-1-bottom-axis-labels-1.1.12xaxisgraphics-plot-1-bottom-axis-ticks-1.1.1graphics-plot-1-bottom-axis-ticks-1.1.11xaxisgraphics-plot-1-bottom-axis-labels-1.1.1graphics-plot-1-bottom-axis-labels-1.1.23xaxisgraphics-plot-1-bottom-axis-ticks-1.1.2graphics-plot-1-bottom-axis-ticks-1.1.21xaxisgraphics-plot-1-bottom-axis-labels-1.1.2graphics-plot-1-bottom-axis-labels-1.1.34xaxisgraphics-plot-1-bottom-axis-ticks-1.1.3graphics-plot-1-bottom-axis-ticks-1.1.31xaxisgraphics-plot-1-bottom-axis-labels-1.1.3graphics-plot-1-bottom-axis-labels-1.1.45xaxisgraphics-plot-1-bottom-axis-ticks-1.1.4graphics-plot-1-bottom-axis-ticks-1.1.41xaxisgraphics-plot-1-bottom-axis-labels-1.1.4graphics-plot-1-bottom-axis-labels-1.1.56xaxisgraphics-plot-1-bottom-axis-ticks-1.1.5graphics-plot-1-bottom-axis-ticks-1.1.51xaxisgraphics-plot-1-bottom-axis-labels-1.1.5xaxis2chartgraphics-plot-1-xlab-1.1graphics-plot-1-bottom-axis-labels-1.1.1graphics-plot-1-bottom-axis-labels-1.1.2graphics-plot-1-bottom-axis-labels-1.1.3graphics-plot-1-bottom-axis-labels-1.1.4graphics-plot-1-bottom-axis-labels-1.1.5graphics-plot-1-xlab-1.1graphics-plot-1-bottom-axis-line-1.1graphics-plot-1-bottom-axis-labels-1.1.1graphics-plot-1-bottom-axis-ticks-1.1.1graphics-plot-1-bottom-axis-labels-1.1.2graphics-plot-1-bottom-axis-ticks-1.1.2graphics-plot-1-bottom-axis-labels-1.1.3graphics-plot-1-bottom-axis-ticks-1.1.3graphics-plot-1-bottom-axis-labels-1.1.4graphics-plot-1-bottom-axis-ticks-1.1.4graphics-plot-1-bottom-axis-labels-1.1.5graphics-plot-1-bottom-axis-ticks-1.1.5graphics-plot-1-ylab-1.11yaxisgraphics-plot-1-left-axis-line-1.11yaxisgraphics-plot-1-left-axis-labels-1.1.12yaxisgraphics-plot-1-left-axis-ticks-1.1.1graphics-plot-1-left-axis-ticks-1.1.11yaxisgraphics-plot-1-left-axis-labels-1.1.1graphics-plot-1-left-axis-labels-1.1.23yaxisgraphics-plot-1-left-axis-ticks-1.1.2graphics-plot-1-left-axis-ticks-1.1.21yaxisgraphics-plot-1-left-axis-labels-1.1.2graphics-plot-1-left-axis-labels-1.1.34yaxisgraphics-plot-1-left-axis-ticks-1.1.3graphics-plot-1-left-axis-ticks-1.1.31yaxisgraphics-plot-1-left-axis-labels-1.1.3graphics-plot-1-left-axis-labels-1.1.45yaxisgraphics-plot-1-left-axis-ticks-1.1.4graphics-plot-1-left-axis-ticks-1.1.41yaxisgraphics-plot-1-left-axis-labels-1.1.4yaxis3chartgraphics-plot-1-ylab-1.1graphics-plot-1-left-axis-labels-1.1.1graphics-plot-1-left-axis-labels-1.1.2graphics-plot-1-left-axis-labels-1.1.3graphics-plot-1-left-axis-labels-1.1.4graphics-plot-1-ylab-1.1graphics-plot-1-left-axis-line-1.1graphics-plot-1-left-axis-labels-1.1.1graphics-plot-1-left-axis-ticks-1.1.1graphics-plot-1-left-axis-labels-1.1.2graphics-plot-1-left-axis-ticks-1.1.2graphics-plot-1-left-axis-labels-1.1.3graphics-plot-1-left-axis-ticks-1.1.3graphics-plot-1-left-axis-labels-1.1.4graphics-plot-1-left-axis-ticks-1.1.4center4chartboxplot1boxplot2boxplot3boxplot4boxplot5graphics-root.8graphics-root.10graphics-root.12graphics-root.11graphics-root.14graphics-root.16graphics-root.18graphics-root.20graphics-root.19graphics-root.22graphics-root.24graphics-root.26graphics-root.28graphics-root.27graphics-root.30graphics-root.32graphics-root.34graphics-root.33graphics-root.36graphics-root.38graphics-root.40graphics-root.39graphics-plot-1-points-8.1.3graphics-plot-1-points-8.1.2graphics-plot-1-points-8.1.4graphics-plot-1-points-8.1.1graphics-plot-1-box-1.1.1boxplot11centergraphics-root.8graphics-root.12graphics-root.11graphics-root.14graphics-root.8graphics-root.10graphics-root.12graphics-root.11graphics-root.14graphics-root.81boxplot1graphics-root.102boxplot1graphics-root.123boxplot1graphics-root.114boxplot1graphics-root.145boxplot1boxplot22centergraphics-root.16graphics-root.20graphics-root.19graphics-root.22graphics-root.16graphics-root.18graphics-root.20graphics-root.19graphics-root.22graphics-root.161boxplot2graphics-root.182boxplot2graphics-root.203boxplot2graphics-root.194boxplot2graphics-root.225boxplot2boxplot33centergraphics-root.24graphics-root.28graphics-root.27graphics-root.24graphics-root.26graphics-root.28graphics-root.27graphics-root.241boxplot3graphics-root.262boxplot3graphics-root.283boxplot3graphics-root.274boxplot3boxplot44centergraphics-root.30graphics-root.34graphics-root.33graphics-root.30graphics-root.32graphics-root.34graphics-root.33graphics-root.301boxplot4graphics-root.322boxplot4graphics-root.343boxplot4graphics-root.334boxplot4boxplot55centergraphics-root.36graphics-root.40graphics-root.39outliers5graphics-root.36graphics-root.38graphics-root.40graphics-root.39graphics-plot-1-points-8.1.3graphics-plot-1-points-8.1.2graphics-plot-1-points-8.1.4graphics-plot-1-points-8.1.1graphics-root.361boxplot5graphics-root.382boxplot5graphics-root.403boxplot5graphics-root.394boxplot5outliers55boxplot5graphics-plot-1-points-8.1.3graphics-plot-1-points-8.1.2graphics-plot-1-points-8.1.4graphics-plot-1-points-8.1.1graphics-plot-1-points-8.1.3graphics-plot-1-points-8.1.2graphics-plot-1-points-8.1.4graphics-plot-1-points-8.1.1graphics-plot-1-points-8.1.31outliers5graphics-plot-1-points-8.1.21outliers5graphics-plot-1-points-8.1.41outliers5graphics-plot-1-points-8.1.11outliers5graphics-plot-1-box-1.1.10centerchart1graphics-plot-1-main-1.1xaxisyaxiscentergraphics-plot-1-main-1.1graphics-plot-1-xlab-1.1graphics-plot-1-bottom-axis-line-1.1graphics-plot-1-bottom-axis-labels-1.1.1graphics-plot-1-bottom-axis-ticks-1.1.1graphics-plot-1-bottom-axis-labels-1.1.2graphics-plot-1-bottom-axis-ticks-1.1.2graphics-plot-1-bottom-axis-labels-1.1.3graphics-plot-1-bottom-axis-ticks-1.1.3graphics-plot-1-bottom-axis-labels-1.1.4graphics-plot-1-bottom-axis-ticks-1.1.4graphics-plot-1-bottom-axis-labels-1.1.5graphics-plot-1-bottom-axis-ticks-1.1.5graphics-plot-1-ylab-1.1graphics-plot-1-left-axis-line-1.1graphics-plot-1-left-axis-labels-1.1.1graphics-plot-1-left-axis-ticks-1.1.1graphics-plot-1-left-axis-labels-1.1.2graphics-plot-1-left-axis-ticks-1.1.2graphics-plot-1-left-axis-labels-1.1.3graphics-plot-1-left-axis-ticks-1.1.3graphics-plot-1-left-axis-labels-1.1.4graphics-plot-1-left-axis-ticks-1.1.4graphics-root.8graphics-root.10graphics-root.12graphics-root.11graphics-root.14graphics-root.16graphics-root.18graphics-root.20graphics-root.19graphics-root.22graphics-root.24graphics-root.26graphics-root.28graphics-root.27graphics-root.30graphics-root.32graphics-root.34graphics-root.33graphics-root.36graphics-root.38graphics-root.40graphics-root.39graphics-plot-1-points-8.1.3graphics-plot-1-points-8.1.2graphics-plot-1-points-8.1.4graphics-plot-1-points-8.1.1graphics-plot-1-box-1.1.1
Click or focus on the diagram and press A to start, Escape to quit.

Some Sample Workflows

A tex4ht Workflow

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

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

PDF as only source

Source: Nothing but inaccessible PDF

Other Alternative Formats: Braille

Source: LaTeX (in PreTeXt format)

Target: embossed Braille

Graphics

Authoring for the Web

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

Some Tips for Math Authoring

Is your document accessible? Just try.

Do some simple tests that consume very little time

Try it yourself (2)

Conclusions

Deep Dives and Other Sources