Screen reader accessibility

I've tested with NVDA+Firefox and have the following comments:

https://mathjax.github.io/mj3-demos/tex-svg.html

• expressions have no description / label, they are read inline as "clickable" by NVDA (nvda is detecting a click handler, but it is not finding a label or text to read)
• focusing on expressin and pressing shift+space reads entire expression, but doesn't seem to allow you to navigate as in MathJax2 (walker is checked in menu)

https://mathjax.github.io/mj3-demos/tex-chtml.html

When I look at this with NVDA, screen reader still announces "clickable" when focusing an expression, but the tex input also seems to show up following the expressions.

General Suggestions for Improving MathJax a11y

I posted this a while ago in the MathJax2 issues list, but thought I'd include it here to make it easier to find for those working on V3.

The native accessibility built into MathJax is impressive! The navigation works better than MathPlayer, and I like the fact that the user has a  choice of speech rule sets.  It would be great to be able to retire good old MathPlayer and allow MathJax to handle all accessibility natively.

However, there are two major stumbling blocks which IMO must be overcome before this is truly useful in practice:

1. Currently, if you are reading a web page containing math with a
   screen reader (say NVDA in Firefox), because of the way the screen
   reader handles elements which have a role of "application", and because
   of the way the math is auraly collapsed by default, it is impossible to
   read math in context. For instance, if you had a sentence like "The
   derivative of 2x^2 is 2x", the screen reader would read something like
   the following when it encountered  it in a document: "The derivative of
   application is application". Even if the screen reader didn't hide the
   content behind the application role by default, MathJax is still only
   presenting an abbreviated form in speech at the top level. So, for
   instance, the top level of an equation might be "summation = power" (see
   the first equation following the math input box on asciimath.org).

IMO, MathJax should have a mode, which can be set via the menu, to allow
the expression to be fully spoken at top level, then you can drill down
via shift+space and arrows if you need to.

2. Currently, pressing escape does back you out of the expression, but
   the expression still has browser focus. This means that the screen
   reader's document reading commands are still disabled due to the
   application role. I've been able to mitigate this by applying a global
   keydown handler on the document that when receiving an escape key and
   the element with focus is a MathJax container, blur() the element! This
   works, but it leaves the focus undefined, which makes continuing reading difficult.

-- Rich Caloggero, MIT Adaptive Tech. Info Center

On 4/24/2019 11:37 AM, Mary J Ziegler wrote:
Hi Rich,

Perhaps I'm behind the times, but based on the lack of other replies, I'm not sure if anyone confirmed this for you or not?! Just now, I finally went through this message in detail on both Windows and Mac.

On Windows:
I, too, can navigate the MathJax on asciimath in the manner you describe (with explorer on/assistive math off), but can't do so as well with explorer inactive.
I, too, cannot navigate the same on edX - until I change the math renderer to Common HTML (as is on ascii math), in which case I can.
In both cases, when I turn off explorer, I'm at a loss to get into the detail of the math as when I press shift+space I end up in the context menu. Perhaps I need a different keyboard shortcut to get there with explorer off?

On Mac:
I keep running into the math getting collapsed and not knowing how to un-collapse it. We can look at that together. I can't sort out the keyboard shortcuts on VoiceOver to be sure if this is working or not. That said, it works for me when uncollapsed.

I need to go to my 12 noon event soon. See you in a bit!
Mary

-----Original Message-----
From: Rich Caloggero [email protected]
Sent: Thursday, April 18, 2019 1:45 PM
To: Jeff Witt [email protected]; Mary J Ziegler [email protected]
Cc: accessibility [email protected]
Subject: MathJax Accessibility works without MathPlayer, but not on edX

http://asciimath.org/

MathJax is properly configured on this site. By default, it uses the configuration I suggested (using assistive math). See the MathJax menu by right clicking on an expression) and check out the "accessibility"
submenu).

Now, turn on the "explorer" from the accessibility menu, and after doing this, go back into the accessibility menu and be sure that "assistive math" is turned off; do not change anything else.

Now tab to an expression and press "shift+space". you will now be able to navigate the expression with up, down, left, and right arrows. My suspician is that this will work on MacOS as well as windows. I have not yet tested with jaws.

Another interesting thing is that MathPlayer is no longer needed. Even if you switch back to the "assistive math" mode and turn off the explorer, NVDA still reads the math, and I believe it processes it directly.

Can either of you verify any of this using the above URL?

I cannot get this to work on edX? What version of MathJax is in use on edX?  I have gotten it to work by downloading the latest version of MathJax (2.7.5) and using one of the supplied configuration files "AM_CHTML"; this processes asciimath input, and generates common HTML by default (but you can change the output format via the menu to whatever you want).

I will play around some more, and try to get it to work with TeX input (no reason it should not, but who knows)!

-- Rich

As per last dev meeting.

This v2 config:

MathJax.Hub.Config({
    "HTML-CSS": {
        scale: 100,
        minScaleAdjust: 50,
    },
});

gets converted into:

window.MathJax = {
  chtml: {
    scale: 1,
    minScale: 50
  }
};

IIUC, minScale should also be scaled by a factor of 100 but currently it's just transferred .e.g. Translate.transfer('chtml.minScale') w/o any transformation.

I am trying to rewrite an old mathjax extension (adding Reveal.js specific capability to mathjax equations rendered into the slides) using the new API of Mathjax V3.

I am using the custom-tex-extension example as starting point.

The goal would be to be able to encapsulate part of an equation into its own DOM element on which specific classes have been added.

See the image below for an example:
in this case, I am aiming at isolating the \alpha + 4 part into its own DOM element for which I am adding a danger class. What I get instead is on the right part.

The problem I have is that right now, the part is correctly isolated, but the \alpha + 4 part is not translated and only the raw text is rendered.
This is not surprising since I am giving parser.create('text', text) as child, but I was unable to find how to add the "transformed" nodes instead.

A simplified version of the relevant code is given below.

tex_fragments(parser, name, type) {
    const def = parseAttributes(parser.GetBrackets(name))

    const text = convertEscapes(parser.GetArgument(name))
    
    const node = parser.create('node', 'mi', [parser.create('text', text)], def)
    parser.Push(node)

}

Any guidance on how I could do this would be appreciated.
Thanks a lot and great work on the V3!

Currently there is the line skipStartupTypeset: Translate.transfer('startup.typeset'), in the automated translator. But if skipStartupTypeset was true in MJ2, then the typeset parameter should be false in MJ3 and vice versa.

mfenced displays with a colored background for some reason (debugging code that wasn't removed?)

Two examples:

<math display='block' xmlns='http://www.w3.org/1998/Math/MathML'>
<mfenced> <mrow><mn>2</mn><mi>x</mi><mo>+</mo><mi>y</mi> </mrow></mfenced>
</math>

<math display='block' xmlns='http://www.w3.org/1998/Math/MathML'>
<mfenced open=')' close='('> <mn>1</mn><mn>456</mn> <mrow><mn>2</mn><mi>x</mi><mo>+</mo><mi>y</mi> </mrow></mfenced>
</math>

Here's how they display:

The first alpha on npm has a drawback when it comes to the harcoded fonts. They end up in node_modules/mathjax3/mathjax2/css/... so if you build something you need to copy these along.

Of course that's not hard -- the copy-webpack-plugin is your friend, e.g.,

// $ npm install mathjax3 webpack copy-webpack-plugin babel-core babel-preset-env babel-loader uglifyjs-webpack-plugin

const Uglify = require("uglifyjs-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
    name: 'yourscript',
    entry: './yourscript.js',
    output: {
        path: __dirname,
        filename: 'yourscript.dist.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }
        }]
    },
    plugins: [
        new Uglify(),
        new CopyWebpackPlugin([
            { from: 'node_modules/mathjax3/mathjax2', to: './mathjax2' }
        ])
    ]
};

Hi there.

after I read this page "https://github.com/mathjax/MathJax-demos-web/blob/master/custom-tex-extension/mml.html.md"
I run "npm install" command in the downloaded MathJax-demos-web folder.
then, I got this message.

found 2 vulnerabilities (1 moderate, 1 high)
run npm audit fix to fix them, or npm audit for details

and I run "npm run make-custom-tex-extension " then,

[email protected] make-custom-tex-extension E:\ai\nodejs\MathJax-demos-web\ttt\MathJax-demos-web
cd custom-tex-extension && node ../node_modules/mathjax-full/components/bin/pack

Command failed: npx webpack --display-modules

so, I want to make the "mml.min.js" file but, I could not do that. so Please help me.
I run on windows 10 , with node : v12.18.0

a few months ago, I issued this. and checked that this is resolved, but unfortunately, it is not working.
When I typed this command "npm run make-custom-tex-extension" , I found that the file "mml.min.js" with this logs.

npm run make-custom-tex-extension

[email protected] make-custom-tex-extension E:\ai\nodejs\MathJaxNodeTest\MathJax-demos-web
cd custom-tex-extension && node ../node_modules/mathjax-full/components/bin/pack

Hash: 640e2f14a8f1dd014edf
Version: webpack 4.44.2
Time: 1084ms
Built at: 2020-11-25 8:07:40 ├F10: PM┤
Asset Size Chunks Chunk Names
mml.min.js 113 KiB 0 [emitted] main
Entrypoint main = mml.min.js
[0] E:\ai\nodejs\MathJaxNodeTest\MathJax-demos-web/node_modules/mathjax-full/js/core/MmlTree/MmlNode.js 28.6 KiB {0} [built]
[1] E:\ai\nodejs\MathJaxNodeTest\MathJax-demos-web/node_modules/mathjax-full/js/input/tex/TexError.js 1.68 KiB {0} [built]
.........................................
.........................................
........................................
[23] E:\ai\nodejs\MathJaxNodeTest\MathJax-demos-web/node_modules/mathjax-full/js/input/tex/Stack.js 4.13 KiB {0} [built]
[24] E:\ai\nodejs\MathJaxNodeTest\MathJax-demos-web/node_modules/mathjax-full/js/input/tex/Symbol.js 1.73 KiB {0} [built]

I think that that file "mml.min.js" created is too big to be working compared to original mml.min.js you distributed.
that file's size created was 113KB.

when i opened the mml.html, then i found that paper's not working.
so any guide would you please to suggest to me?

Hi,

I am trying to figure out how to use the newly published NPM module for MathJax v3.
Examples I see in this repo seem to be a bit outdated, or at least not apply to consuming the mathjax3 npm module.

I'm just curious to see what the new MathJax will look like, and if there will be any perf improvement.
If you could paste a sample snippet on how to setup a TeX to HTML or SVG pipeline using the NPM module, it would be awesome.

Thanks

Hi
I'm trying to run the demo at https://mathjax.github.io/MathJax-demos-web/input-tex2svg.html
Didn't change anything, and when I hit render tex button, I get "Invalid option "family" (no default value)."
Firefox 68, Chrome 84, Windows 10, noticed this since Friday 28/08/2020.

Let's change the demos to point the font-url to rawgit.

It's out, let's update.

I have copied most of the code from your repo.
I have following code: fiddle

And following code for rendering mathml formulas:

    function convert() {
      var input = document.getElementById("input").value.trim();
      output = document.getElementById('output');
      output.innerHTML = '';
      output.appendChild(MathJax.mathml2svg(input, {scale: 150}));
    }

As you can see the scale is set 150. After changing it to for instance 300, nothing changes after rerendering the formula. Why? It should be bigger

Also when I change the line with MathJax to following:

output.appendChild(MathJax.mathml2svg(input, {em: 150, ex: 6}));

Nothing changes. Do you know why?

Even if it's not an official site or anything why would you leave it open to XSS attacks? I mean on https://mathjax.github.io/MathJax-demos-web/input-tex_mml2chtml.html
Even the easy

<img src=x onerror="alert(document.domain)"/>

Would work and in fact, even in the "official" mathjax usage there are some XSS vulnerabilities, for example, sympy has an XSS vulnerability in its mathjax "interpreter" sympy/sympy-live#192

Using tex-svg.js and tex-mml-chtml.js on the same page causes a conflict and this error appears

"Uncaught TypeError: MathJax.tex2svgPromise is not a function"

Cf. https://github.com/mathjax/mathjax-v3/releases/tag/3.0.0-alpha.3

I was following along the demo here and here.

1. I make a directory: hwjax. Then I start a package.json through npm init. Oh, npm --version returns 6.14.10 and node --version returns v12.19.0. The package.json contains:

{
  "name": "hwjax",
  "version": "0.0.1",
  "description": "Mathjax extension for homework Latex class.",
  "main": "homework.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "mathjax",
    "latex",
    "homework"
  ],
  "author": "Simurgh",
  "license": "GPL-3.0-or-later"
}

2. Now running npm install mathjax-full webpack webpack-cli terser-webpack-plugin babel-loader @babel/core @babel/preset-env produces:

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No repository field.

+ [email protected]
+ @babel/[email protected]
+ [email protected]
+ @babel/[email protected]
+ [email protected]
+ [email protected]
+ [email protected]
added 278 packages from 184 contributors and audited 278 packages in 11.236s

25 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

3. Right so now I assume we have everything. I get the files mml.js and webpack.config.js. Listing files in hwjax/ produces: mml.js node_modules package.json package-lock.json webpack.config.js. Note that I fixed the paths in the webpack configs:

const PACKAGE = require('./node_modules/mathjax-full/components/webpack.common.js');

module.exports = PACKAGE(
    'mml',                                // the package to build
    './node_modules/mathjax-full/js',    // location of the MathJax js library
    [                                     // packages to link to
        'components/src/core/lib',
        'components/src/input/tex-base/lib'
    ],
    __dirname,                            // our directory
    '.'                                   // dist directory
);

4. Now I don't think I need an npm install but I do it anyways since the documentation asks for it. At this point, I don't expect npm run make-custom-tex-extension to work because the package.json does not define any scripts.

npm ERR! missing script: make-custom-tex-extension

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/tsfn/.npm/_logs/2020-12-31T23_12_20_164Z-debug.log

Now I run node node_modules/mathjax-full/components/bin/makeAll which produces:

[snip]
Building /src/ui/menu
    
Building /src/ui/safe
    
Webpacking /path/to/hwjax
    Command failed: npx webpack --display-modules
Webpacking /src/a11y/assistive-mml
    Command failed: npx webpack --display-modules
Webpacking /src/a11y/complexity
[snip]

5. Here is the summary of the setup:

.../hwjax$ npm --version && node --version && npx webpack --version && tree -L 1
6.14.10
v12.19.0
webpack 5.11.1
webpack-cli 4.3.1
.
├── mml.js
├── node_modules
├── package.json
├── package-lock.json
└── webpack.config.js

1 directory, 4 files

This probably falls into the "not yet implemented" category, but just in case it doesn't...
[just noticed message saying color.js isn't implemented for V3, but see bottom when it is]

With

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="https://cdn.rawgit.com/mathjax/mj3-demos/3.0.0-beta.1/mj3-tex2html-beta.dist.js"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ TeX: { extensions: ["color.js"] }});
</script>

in the header and this horrible mess in the body,

$$ 
\color{#00B219}{\bf{8}}
\color{#adadad}{(}
\bf{\color{#ff8000}{-}}
6
\,\colorbox{#e5ff00}{\(\mkern{-7mu}+\mkern{-6mu}\)}\,
2
\color{#adadad}{)}
\,\colorbox{#9100ff}{\(\mkern{-7mu}\div\mkern{-6mu}\)}\,
\color{#ff0040}{\bf{3}}
\;\color{#adadad}{=}
$$

I get "You can't use 'macro parameeter character #' in math mode".

Rendering in V2 was (IMHO) less than perfect, but it conveyed the idea I wanted to. The two weirdnesses are that the - and = seem much wider than they should be and that the parens aren't close to symmetric:

I can hardly find any open source implementations or usage examples of mml3 on github. I'm currently simply merging two people's code to implement as a plugin for Markdown it to enable the use of mathjax for Markdown in a variety of places. but I'm expecting to use mml3 for the output, and at the moment this code can only be used with the normal output/chtml and svg outputs, but the code for those outputs is not reproducible Currently, the code only uses normal output/chtml and svg output, but the code for these outputs is not reproducible. Please forgive me for not being much of a programmer. https://github.com/taophilosophy/markdown-it-mathjax3/tree/26fd2dd37036c148d634eb89a646108a77e0b4ce Currently it works fine and can only output svg and chtml code located. All other updated code is unavailable for testing, and I don't know exactly how to write it. Thank you very much.

https://mathjax.github.io/mj3-demos/#tex-extensions
I'm attempting to use tagFormat as a replacement for equationNumbers from v2, but I haven't been able to figure out the syntax in the configuration using trial-and-error since I thought that the syntax would be somewhat similar to equationNumbers.

Other than this, my testing indicates that v3 will be a nice improvement for our application!

https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js connect reset

Most modern JS applications are distributed via a single entrypoint bundle generated by webpack, where webpack has been configured to do vendor chunking by default. All the MathJax examples I've seen assume that Mathjax is going to have its own webpack bundle, e.g. custom-mathjax.html or is going to be loaded via a CDN, instead of being imported alongside imports to other modern JS library in a single entrypoint bundle.

Please provide examples / quick starts that just assume we need the basic default settings for:

1. vanilla webpack, preferably starting with webpack's own example application and just using HtmlWebpackPlugin to output the example page
2. Create-React-App created project
3. Vue CLI- created project