Question: Best practice for <button> with mathml

[Leon-Lj]

You can have a <button> with mathml in it and it'll render and work just fine. However, when using a screen reader, like NVDA + MathCat, activating the button becomes a problem. Because both the space and enter keys simply enters navigation mode of the math expression, so there seems to be no way of activating the button. Is there a way to deal with a clickable math expression so that you can both activate the click effect, and navigate the expression in an easy manner?

A simple example.

Backgroud In our exercises the math expressions are clickable so that you can copy it into the input editor with a click. This saves having to type the entire expression by hand. But when trying to use mathml for better accessibility, the clickable feature doesn't work for screen reader users.

[ways2read]

In case it helps, I was able to click the button using the NVDA command “Pass next key through” (NVDA+f2) then space bar.

From: Leon Ljunggren @.> Sent: Friday, March 15, 2024 4:57 PM To: NSoiffer/MathCAT @.> Cc: Subscribed @.***> Subject: [NSoiffer/MathCAT] Question: Best practice for with mathml (Issue #256)

You can have a

with mathml in it and it'll render and work just fine. However, when using a screen reader, like NVDA + MathCat, activating the button becomes a problem. Because both the space and enter keys simply enters navigation mode of the math expression, so there seems to be no way of activating the button. Is there a way to deal with a clickable math expression so that you can both activate the click effect, and navigate the expression in an easy manner?

A simple example.https://codepen.io/leon-lj/pen/PogbYRx

Backgroud In our exercises the math expressions are clickable so that you can copy it into the input editor with a click. This saves having to type the entire expression by hand. But when trying to use mathml for better accessibility, the clickable feature doesn't work for screen reader users. clickable-math.png (view on web)https://github.com/NSoiffer/MathCAT/assets/4263639/0e60f9b6-dfd0-460c-bd8a-914c48b77bf6

— Reply to this email directly, view it on GitHubhttps://github.com/NSoiffer/MathCAT/issues/256, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACFL56Y6IJ6AHDBJT4IS4P3YYMR7RAVCNFSM6AAAAABEYK4LASVHI2DSMVQWIX3LMV43ASLTON2WKOZSGE4DSMBZGIZDAMA. You are receiving this because you are subscribed to this thread.Message ID: @.**@.>>

[andrew-l-d]

When using Firefox, Richard’s suggestion works here (can either use spacebar or Enter). However, when trying to interact with the equation I get an error when reaching the fraction.

In Chrome I cannot access the equation at all – anything I do activates the button. And the equation is presented as a graphic. By using the AI Content Describer NVDA add-on I can confirm that the graphic is in fact the equation. All of that suggests that the approach is not ideal.

Is it feasible to separate the button from the equation? I would have thought so:

Var grabEquation = document.getElementById(“equationDiv”).innerHTML;

And pop the contents of grabEquation into the editor.

Andrew

From: Richard Orme @.> Sent: Saturday, March 16, 2024 6:09 AM To: NSoiffer/MathCAT @.> Cc: Subscribed @.***> Subject: Re: [NSoiffer/MathCAT] Question: Best practice for with mathml (Issue #256)

In case it helps, I was able to click the button using the NVDA command “Pass next key through” (NVDA+f2) then space bar.

From: Leon Ljunggren @.> Sent: Friday, March 15, 2024 4:57 PM To: NSoiffer/MathCAT @.> Cc: Subscribed @.***> Subject: [NSoiffer/MathCAT] Question: Best practice for

with mathml (Issue #256)

You can have a

with mathml in it and it'll render and work just fine. However, when using a screen reader, like NVDA + MathCat, activating the button becomes a problem. Because both the space and enter keys simply enters navigation mode of the math expression, so there seems to be no way of activating the button. Is there a way to deal with a clickable math expression so that you can both activate the click effect, and navigate the expression in an easy manner?

A simple example.https://codepen.io/leon-lj/pen/PogbYRx

Backgroud In our exercises the math expressions are clickable so that you can copy it into the input editor with a click. This saves having to type the entire expression by hand. But when trying to use mathml for better accessibility, the clickable feature doesn't work for screen reader users. clickable-math.png (view on web)https://github.com/NSoiffer/MathCAT/assets/4263639/0e60f9b6-dfd0-460c-bd8a-914c48b77bf6

— Reply to this email directly, view it on GitHubhttps://github.com/NSoiffer/MathCAT/issues/256, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACFL56Y6IJ6AHDBJT4IS4P3YYMR7RAVCNFSM6AAAAABEYK4LASVHI2DSMVQWIX3LMV43ASLTON2WKOZSGE4DSMBZGIZDAMA. You are receiving this because you are subscribed to this thread.Message ID: @.**@.>>

— Reply to this email directly, view it on GitHub https://github.com/NSoiffer/MathCAT/issues/256#issuecomment-2000288428 , or unsubscribe https://github.com/notifications/unsubscribe-auth/ADZAYALLUEX7F6SWTT3V5VDYYNBOJAVCNFSM6AAAAABEYK4LASVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBQGI4DQNBSHA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[Leon-Lj]

In case it helps, I was able to click the button using the NVDA command “Pass next key through” (NVDA+f2) then space bar.

In Chrome it's seems to bit shaky, it sometime passes it through and sometimes not. I think the most consistent pass through was achieved when I first used Space to select the mathml, then used NVDA+f2 and then Enter.

Is it feasible to separate the button from the equation? I would have thought so:

You're right, splitting it up is probably for the best. I'm experimenting with keeping the expression (the <div> surrounding the expression) clickable (but not a button, maybe even with a role="none") and then adding a <button class="sr-only">Copy to input</button> after it. That way it'll look the same, but screen reader users will be able to both navigate the expression, and easily copy it to the input field.