Inconsistency with Firefox and localhost on MathJax snippets, and possible Accessibility issue. #3281

ozross · 2024-09-07T01:21:45Z

Replace the text below with the details of the issue you are facing.
DO NOT simply erase the form and type a free-form response.

Issue Summary

I'm getting different results from the same HTML document, concerning the 2 MathJax snippets,
when loading the file in Firefox:

using localhost:
http://localhost/DEIMS/DEIMS2024-paper-pdf20-6Sep-pretty-DPUB.html
remotely via the web:
http://science.mq.edu.au/~ross/TaggedPDF/DEIMS2024/DEIMS2024-paper-pdf20-6Sep-pretty-DPUB.html

Using localhost, there are extra <div> sections at the end of the HTML <body>,
as seen in the following image, using the Developer Tools view:

Also, when running Accessibility-checker plug-ins, there are some warnings produced, concerning these active <div>s, with ARIA attributes. (see below)

Across the web:

There are no issues with the visual display, nor with activating pop-up menus over the MathJax snippets.

Using alternative browsers, Safari and Chrome, the views produced seem to be identical to the online one from Firefox; that is, no issues are evident using those browsers.

Possible Accessibility issue: should there be aria-atomic="true"?

The Siteimprove Accessibility checker seems to think that with assertive it is better to also set aria-atomic.
While perhaps not a bug, it would be reasonable to do so.

Also, the AInspector accessibility plug-in also has some Manual Check items related to these assertive divs.

Is this really an issue?

Steps to Reproduce:

Explained above.

Any other information you want to share that is relevant to the issue
being reported. Especially, why do you consider this to be a bug? What
do you expect to happen instead?

Technical details:

MathJax Version: 3.2.2
Mac OS X 13.5.2 (Ventura)
Browser: Firefox 130.0 (64 bit) — latest

I am using the following MathJax configuration:

MathJax = {
    loader: {
      load: ['[tex]/noerrors', 'input/tex-base', 'a11y/complexity']
    },
    options: {
      ignoreHtmlClass: 'tex2jax_ignore',
      processHtmlClass: 'tex2jax_process',
      enrichSpeech: 'deep',
      makeCollapsible: true,
      a11y: {
        highlight: 'None',
        backgroundColor: 'White',
        foregroundColor: 'Black',
        speech: true,
        subtitles: true,
        speechRules: 'mathspeak-default'
      }
    },
    tex: {
      packages: ['base', 'ams', 'noerrors', 'noundefined'],
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      processEscapes: true
    }
};

and loading MathJax via

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

Supporting information:

Please supply a link to a (live) minimal example page, when possible.
Given above.
Download it, and then view locally, using localhost.
If your issue is with the display of the mathematics produced by MathJax, include a screen snapshot that illustrates the problem, when possible.
Screen shots given above.
Check your browser console window for any error messages, and include them here.

No version information available for component input/tex-base [tex-mml-chtml.js:1:16471](https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js)
MathJax: Invalid option "speechRules" (no default value). [tex-mml-chtml.js:1:750757](https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js)

Include the MathJax configuration you are using, and the script tag that loads MathJax itself.

The text was updated successfully, but these errors were encountered:

dpvc · 2024-09-07T12:23:16Z

The div elements that you point to are part of the assistive tools and are triggered by activating the expression explorer. Since the configuration you give doesn't enable them by default, it is likely that you turned them on when looking at the local version (or some other local page earlier on), and since the setting persists for the domain when you change it, that means all local files will have it turned on by default. But the web page doesn't have it turned on until you do so explicitly (then it will be on for that domain until you turn it off again). That is why you are having different experiences between the web page and your local page. That also explains why Chrome and Safari show the same as the on-line version, as you either never turned on the assistive tools in them, or they don't save those settings for file:// URLs (I don't remember if they do or not).

So this is "expected behavior" in this case.

The error message

MathJax: Invalid option "speechRules" (no default value). [tex-mml-chtml.js:1:750757](https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js)

is because the speechRules option was broken into two separate ones in v3.1.3 (see the "note" in the documentation).

Note that you don't need to load input/tex-base yourself, as that is part of the tex-mml-chtml.js file that you are loading. Removing that should eliminate the other error you are seeing.

As for aria-atomic, yes, that could be added, but the mechanism used for the explorer in v4 (now out in beta release) has been changed and no longer uses aria-live regions, so the issue will be moot in v4. It would be possible to give you a patch to add aria-atomic if that is important to you. if I understand correctly, it should only have an effect if you have math notation inside another contain that has aria-atomic set.

dpvc · 2024-09-07T12:24:24Z

See also the discussion in the MathJax Users Forum on aria-atomic.

ozross · 2024-09-08T00:10:43Z

Hi Davide,
It's been awhile since we last communicated.
I'm impressed with how MathJax has come along.

BTW, thanks for the quick reply, which is precisely along the lines of what I would expect.
I do recall setting Accessibility > Activate a bit over a week ago; but not noticing any immediate difference, just forgot about it.
A bit later when I checked with Siteimprove it showed errors that I wasn't expecting and didn't understand. I did not realise the connection — mea culpa, and thank you for pointing this out.

Thanks also for the Forum link, where Michael Boudreau asks whether the issue has come up for anyone else. You can now reply in the affirmative. :-)

Using Firefox's Accessibility panel view, I now see that there is quite a difference to the way the math snippets are presented there, with and without Activate.

Active:

In particular, with the alternative text of almost equals, supplied by MathJax.

Inactive:

This has MathML <math> tag and structure elements.

Can you comment on the request for interactive semantics?
Is there an attribute that I can supply for something sensible here?

Overall, my aim is to improve the Accessibility of Tagged PDF documents created with LaTeX, by implementing ARIA recommendations via attributes, as much as is possible within that setting. Testing the effectiveness of this requires deriving to HTML, then testing that the ARIA attributes have been correctly passed along, and serve their intended purpose.
— Read my test document and explore the website referred to, to see how effective this can be.
Getting the best possible scores in Accessibility Checkers is definitely part of my aim.

If the aria-atomic issue will be going away, then I see no need to work with any patched version; at least not locally-served. What would be the configuration to test using a v4 beta, say loaded online?

And did I see somewhere that there could be a way to use MathJax directly with a (tagged) PDF?
That would be something fantastic. I'd be prepared to help with producing examples and checking features for such a plug-in.

All the best.
Ross

ozross · 2024-09-09T00:32:20Z

OK, I found how to use the v4 beta:

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/[email protected]/tex-mml-chtml.js"></script>

Now Siteimprove is happy, but there are mixed results with the AInspector plug-in, according to which MathJax features are enabled. It reports violations as follows.

Violation: Remove the unsupported aria-braillelabel attribute from mjx-container element.

Fixed by switching off Braille generation.

Violation: Remove the unsupported aria-label attribute from mjx-container element.
Role: generic

Would not this be fixed if role="math" were applied to each mjx-container element?
That would probably also remove the issue with aria-braillelabel or allow it to be renamed.

One other way to apparently fix this is to switch off semantic enrichment. But this reduces the mathematical content to a collection of individual letters and digits — not really desirable (see image below).

This next image shows with role="math" inserted by hand, after replacing the LaTeX source by the result that MathJax would generate from it.

AInspector is now happy, but

the interactive functionality of MathJax is disabled, and
the visual math styling is wrong.
However it suggests that if MathJax were to be doing this itself, then all would be good, yes?

dpvc · 2024-10-04T14:04:07Z

Sorry for the long delay in getting back to you. I've been looking into the issues you raised, and found some additional problems while working with VoiceOver. So we are looking into some fixes, but don't have a final solution yet. We are looking at role="math", but there are other problems to be resolved as well.

One other way to apparently fix this is to switch off semantic enrichment.

This will disable the assistive tools completely, so I don't think you want to do that. I'll get back to you when we have something more concrete to offer. Davide

ozross · 2024-10-04T23:05:54Z

Hi Davide.
Thanks for the reply.
In the time since my last posting I've come to the view that role="tree" is more appropriate semantically, designating the root node of the tree of pop-up menus and windows produced by MathJax. I recall seeing somewhere that someone else has suggested this already.

The role="math" belongs on the structure element that provides the (La)TeX source as content, or maybe a parent of this. My documents derive from Tagged PDF, produced from LaTeX source. I can provide this "math" role via an attribute to the <Formula> structure element, but cannot affect anything deeper provided by MathJax processing.

I certainly do not want to switch off semantic enrichment. The only point in doing that was to see if this had any effect on validation. But it has many other undesirable aspects.

Hope to hear from you again.

Cheers.
Ross

dpvc added Expected Behavior This is how MathJax works v3 labels Sep 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Inconsistency with Firefox and localhost on MathJax snippets, and possible Accessibility issue. #3281

Inconsistency with Firefox and localhost on MathJax snippets, and possible Accessibility issue. #3281

ozross commented Sep 7, 2024

dpvc commented Sep 7, 2024

dpvc commented Sep 7, 2024

ozross commented Sep 8, 2024

ozross commented Sep 9, 2024 •

edited

Loading

dpvc commented Oct 4, 2024 via email

ozross commented Oct 4, 2024

Inconsistency with Firefox and localhost on MathJax snippets, and possible Accessibility issue. #3281

Inconsistency with Firefox and localhost on MathJax snippets, and possible Accessibility issue. #3281

Comments

ozross commented Sep 7, 2024

Replace the text below with the details of the issue you are facing. DO NOT simply erase the form and type a free-form response.

Issue Summary

Steps to Reproduce:

Technical details:

Supporting information:

dpvc commented Sep 7, 2024

dpvc commented Sep 7, 2024

ozross commented Sep 8, 2024

ozross commented Sep 9, 2024 • edited Loading

dpvc commented Oct 4, 2024 via email

ozross commented Oct 4, 2024

Replace the text below with the details of the issue you are facing.
DO NOT simply erase the form and type a free-form response.

ozross commented Sep 9, 2024 •

edited

Loading