Converting Inaccessible STEM Content to Accessible Web Content

Converting Inaccessible STEM Content to Accessible Web Content
Inclusive Publishing Conference, NFB, 1/10/2020

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 progressiveaccess.com

Motivation

Problems

Learning Outcomes

Aims

Aims (2)

Sourcing Semantics

Sources of Semantics

Maths Formulas

Convert from Sources

Open source tools for converting maths documents from diverse sources

pandoc --standalone -t html -o example.html example.md
latexml example.tex | latexmlpost --dest=example.html
pandoc --self-contained -s example.docx -t html -o example.html

Embed Semantics

Generate 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>

Render Accessibly

Example

$$ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$

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

Multi-modality

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

LaTeX to Nemeth Project

LaTeX to Nemeth

LaTeX to Nemeth (Current State)

LaTeX to Nemeth (Potential)

DON'T Rely on Single Standards

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

... or Single Sources

What about Diagrams?

Generate with Knowledge

Example: Accessible Statistics

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, Escape to quit.

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.

Other Examples

Test Live

Live web service

Combined in STEM Documents

Conclusions

Next steps