KaTeX / KaTeX/KaTeX

VoiceOver screenreader can't read KaTeX's hidden MathML

Open
#820 33 comments 4 reactions 0 assignees View on GitHub
accessibility MathML
Dominant language
TypeScript
Stars
20.4k
Forks
1.3k
Avg merge
14h 37m
Merged PRs (30d)
7

Description

The KaTeX demo page has some math equations that render visually hidden MathML output and a visible equation that has aria-hidden=true. What this problem does is prevents mobile screen reader users like VoiceOver for iOS from using touch exploration (explore-by-touch) with their screen reader enabled to move their fingers on the screen and set focus onto the MathML equation. They can't touch the visible equations (non-MathML) directly because the visible equations have aria-hidden=true which prevents screen reader focus.

The screen reader user on iOS can get to the MathML equations but they can only do it through linear navigation, e.g. swipe to the next element one at a time, or use VoiceOver+arrow key navigation. Touch exploration is disabled though and the MathML is skipped over if just moving your finger along the screen trying to focus on the equation.

My suggestion to solve this problem would be to do something like detecting browsers that support MathML like Safari and then render the MathML as visible equations rather than visually hidden.

Steps to reproduce:
1. Visit https://khan.github.io/KaTeX/ on an iPhone or iPad
2. Turn on the VoiceOver Screen reader.
3. Set focus with your finger to the Math equations.

Expected Results:
VoiceOver speaks the Math equations out in an accessible format after you touch them to set focus.

Actual Results:
VoiceOver makes a "ding, ding, ding" noise as you try to touch the Math equations and you can't actually set focus to the match equations by directly touching them.

Code that is used to visually hide the accessible MathML:
.katex .katex-mathml {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden
}

Happy to help answer any follow up questions and provide more info!

Thanks!

Contributor guide

Open the contributing guide

Research direction

Start with the KaTeX demo page and the `.katex .katex-mathml` CSS rule shown in the report; reproduce the behavior on an iPhone or iPad with VoiceOver and touch exploration enabled. Investigate how the visually hidden MathML and `aria-hidden=true` visible equation interact, and consider browser support for MathML. Done means VoiceOver can focus and speak the equation through direct touch exploration without losing the existing visual rendering.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, ios
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.