Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
ozross opened this issue Sep 7, 2024 · 4 comments
Open

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

ozross opened this issue Sep 7, 2024 · 4 comments
Labels
Expected Behavior This is how MathJax works v3

Comments

@ozross
Copy link

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

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

  1. using localhost:
    http://localhost/DEIMS/DEIMS2024-paper-pdf20-6Sep-pretty-DPUB.html
  2. 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:

DEIMS-Firefox-localhost-MJX

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:

DEIMS-Firefox-online

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"?

MathJaX-assertive

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.
@dpvc
Copy link
Member

dpvc commented Sep 7, 2024

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 dpvc added Expected Behavior This is how MathJax works v3 labels Sep 7, 2024
@dpvc
Copy link
Member

dpvc commented Sep 7, 2024

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

@ozross
Copy link
Author

ozross commented Sep 8, 2024

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:
DEIMS-Firefox-Accessibility-active

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

Inactive:
DEIMS-Firefox-Accessibility-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
Copy link
Author

ozross commented Sep 9, 2024 •
edited
Loading

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

Screenshot 2024-09-09 at 9 10 16 am

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).

Screenshot 2024-09-09 at 8 31 52 am

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

Screenshot 2024-09-09 at 10 24 37 am

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Expected Behavior This is how MathJax works v3
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dpvc @ozross