Katex: Browser "Reader View" shows both MathML and HTML

[Apanatshka]

The Reader View in Firefox works quite well in remove everything except de article in my browser. But because KaTeX uses hidden MathML, and Reader View ignores the CSS of that, I end up with duplicate formulas everywhere. Sadly they don't look at aria-hidden, though I'm also not sure if aria is meant for this kind of thing anyway.

A quick search got me to this bugzilla report where reader view was extended to hide certain common CSS classes that are used for hidden elements in big frameworks. I found it in the aboutReader.css:

/* Hide elements with common "hidden" class names */
.visually-hidden,
.visuallyhidden,
.hidden,
.invisible,
.sr-only {
  display: none;
}

Can one of these class names be added to the katex-mathml spans?
(Note that I'm not sure what will happen to screen reader functionality if the added CSS class is defined as display: none in the normal CSS of the website, which may use one of the common frameworks... I don't have a solution for that, other than maybe a customisation flag?)

[gagern]

I guess hidden and invisible are too generic names to be used here, since the containing page might do other things with these. Personally I think sr-only best conveys the intended meaning of the objects, at least if people expand the abbreviation sr to “screen reader”. The tow variants of visually hidden would still be acceptable, I think.

I wonder what would happen if we were to use one of these, and the containing framework makes use of the same class name but employs a different technique to hide these. I can't think of a way any other hiding technique could conflict with what we do, but I'm not sure. Could you do some tests on this, against the frameworks mentioned in the bug report you linked to?

[Apanatshka]

Sounds like a good reason to choose sr-only.

I'm afraid I'm not familiar with the common frameworks that are in vogue today. It's been years since I worked on front-end website stuff, and I've never used a screen reader before. So if anyone else with more experience would like to take a look?* The frameworks mentioned in the bug report are:

html5-boilerplate
https://github.com/h5bp/html5-boilerplate/blob/v5.0.0/dist/doc/css.md#common-helpers
.visuallyhidden, .hidden, .invisible

yahoo ydn / a11yproject
https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
.visually-hidden, .hidden

bootstrap
http://getbootstrap.com/css/#helper-classes
.hidden, .invisible, .sr-only

*I will do the work myself eventually if nobody else champions this issue, but I currently don't have the bandwidth to take this on. Maybe next year...

[xymostech]

100% agree with @gagern. I think adding .sr-only sounds like our best option, so long as it doesn't conflict with other methods. I can try to look into the different methods for hiding.

[gagern]

Here is how bootstrap 4.0.0-alpha.5 does things.

Looking at its history, twbs/bootstrap@a8d95d4721e714a7e1d683e14e997faa5ccddaff introduced the class, twbs/bootstrap@03258683ed73b84ab51448dc8c52e292fee8104a and twbs/bootstrap@fef873a840add12495baa7cf2ffb5361f5ab1c63 reordered properties, twbs/bootstrap@b1cc07fa1525f0900d32bdcbdf7b38a616971acd changed the syntax of the clip property, twbs/bootstrap@27df020852ada46c85138c75736fbb4c4784eeeb switched from less to scss, twbs/bootstrap@608be81a43f0109bc4082444ed1068440b1cf1c2 factored out the mixin I referenced above, twbs/bootstrap@7aabd493647fbe1110cbdf2637828e34df6a4b90 moved the .sr-only class to a separate file as well. No real semantic changes anywhere.

So I'd say it always worked that way in bootstrap, and if it will cooperate with KaTeX now, it should cooperate for all these versions. Assuming .sr-only to be only widely used by bootstrap, checking that single definition in practice should be enough.

[Apanatshka]

Ok, so I found a blog post online of someone using bootstrap and KaTeX. I added .sr-only to the .katex-mathml versions. And it works!

There is one annoyance though... The MathML version renders great in Reader View, but the HTML version loses styling info so super/subscripts don't work anymore etc. 😢 And I have no idea how to make it so the _HTML version_ is hidden in Reader View instead of the MathML version without favouring the MathML version entirely...

Does anyone have ideas? Otherwise I think the original proposal is still the best solution to the duplication problem.

[gagern]

Urgh… OK, if they drop all styles, I think there is little KaTeX can do. Makes me think that reader mode and KaTeX formulas simly don't go together well. Perhaps having both versions in there in the hope that at least _one_ of them renders reasonably well is a benefit, in this light?

[Apanatshka]

I suppose you could see it as a benefit..
I think it's reasonable to expect that a browser supporting a Reader View also supports MathML (which renders correctly in Reader View!). Ideally I'd like the Reader View to ignore the _HTML_ version of the KaTeX formulas, but doing so with one of the "hidden" CSS classes conflicts with the meaning on a normal view of the webpage.

So yeah, unless someone else has a brilliant idea, it's either duplication or messed up styling. At this point I'm fine with both if there's no better option, and the least amount of work is leaving it as is.

[gagern]

Closing for now, feel free to reopen if you have any idea about how to solve this consistently.