Using accessible Maths on the Web

Part 2: Using and customising MathJax v3.0 accessibility extension

Overview

  • Short overview of a11y features
  • Intro to the MathJax context menu
  • Starting and working with the a11y extension
  • Customising the experience
    • In the content
    • As a user
  • An overview on server side rendering

What you need

MathJax’s Assistive Technology Extension

  • Inbuilt and optional accessibility features
  • Selectable in context menu since MathJax v2.7
  • Much improved in MathJax v3.0

More details at: http://docs.mathjax.org/en/latest/basic/a11y-extensions.html

See also (based on v2.7): https://www.mathjax.org/mathjax-accessibility-extensions-v1-now-available/

MathJax’s AT Features

  • Interactive Exploration
  • Magnification
  • Highlighting
  • Speech Generation in multiple rule sets
  • Braille Output
  • Responsive Equations and Abstraction

Interactive Exploration

  • “Walkers” allow to interactively dive into mathematical expression
  • Synchronised highlighting together with aural rendering
  • Use <enter> to explore expressions
  • Simple navigation model using arrow keys
  • Different types of walkers: syntactic, semantic
  • Interactive collapse and expansion of sub-expressions

Aural Rendering and Highlighting

  • Speech strings are computed with Speech Rule Engine (SRE)
  • Currently uses the MathSpeak rules: verbose, brief, superbrief
    • Special summarisations for collapsed parts
    • Other rule sets and localisations in the future
  • WAI-ARIA and CSS to implement interactive exploration
    • Speech output by updating ARIA live regions
    • Colour/contrast changes by rewriting CSS properties
  • Speech strings can be precomputed or generated on the fly
  • Works with all platforms, browsers, and screen readers supporting live regions

Version 3: Larger Choice of Rule Sets

  • MathSpeak (already in v2)
    • Very strict disambiguation with three verbosity levels
  • Clearspeak (sponsored by Mozilla foundation)
    • Less disambiguation, more geared towards highschool and undergraduate level Math
    • Multitude of difference preference settings
  • Nemeth Braille (sponsored by Big Ten Academic Alliance)
    • Does NOT use liblouis!
    • Translates all Unicode math fonts to Braille
    • Integration into MathJax: Speech and Braille exposed via screen reader and Braille display

Version 3: Specialist Domain Specific Rules

Sponsored by Simons Foundation

  • A number of specialist rules for other domains
  • Aims to further close the semantic gap
  • Exploit richer information in LaTeX notation
    • Physics: Bra-Ket
    • Logic: Inference notation
    • Chemistry: Units and Chemical Equations

Magnification

  • Zoom feature for single math expression
  • Magnification up to 500%
  • Option selectable in context menu
  • Simple triggered by mouse and keyboard
  • Goal directed zoom during interactive exploration

Responsive Equations

  • Responsive design enhances reflow and readability of math documents
  • Automatic reflow for simplifying layout, adapting to form factor of display and magnification
  • Intelligent linebreaking by exploiting semantic enrichment
    • Don’t break in the middle of an expression
  • Chunking: Abstracting over large elements
    • Collapsing mathematically meaningful sub-expressions

The Context Menu

  • The A11y extension is switched on using the context menu
  • Each math expression in the page will has a context menu attached
  • The context menu is fully keyboard accessible
  • You can <TAB> between math expression in a page. This allows you to easily get focus.

Opening the Context Menu

  • Focus a math expression on your page (use <TAB>) if necessary.
  • It can be opened with
    • Right-clicking on the expression
    • Pressing <SPACE> when focus is on the expression

image

Switching on Accessibility

  • Navigate down to the Accessibility submenu entry
  • Open the submenu entry
  • Hit the Activate command

image

Switching on Accessibility

  • Once activated the a11y extension is loaded.
  • Depending on the size of the page and the number of expressions this can take a couple of seconds.
  • The extension initialy loads a default setting that allows for
    • Interaction
    • Speech output (with subtitles)
    • Braille output (hidden from view)
    • Basic highlighting
  • More options are available in the accessibility submenu

Investigating the Accessibility Menu

  • To investigate the Accessibility submenu open the context menu again.

  • Go to Accessibility and open the submenu

  • There you can see submenus for the main features: Speech, Highlight, Magnification, and Semantic Info

  • Each of the submenus has entries to control these options. For example, the Speech submenu contains also submenus to change the rules to customise how the Math is spoken.

    image

Starting the Explorer

  • Navigate to a math expression

  • Press <ENTER> to start the explorer

    image

  • You should now hear the expression spoken by your screenreader

  • Alternatively, you can read the subtitles

  • If you have a Braille display attached you should get Nemeth Braille feedback.

Starting the Explorer

NOTE:

Depending on the implementation quality of the particular browser/screenreader/OS combination (especially Chrome and IE), users might have to disable screenreader reading modes (e.g., “browse mode” in NVDA, “virtual cursor” in JAWS) before being able to launch the MathJax explorer application.

Exploring the Expression

  • You can now explore the expression with the arrow keys
    • <Down> Explore next lower level in the sub-expression tree.
    • <Up> Move up the sub-expression tree.
    • <Right> Navigate the expression horizontally right on the level.
    • <Left> Navigate the expression horizontally left on the level.
  • <Escape> Lets you leave exploration mode.

image

Keyboard Navigation

  • There are a number of other keyboard commands that let you explore an expression.
  • For example:
    • <Space> Gives you positional information.
    • <X> Summarise the expression under cursor.
    • <Tab> Repeats previous speech-text.
    • <Home> Navigate directly to top-most level of expression.
  • For a comprehensive list of commands see http://docs.mathjax.org/en/latest/basic/explorer-commands.html

Choice of Rule Sets

  • SRE implements a number of rule sets
  • Many are exposed in MathJax. Primarily:
    • MathSpeak: A very precise but verbose set
    • ClearSpeak: More natural language, but less disambiguating
  • In addition each rule set has a number of styles or preferences (in case of Clearspeak).

Switching Rule Sets by Keyboard

  • <>> Switch rule sets between MathSpeak and ClearSpeak, if both are available for the current locale.
  • <<> Cycle styles or preferences for the currently active rule set.

image

Switching Rule Sets in the Page

  • Initially MathJax returns MathSpeak for an expression
  • While you can change this by keyboard, whenever you reload the page and start the explorer on an expression
  • We now want to customise MathJax to always initially return ClearSpeak
  • For this we need to first learn how to customise MathJax in the page

The MathJax Configuration Object

  • MathJax can be customised in the page content via JSON object
  • It has to be initialised in a script tag before the CDN call
  • It allows to customise the various MathJax modules
  • You can also set a large number of options. These are divided again by the module they belong to.

Exercise: Set Default Speech Rules

  • Open you HTML file in an editor

  • Add the following script tag

    <script type="text/javascript">
  MathJax = {
    options: {
      a11y: {
        speechRules: "clearspeak-default",
      },
    },
  };
</script>

Exercise: Set Default Speech Rules (Ctd.)

User Customisation

  • Users can still overwrite these options with their personal preferences using the context menu.
  • Open the context menu
  • Go to: Accessibility (>) Speech (>) Mathspeak Rules (>) Verbose
  • Now reload the page
  • Start the explorer
  • You should now hear MathSpeak “x equals StartFraction negative b…”
  • MathJax uses a cookie to remember menu settings
  • Anything explicitly set in the menu will always overwrite settings made by the content/page author.
  • Thus a user can always retain their personal setting
  • They are retained until cookies for a page are deleted

Abstracting Subexpressions

  • Go to: Accessibility (>) Speech (>) Collapsible Math
  • This allows you to abstract sub-expressions
    • With the mouse by left-clicking on it
    • With the keyboard by hidding <->
  • You can see which subexpression can be abstracted
    • as the mouse pointer changes on hover
    • when pressing <SPACE> during exploration it is announced
  • In the quadratic equation the fraction and the square root can be abstracted
  • Speech is adapted to a summary, accordingly.

image image

Note, speech output currently only works reliably in Mathspeak.

Exercise Advanced

We now want to customise MathJax to do the following:

  • Enter an inline Math expression of the form:

    $ax^2 + bx + c = 0$

  • Generate SVG rather than CSS/HTML

  • Change the highlighting to:

    • Background black and fully opaque
    • Textcolor yellow

  • Or alternatively the speech to Mathspeak with superbrief style.

Hint: What needs changing?

  • Load tex-mml-svg.js instead of tex-mml-chtml.js

  • Tell the tex module to use

    inlineMath: [["$", "$"]];

  • Pass the following options to the a11y:

      foregroundColor: 'yellow',
  backgroundColor: 'black',
  backgroundOpacity: 1

Solution Simple Exercise

<html>
  <head>
    <script type="text/javascript">
      MathJax = {
        options: {
          a11y: {
            speechRules: "clearspeak-default",
          },
        },
      };
    </script>
    <title>Empower-19 Exercise</title>
    <script
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
      type="text/javascript"
    ></script>
  </head>

  <body>
    <h1>Quadratic Equation</h1>
    \[ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} \]
  </body>
</html>

Solution Advanced Exercise

<html>
  <head>
    <script type="text/javascript">
      MathJax = {
        tex: {
          inlineMath: [["$", "$"]],
        },
        options: {
          a11y: {
            foregroundColor: "yellow",
            backgroundColor: "black",
            backgroundOpacity: 1,
          },
        },
      };
    </script>
    <title>Empower-19 Exercise</title>
    <script
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"
      type="text/javascript"
    ></script>
  </head>

  <body>
    <h1>Quadratic Equation</h1>
    \[ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} \]
  </body>
</html>

Serverside Rendering and Speech

  • MathJax comes also as a node module
  • Likewise Speech-Rule-Engine (SRE) comes as a node module
  • This allows you serverside rendering of Math or speech output
  • Inclusion into your own projects
  • Extension and customisations
  • Particularly useful for static pages (e.g. with SVG), ePubs etc. containing speech annotations