[1-more]

When I view source (not the DOM) I can see that all of your math has aria-hidden="true". That seems to carry over into the parsed/generated math markup: run `document.body.innerHTML += '<style>[aria-hidden="true"]{ outline: 3px solid red; }</style>'` to see all the hidden-from-screenreader things highlighted. That may be enough.

For content that really cannot be written in a way that screen readers can handle, there is always the idea of Screen Reader Only content. It's a hassle, but let's jump in and give it a shot

For instance for the first math thing you can have

    <style>
        .sr-only {
            position:absolute;
            left:-10000px;
            top:auto;
            width:1px;
            height:1px;
            overflow:hidden;
        }
    </style>
    <p class="sr-only" id="definition-of-reduced-derivative">
        The reduced derivative with respect to x is denoted crossed-d over dx of the function f(x). It is equivalent to the the derivative with respect to x (denoted d over dx) of the function f(x) all over 2 pi. 
    </p>

Then you make sure that the element that wraps up your first equation has aria-describedby="definition-of-reduced-derivative" so that the SR reads out that content. I think you may need to not have "aria-hidden" on that math wrapper, but I'm not sure.

This is not an authoritative answer; I'm just some asshole who writes front-end code a lot. More of a Cunningham's Law situation that anything really. You don't want to end up creating one experience for sighted users and completely different one for screen-reader and refreshable-braille-display users. But this can maybe get the wheels turning for how to address it? Also again maybe TOTALLY unnecessary once you un-hide the math markup.

[paulddraper]

How does this interact with Find? Select text?

[1-more]

solid point: it kind of wrecks them. I just checked in a codepen. Copying the text around the hidden paragraph will also copy the hidden paragraph. Maybe that's a feature? Searching for the content will also show that it's on the page but that you cannot meaningfully get to it, which kind of stinks.

These two issues get solved by aria-description where the description exists entirely in an attribute on the element rather than as a reference to another node in the DOM tree. But it's still in the draft for ARIA 1.3 so it's not fully adopted yet.

about the attribute https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

CanIUse info (tl;dr only in chromesque browsers) in the property info https://developer.mozilla.org/en-US/docs/Web/API/Element/ari...