I bet the "reading" modes of the browsers are just using the HTML that's visible on the page, but that's marked explicitly as hidden from screenreaders, using the aria-hidden attribute.

From what I can tell it's the opposite (on Firefox): the math is in the source HTML twice, once in <span class="katex-mathml">, which is hidden using CSS in the non-reader mode but is rendered in the reader mode, and <span class="katex-html" aria-hidden="true">, which is what FF displays normally, and it's missing from the source when I inspect it in reader mode. Having two spans like this comes directly from KaTeX, whose authors I'm sure have thought about accessibility. I imagined that MathML would be somewhat standard and screen readers would understand it.

Huh, you're right about what the Firefox reader mode does. I'm somewhat surprised it uses the MathML. I'd just assumed what was happening from the 2pi in the header becoming plain text but that header is probably a special case and just from the page title rather than the h1.

Yes, I manually put 2π in the html <title>, while the <h1> has the KaTeX rendered math in it :)

Yes, I'm pretty sure it's that aria label. The first line of this code.

    <span class="katex-html" aria-hidden="true">
        <span class="base">
            <span class="strut" style="height:0.6444em;"></span>
            <span class="mord">2</span>
            <span class="mord mathnormal" style="margin-right:0.03588em;">π</span>
        </span>
    </span>

My first inclination was to simply run `say` on my Mac comamdn line and paste the line in. That read it correctly. The other commenter called out the `aria-hidden` attribute and I'd guess that's it. It's explicitly hidden.

Apparently this is all intentional as outlined in this bug report.

https://github.com/KaTeX/KaTeX/issues/38

But note how right above this span there is the <span class="katex-mathml">, which is not aria-hidden, and which contains the MathML representation of the equations. I would have assumed that a screen reader would look at that, since it contains the semantical information.

Chrom* browsers just got decent MathML support finally, so I don't think it's on the way out quite yet. Some still like other solutions more though.

This does seem like a bug/missing feature in Chrome's a11y tree, which you can see in the DevTools with an experimental feature enabled: https://i.imgur.com/ckWnrlL.png

You used the Katex library for rendering math symbols, which currently emits code that supports MathML and falls back to an HTML rendering (this is my understanding after reading the HTML for a bit). The MathML content is marked up correctly such that browser should be able to construct the a11y tree correctly. I didn't check, but apparently other browsers like FF and Safari construct the a11y tree from the MathML markup correctly.

Chrome _just_ added support for MathML, so the lack of a11y support here is not surprising. I found this bug report which I believe covers this: https://bugs.chromium.org/p/chromium/issues/detail?id=103889...

In short - you didn't do anything incorrect, and AFAIK any temporary fix to improve a11y for Chrome users would involve some heavy lifting in the Katex library.

I suggest interested parties to star the above bug report.

___

Other commenters mentioned the aria-hidden property being set. This is intentional, as without it Safari/FF/compliant screen readers with MathML support would double-read the content. I'm honestly not sure what the ideal markup would be to support both types of browsers - should a solution exist, it may involve using JavaScript to change the markup based on the user agent detected.