Screen reader accessibility

RichCaloggero commented 5 years ago

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:

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.

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 rjc@mit.edu Sent: Thursday, April 18, 2019 1:45 PM To: Jeff Witt jwitt@edx.org; Mary J Ziegler maryz@mit.edu Cc: accessibility accessibility@mit.edu 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

dpvc commented 5 years ago

Thanks for the report. It looks like the speech strings are not being attached to aria labels after they are generated. Can you test the speech example and see if that is working for you?

dpvc commented 5 years ago

In terms of the explorer, it seems to work for me on the demos you indicate. I am able to navigate through the expression (but I'm not using assistive technology, just my plain browser).

Can you say what browser and OS you are using?

RichCaloggero commented 5 years ago

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

Testing with NVDA 2019.1 and Firefox 67.

Yes, speech strings are properly attached at the above URL.

However, the tabindex="0" and role="application" need to all be on the element with aria-label="speech string". In this implementation, the tabindex="0" is on the mjx-container element which is the parent of the element containing the aria-label.

Hope this helps.

-- Rich

On 5/31/2019 4:36 PM, Davide P. Cervone wrote:

Thanks for the report. It looks like the speech strings are not being attached to aria labels after they are generated. Can you test the speech https://mathjax.github.io/mj3-demos/speech-tex-chtml.html example and see if that is working for you?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mathjax/mj3-demos/issues/15?email_source=notifications&email_token=ABTLKH6W7N5Z75DIFKKGUWTPYGD33A5CNFSM4HOV4V3KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWWJ3SA#issuecomment-497851848, or mute the thread https://github.com/notifications/unsubscribe-auth/ABTLKH6GLCX6FBUWCPATPHTPYGD33ANCNFSM4HOV4V3A.

dpvc commented 5 years ago

I'm working on the update for this. Is role="application" needed even if the explorer is not present? I.e., if only the aria-label is present and the math is to be read by the screen reader?

mathjax / MathJax-demos-web