> review their math content with a screen reader before publishing

I second this for anything you put on the web. I opened the webapp I work on with a screen reader, and it was an incredibly valuable experience. You get to see your site from a different perspective, and various issues stand out like a sore thumb, and I honestly found fixing the accessibility issues extremely satisfying.

The equations are in mathml, I feel like the issue is with the screen reader.

Thank you for sharing your experience. Web accessibility has a long way to go and reminders like these help.

I'm curious how blind people normally engage with math. For me, engaging with math almost always means conjuring up a visual representation in my mind. Failing that, an equation.

Since visualization is so fundamental to doing math, and since mathematical symbols and equations are a written language for which there is no spoken analog, I really can't imagine engaging with math without my eyes. Even reading equations aloud verbatim is not reliable. "X plus B squared" can mean (x + b)^2 or x + b^2

In terms of reading the notation out loud, if there is verbal ambiguity, remove it?

For instance, for your example: "X plus B quantity squared" or "x + b squared"

You can also do things like change the pitch of speech as symbols are nested, play specific tones to represent symbols, pan things across the stereo field to represent groupings, and otherwise make the symbolic equation into a multimodal experience.

But of course, you can't do any of this if the semantic representation of the equation is lost and it is rendered as strictly graphics or whatever.

I'm a bit confused to your original point about visualization because how ever in the world could I program if I couldn't abstractly manipulate symbols? I suppose not visually, but there's something non-word-oriented happening in my head.

>I'm a bit confused to your original point about visualization

I guess I find that programming is somewhat more word-oriented than pure math. For instance, how do you think about complex exponentiation, or a rotation matrix? Do you bring to mind the sensation of spinning around? For myself, I bring to mind the image of the entire complex plane rotating and stretching along a spiral, but I'm led to believe that those who are blind from birth aren't really capable of doing that.

Harder examples might include fourier series, convolution, gradient descent, etc.

I think you could almost consider the visualization of these things like a crutch. I wonder if not being able to visualize them might remove preconceived notions about how they behave, and give you different insights.

I had a math graduate student teaching my linear algebra class. He taught dot and cross products entirely algebraically, never drawing vectors as arrows, but as arrays of numbers. When I suggested after class that teaching the visual representation might help some students, he pushed back. Visual understanding, he explained, was a crutch best avoided, because visual intuition could break down in higher dimensions. I thought that was a surprising perspective from a math graduate student, of all people.

This is quite true, especially true when talking about direction (gradient) in high dimensional space. I don't think this can be avoided, since after all we are creatures living in 3D space where left right up down are quite well-defined, just need to make a mental note every time you have to deal with more than 3 dimensions.

Seems like an odd choice when talking about the cross product, since the cross product is only a thing in 3D. You can define analogous things in other dimensions but it becomes clearer and clearer that it’s not meaningfully a ‘product’.

So it doesn’t matter if your visual intuition for a cross product breaks down in higher dimensions - a cross product is only a thing in three.

This is very off topic, but the wedge product absolutely is "meaningfully a product", generalizes fine to arbitrary dimension, and has a perfectly reasonable visual/spatial/geometric interpretation.

(Indeed, we should entirely scrap the cross product in undergraduate level technical instruction and replace it with the wedge product; one happy effect will be replacing students' misleading spatial intuitions with better ones.)

Or bivectors, or k-vectors, or blades…

Good point; you're right. I might be misremembering the cross product. I do remember that he didn't even teach the geometric interpretation of vector addition.

I can see where he's coming from. Geometric intuition is an useful tool but in this semester's linear 2 class I developed more because I stopped using it. It's too strong of a tool and blots out "dryer" intuition and methods, and also as you progress you find more and more places where it's not useful. What's the geometrical intuition for whether two circles intersect in Q^2? who knows?

The way I've heard those distinguished in spoken math is x + b^2 is said "x plus b squared" and (x + b)^2 is said "x plus b all squared. There's a similar approach for divide "x plus b over 8" vs "x plus b all over 8". That was often enough but if it wasn't you'd be reduced to pronouncing brackets.

Using postfix operations in the Way of Forth would be unambiguous and of course otherwise superior as well as is well known [citation needed]. “x b plus squared vs x b squared plus”. Well, at least as long as it’s agreed on whether “x b” means two variables or one with a two-letter name. But the latter don’t really exist in math. You just expand to new alphabets when you run out of letters.

But what is the answer? What should I do differently? I get don't use images, but then what? I can't imagine all screen readers have the same capabilities, or that there is a base common ability, so what should we do?

Googling says MathML is the answer (e.g. https://www.washington.edu/doit/how-do-i-create-online-math-... this site uses MathML and your reader isn't handling it. So now what? (alt-tags? something else?)

One option would be to do testing with screen-readers and then find out if the content works, and if not find out why.

I think most people are fine with the idea that some of the costs (monetary and otherwise) arising from disabilities should be transferred from the people suffering from them to society at large. But I don't think it's reasonable for producers and users of broken screen readers to expect everyone (including authors of private blogs posts) bending over backwards to accommodate them, nor is it a remotely efficient use of societal resources. It also creates completely perverse incentives.

If there is a bug in the screen reader then that's on the vendor.

However the overwhelming number of cases where a website is unusable with a screen reader are due to lack of proper semantic tagging, like alt text and so on. The last thing a screenreader user wants to hear on a site is "button," "button," "button..." There's certainly room for tooling to help though. I definitely think it sucks that many accessibility linters are nonfree and thus will never be used by site devs who aren't worth suing.

It's worth remembering that accessibility helps everyone, not just the disabled. In fact one of the more popular arguments against accessibility is that it allows non-disabled persons to do more than intended.

So while there's a good argument to be made for being charitable to those with a frankly really lousy condition, if you just want to be self-centered you still benefit from properly tagged data.

Did you even bother looking at the website source before writing this?

What part of if there’s a bug in the screen reader it’s on the vendor did you fail to understand?

It depends on what public you care about. If readability did general public is a concern, just get rid of all these symbols and go with plain prose text, possibly using images as preferred illustrations over any ideographic way to encode ideas.

You can't discuss math while getting rid of the math symbols. That's not a reasonable proposal.

Math on the web is broken, the the affected people should be up complaining about that. This site did the most accessible thing possible; the fact that every tool broke here, just like they do for every other method is not really the author's fault.

It’s not entirely impossible; mathematicians did it for thousands of years (just read Newton’s Principia). It does use very specific language to do so, and some of the language might not exist for some advanced mathematical concepts, but I think that this whole article could be written that way.

Yeah, let's talk about the difference in accessibility between the text on this site and Newton's Principia...

I think parent is referring here to the fact that math used to be written without symbols (other than numbers) up to the 1300s according to Wikipedia: https://en.wikipedia.org/wiki/History_of_mathematical_notati... (very interesting article!) However, I would say that there is a reason why notation tends towards terse symbols: it's much more efficient and unambiguous.

Even Newton's Principia has symbols, they're just different. His notation used dots and lines & boxes in various positions.[1]

[1] https://en.wikipedia.org/wiki/Notation_for_differentiation#N...

Maybe ctoth or some other user of screen reader might have a look at https://en.wikisource.org/wiki/The_Mathematical_Principles_o... and tell us how it goes.

> mathematicians did it for thousands of years (just read Newton’s Principia)

What mathematicians did for thousands of years arose in a culture of oral proofs supplemented by prepared diagrams: Euclid's proofs were meant to be recited aloud in front of an audience while pointing at an image labeled only with single letters/numerals – not read in a book. The society was substantially illiterate, there was no access to paper or good pens, algebra had not yet been invented, and all arithmetic was done mentally or using fingers or physical tokens.

Compared to mathematical notation, natural language expressions are often incredibly large and cumbersome, can make following the argument extremely difficult, and make many kinds of symbolic manipulations all but impossible.

Providing a visual way to interpret and manipulate mathematical expressions was a revolution in mathematics without which most modern mathematics would never have appeared. Eliminating that is comparable to writing computer programs via punched cards because "that's how they used to do it".

> You can't discuss math while getting rid of the math symbols. That's not a reasonable proposal.

If we assert that some topic can’t be discussed with plain prose, then the only logical conclusion is that you can’t discuss the topic at all.

> Math on the web is broken, the the affected people should be up complaining about that.

There is really two different topic there.

One is, how can screen readers deal appropriately with symbolic notations — be it astrological esoteric formula or mathematical abstruse formula.

An other one is how you chose to express ideas. Using symbols only is always possible, whatever the topic. Using prose only is always possible. Using multiple representations is also always possible, including audio record, alphabetical text, ideograms, pictures, video.

Note that I didn’t blame the author for any fault here. I just pointed out that, if one take as a goal to be the most accessible as possible to general public, using academic symbols is not the way to go. It doesn’t mean that people with some matching academic curricula might not prefer to have a document full of esoteric symbols, be it for real actual communication advantages or mere bigotry and vulgar elitism.

We all know here, I guess, that anything written with this kind of symbols can be just as well and without any ambiguity transcribed into a programming language which use exclusively mundane words or turned into a series of two signs that no one can grasp instantly.

That conversation make me think about comments in https://news.ycombinator.com/item?id=36433212

Why is "plain prose" so logically the litmus test for what can be discussed? It certainly wasn't designed around the idea it should cover every possible concept, or do so remotely efficiently either, so the repeated assertion it logically is the only way to know if a concept can be discussed is a bit hard to follow. It does cover most concepts though, and conveniently.

> If we assert that some topic can’t be discussed with plain prose, then the only logical conclusion is that you can’t discuss the topic at all.

Please bear in mind that mathematical notation is a language, and that mathematical formulas are perfectly valid plain prose in that language.

I imagine that some screen readers will fail gracelessly when faced with Chinese script or Hindu as well. Especially if they're not unicode compliant.

But once you hit that threshold you are simply in a battle of dueling accessibility concerns. Not everyone is sighted, but neither does everyone rely on English as a primary language.

Nor should they as the English language was not designed to convey all concepts accurately. It excels mostly in conveying concepts germane to anglophone cultures. And three guesses what concepts are not popularly relevant to your standard anglophone? That's right.. calculus and theoretical physics.

That's not to bash on English as a language. It really is a flexible beast with a far reaching vocabulary. But there literally exists no language that is ideal for encapsulating every single idea under the sun. One must have a way to support many of the most diverse ones at the same time. And modern mathematical notation belongs on that short list along with English.

>Please bear in mind that mathematical notation is a language, and that mathematical formulas are perfectly valid plain prose in that language.

In that sense its more a DSL than a generalist language. And anything you can express in a DSL, you can also express it with a more generalist language. Most likely the DSL will provide a far more compact way to communicate what it allows to express, but that compactness doesn’t come for free: it takes time to compress and decompress and you have to also communicate the DSL specification in some preexisting medium.

On my side, I suppose "discuss" to mean we can talk on the topic face to face with spontaneous expressions means like oral expression and listening comprehension, or sign language. I don’t mean that there is no other mean to discuss, but when we can’t transpose the topic in such a medium, we are probably beyond the realm of discussion. For example when we make love, there is more happening than what can either hope to realize through mere talk.

Once again, I’m not again DSLs and so on. I just mean that there are not the proper tools for maximizing accessibility.

I don't think it's really viable to just stop posting equations altogether. Yeah it's more accessible, but it would also completely cripple any sort of discussion between mathematicians, physicists, etc.

Equations and mathematical notation aren't simple illustrations. They're in many ways more important than the stuff around them.

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.

How does this interact with Find? Select text?

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...

Author here, I'm sorry to hear that it doesn't work well with a screen reader. I tested it with the reader mode of Firefox, which renders MathML perfectly, although I don't know how that would translate to a screen reader. Safari reader mode renders the math inline, like this:

   I just define a new derivative operator, like so: dxđ f(x)≡2π1 ⋅dxd f(x). That’s all.

while Chrome's reader mode just fails to recognize the content entirely, even though it's the most basic <body><div id="content"><p> ... structure possible. I have basically zero web dev experience so I don't know how to fix this, maybe I need to tweak the KaTeX settings.

I think it's quite sad that math is so difficult on the web. While setting up the blog, I looked around and it seemed like FF is the only browser with proper MathML support, but I think that was also being phased out because it's apparently buggy and hard to maintain. IMO, the screen reader version should just basically be the LaTeX source, which is probably kind of awful when read out loud, but at least it would be unambiguous.

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.

This could be viewed as a bug.

The formulas have been set by KaTeX. The text after "like so:" could be read like this:

"d bar over dx then f paren open x paren close triple equal one over two pi multiply-dot d over dx then f paren open x paren close"

Would this be useful to you?

Then an issue could be opened here: https://github.com/KaTeX/KaTeX/issues

What screen reader do you use? As a sighted person with no screen reader experience I tried Apple's VoiceOver on some math heavy Wikipedia pages and found that it completely mangled the formulas there, e.g. not distinguishing between numerator and denominator of fractions, not giving any indication of the difference between a coefficient versus an exponent, pronouncing invisible formatting commands, and so on.

Are there any websites with extensive, complicated mathematical formulas which are accessible to screen reader users? What's the current state of the art?

In general, would you prefer a typeset formula navigable in the usual way by a screen reader, or an explicit English language fallback explicitly pronouncing the formula the way a lecturer would read it to a class?

I ask because from what I can tell there are few if any screen reader users among authors of Wikipedia technical articles. I at least have quite a poor understanding of how to make those articles accessible.

Do you mind if I email you to ask questions about screen readers and mathematical formulas?

Wow, I'd be interested in knowing how to fix this. I don't currently write math on the web but if I had to, I would be tempted to do it exactly like this: bare HTML with MathML, no JavaScript. And would do it thinking about blind people relying on accessible content to read it.

Hi! I'm trying to work on understanding how to make websites more accessible right now and probably the first thing people generally think of are blind users. However, I'm having a hell of a time figuring out how to use screen readers. Is there any screen reader or documentation/tutorial you might recommend for sighted users to learn how to use screen readers?

Do you have any additional examples of webpages that fail to be readable for you (math-related or otherwise)? I work on an accessibility tool for web developers, and would like to see if we are detecting those bad cases correctly.