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.