Accessibility issues with SVG generation

[masenmatthews]

Hey all,

So I'm using this package in hopes of producing an SVG that will be readable with VoiceOver. Essentially, we want to VoiceOver to read the alt text for the SVG the same way that it would if it were MathML. When we generate an SVG for a E = MC2 (pardon the lack of superscript) TeX input, it gets read as "E equals em cee two" by VoiceOver. We've tested this on both Safari and Chrome.

My main question is whether-or-not it's possible to display the SVG with the MathML alt text. I'm not sure if we're misunderstanding the main capabilities of the package or if we're just approaching this wrong. I've attached a code snippet below. Thanks!

const express = require("express");
const app = express();
const port = 3000;

// a simple TeX-input example
var mjAPI = require("mathjax-node");
mjAPI.config({
  MathJax: {
    // traditional MathJax configuration
  }
});
mjAPI.start();

var yourMath = "E = mc^2";

mjAPI.typeset(
  {
    math: yourMath,
    format: "TeX", // or "inline-TeX", "MathML"
    svg: true // or svg:true, or html:true
  },
  function(data) {
    if (!data.errors) {
      console.log(data.mml);
      app.use(express.static("./"));

      app.get("/render", (req, res) => res.send(data));

      app.listen(port, () =>
        console.log(`Example app listening on port ${port}!`)
      );
    }
  }
);

console.log("ayyy");

fetch("http://localhost:3000/render")
  .then(response => response.json())
  .then(data => {
    function render_xml(id, xml_string) {
      var doc = new DOMParser().parseFromString(xml_string, "application/xml");
      var el = document.getElementById(id);
      el.appendChild(el.ownerDocument.importNode(doc.documentElement, true));
    }
    console.log(data);
    render_xml("foo", data.svg);
  });

We've also played around with it to get the MathML output like so:

var yourMath = "E = mc^2";

mjAPI.typeset(
  {
    math: yourMath,
    format: "TeX", // or "inline-TeX", "MathML"
    xmlns: "mml",
    mml: true,
  },

This gives us the alt text that we want but doesn't solve the problem of us wanting an SVG to be produced with the same accessibility values.

[pkra]

Have a look at https://github.com/pkra/mathjax-node-sre