Document Accessibility

---

STEM Documents

Overview

• STEM on the Web
  • Text and layout
  • Maths on the Web
  • Diagrams: Chemistry, Statistics, etc.
• Converting Math Document
  • Concentrating on Formulas
  • Good vs Bad rendering

Beyond Simple Textual Content

• What about STEM content?
• Even if WCAG is satisfied, STEM is rarely accessible
• Why?

Easy answer: Because STEM is hard!

Long answer: It depends... but STEM is hard!

STEM content

Combines some of the hardest A11y Problems

• Highly specialised vernacular
• Different scripts
• Tables
• Formulas
• Diagrams
• ...

And that's only the traditional content

Modern STEM Content

• Animations
• 3D graphics
• Videos
• Dynamic content
• Simulations
• Interactive content

Let's look at some of the problems

Scripts and Vernacular

• A mix of scripts
• Vernacular can not be
• Interpretations are often naive
• Screen reader example

Note, that not every screen reader will generate the same output!

STEM Languages

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

Tables

• More complex than standard text tables
  • DNA code
• Sometimes the visual content is not the table content
  • Vertical extension
  • Empty space
• Key tables (e.g. for maps)

Formulas

Many problems in one

• Audio: What is the reading order
• Zoom: Non-trivial for large formulas
• Highlighting: What is important and needs to be distinguished
• Simplifications: How to simplify the symbol clutter
• Subtitles: Voice recognition very difficult

Formula Examples

• Big formulas
• Broken formulas
• Badly formatted formulas

Graphical Material

• WCAG is satisfied with ALT text
• That is generally not enough
• Example: Biosynthesis
• Alternative formats are important (tactile, audio-tactile)

Advanced Material

• 3D Material DLMF
• Dynamic Calculations
  • Example: Calculator Soup
• Interactive Graphics
  • Example: Philip Stark's SticGUI
• Interactive Simulations
  • Example: Phet Simulations

Looking at Math Documents

What's special?

• Formulas
• Specialist environments
• Equation referenceing
• Cross-referencing

What do we want?

History of Maths on the Web

• 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

Wishlist for Math Documents

Our Math documents on the web should be

• Fully rendered
• Well structured
• Accessible

Everything is possible in HTML

Not all is well supported by converters

Conversion of a Math Document

Different Sources:

• Word, Open office doc, etc.
• Markdown
• LaTeX

Working with LaTeX Documents

Source: Arxiv.org

• Download our example
• Unpack the zip file locally and change to directory math_example
• Translate with pandoc

pandoc rademacher.tex -o rademacher.html --standalone

or with make4ht

make4ht rademacher.tex

• Pandoc will give you a number of warning that it cannot conver the TeX

Initial Observations

pandoc result

• does not reflow
• simple math is given as HTML
• complex math is included as code

make4ht result

• reflows
• math is given in two ways
  • images
  • HTML
• but generally ugly

Adding native rendering

• Translate with pandoc

pandoc rademacher.tex -o rademacher.html --standalone --mathjax

or with make4ht

make4ht rademacher.tex "mathjax"

This now should give nicely rendered math

Fixing layout issues

• The document translated with pandoc does not reflow. This is due to the CSS command that restricts the page width. We can get rid of it in the rademacher.html file. Open with Ascii editor (not word)

First remove

      max-width: 40em;

The document should now reflow. There are still a number of padding elements which might be annoying.

Fixing layout issues (2)

We can remove superfluous padding too:

      padding-left: 50px;

Removes the padding on the left hand side.

      padding-right: 50px;

Removes the padding on the right hand side.

• Note, that if you do the conversion with make4ht a lot less styling will be added by default. While this makes it somewhat less pretty, it ensures more flexibility.

Converting a Word Document

Source: Peter Krautzberger

• Download the example
• Translate with pandoc

pandoc word.docx -o testme.html --standalone --mathjax

• Alternatively save directly as HTML file from Word
• Observe the differences:

Understanding MathJax

• MathJax is a JavaScript library for rendering Mathematics in all browsers
• Can take LaTeX, AsciiMath, and MathML as input
• Generates browser output, e.g. HTML/CSS, SVG
• De facto rendering solution of (nearly) all Mathematics on the web
• Provides accessibility extension
• MathJax IS NOT MathML!

Including MathJax

MathJax is generally included. If not, it is easy to add a script tag to the header of the HTML file:

<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

This loads a basic configuration, which finds LaTeX and MathML code in the page and translates it into HTML with CSS styling.

MathJaxstill might need to be configured.

Look Ahead

Next lecture

• Using MathJax
• Accessibility
• Generating semantics for Mathematics