<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JAWS MathJax 3 vs MathJax 4 Accessibility Test \u2014 Controlled</title>
<style>
body { font-family: sans-serif; line-height: 1.65; max-width: 1050px; margin: 2em auto; padding: 0 1em; }
section { border: 2px solid #777; padding: 1em; margin: 1.5em 0; }
.test { border-bottom: 1px solid #aaa; padding: .8em 0; }
.note { background: #eee; padding: 1em; }
.small { font-size: .95em; }
</style>
</head>
<body>
<h1>JAWS: MathJax 3 vs. MathJax 4 Accessibility Methods</h1>
<div class="note">
<p><strong>Why this test:</strong> Your previous experiment showed that MathJax 3
reads and browses normally, while MathJax 4 gives a good initial description but
beeps and reads only sporadically after entering navigation with Return.</p>
<p>This page isolates the accessibility method. It contains three independent
sections, all using the same mathematical expressions:</p>
<ol>
<li><strong>A \u2014 MathJax 3 + assistive MathML</strong></li>
<li><strong>B \u2014 MathJax 4 + its new accessibility system</strong>
(speech/Braille/semantic enrichment)</li>
<li><strong>C \u2014 MathJax 4 + assistive MathML</strong>, with the new speech,
Braille, enrichment, and explorer-related behavior disabled.</li>
</ol>
<p><strong>Navigation procedure:</strong> First read the expression normally.
Then click or focus the expression, press Return, and use the arrow keys exactly
as you did in the previous test. The initial description and the subsequent
arrow-key behavior are both important.</p>
<p><strong>Browser observation:</strong> You have already reported that the
MathJax 3-vs-4 behavior is the same in Firefox, Chrome, and Edge. That makes a
browser-specific explanation less likely and makes this configuration comparison
particularly useful.</p>
</div>
<section>
<h2>A \u2014 MathJax 3 + assistive MathML</h2>
<p class="small">This is the control. MathJax 3's assistive-MML mechanism is enabled.</p>
<div class="test"><h3>A1. z</h3><p>\(z\)</p></div>
<div class="test"><h3>A2. z sub 0</h3><p>\(z_0\)</p></div>
<div class="test"><h3>A3. z squared</h3><p>\(z^2\)</p></div>
<div class="test"><h3>A4. One over z</h3><p>\(\frac{1}{z}\)</p></div>
<div class="test"><h3>A5. Taylor series</h3>
\[
f(z)=\sum_{n=0}^{\infty}a_n(z-\alpha)^n
\]
</div>
<div class="test"><h3>A6. Quadratic formula</h3>
\[
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
\]
</div>
<div class="test"><h3>A7. Aligned equations</h3>
\[
\begin{aligned}
f(z)&=\sum_{n=0}^{\infty}a_n(z-\alpha)^n,\\
g(z)&=\sum_{n=0}^{\infty}b_n(z-\alpha)^n.
\end{aligned}
\]
</div>
<div class="test"><h3>A8. Trigonometric identity</h3>
\[
\sin^3(z)=\frac{3\sin(z)-\sin(3z)}{4}
\]
</div>
</section>
<section>
<h2>B \u2014 MathJax 4 + new accessibility</h2>
<p class="small">This uses MathJax 4's default accessibility architecture:
semantic enrichment plus speech/Braille and the associated exploration behavior.</p>
<div class="test"><h3>B1. z</h3><p>\(z\)</p></div>
<div class="test"><h3>B2. z sub 0</h3><p>\(z_0\)</p></div>
<div class="test"><h3>B3. z squared</h3><p>\(z^2\)</p></div>
<div class="test"><h3>B4. One over z</h3><p>\(\frac{1}{z}\)</p></div>
<div class="test"><h3>B5. Taylor series</h3>
\[
f(z)=\sum_{n=0}^{\infty}a_n(z-\alpha)^n
\]
</div>
<div class="test"><h3>B6. Quadratic formula</h3>
\[
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
\]
</div>
<div class="test"><h3>B7. Aligned equations</h3>
\[
\begin{aligned}
f(z)&=\sum_{n=0}^{\infty}a_n(z-\alpha)^n,\\
g(z)&=\sum_{n=0}^{\infty}b_n(z-\alpha)^n.
\end{aligned}
\]
</div>
<div class="test"><h3>B8. Trigonometric identity</h3>
\[
\sin^3(z)=\frac{3\sin(z)-\sin(3z)}{4}
\]
</div>
</section>
<section>
<h2>C \u2014 MathJax 4 + old assistive MathML</h2>
<p class="small">This uses MathJax 4 but requests assistive MathML while
disabling semantic enrichment, speech, Braille, and collapsible-math behavior.
This is the critical comparison with section B.</p>
<div class="test"><h3>C1. z</h3><p>\(z\)</p></div>
<div class="test"><h3>C2. z sub 0</h3><p>\(z_0\)</p></div>
<div class="test"><h3>C3. z squared</h3><p>\(z^2\)</p></div>
<div class="test"><h3>C4. One over z</h3><p>\(\frac{1}{z}\)</p></div>
<div class="test"><h3>C5. Taylor series</h3>
\[
f(z)=\sum_{n=0}^{\infty}a_n(z-\alpha)^n
\]
</div>
<div class="test"><h3>C6. Quadratic formula</h3>
\[
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
\]
</div>
<div class="test"><h3>C7. Aligned equations</h3>
\[
\begin{aligned}
f(z)&=\sum_{n=0}^{\infty}a_n(z-\alpha)^n,\\
g(z)&=\sum_{n=0}^{\infty}b_n(z-\alpha)^n.
\end{aligned}
\]
</div>
<div class="test"><h3>C8. Trigonometric identity</h3>
\[
\sin^3(z)=\frac{3\sin(z)-\sin(3z)}{4}
\]
</div>
</section>
<section>
<h2>Results to report</h2>
<p>Please give me the result for each section, rather than necessarily every
individual equation, unless one equation behaves differently.</p>
<ul>
<li><strong>A:</strong> initial reading / Return / arrow-key browsing</li>
<li><strong>B:</strong> initial reading / Return / arrow-key browsing</li>
<li><strong>C:</strong> initial reading / Return / arrow-key browsing</li>
</ul>
<p>The most informative result would be:</p>
<p><strong>A works \u2192 B beeps \u2192 C works.</strong></p>
<p>If that happens, the evidence would strongly favor the new MathJax 4
speech/Braille/enrichment/exploration accessibility layer as the place where
the JAWS interaction breaks down. If C also beeps, then we know the problem is
not limited to the new accessibility layer.</p>
</section>
<!-- ============================================================
MATHJAX CONFIGURATION NOTES
============================================================
A: MathJax 3 combined TeX/MathML/CHTML component includes assistive MML.
B: MathJax 4 defaults: enrich=true, speech=true, braille=true,
assistiveMml=false.
C: MathJax 4: assistiveMml=true, enrich=false, speech=false,
braille=false, collapsible=false.
The MathJax 4 documentation says that speech or Braille activates the
explorer, while disabling enrichment disables the accessibility tools.
============================================================ -->
<script>
const configs = {
A: `<script>window.MathJax={options:{menuOptions:{settings:{assistiveMml:true}}}};<\/script>
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"><\/script>`,
B: `<script>window.MathJax={options:{menuOptions:{settings:{enrich:true,speech:true,braille:true,assistiveMml:false,collapsible:false}}}};<\/script>
<script async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-chtml.js"><\/script>`,
C: `<script>window.MathJax={options:{menuOptions:{settings:{enrich:false,speech:false,braille:false,assistiveMml:true,collapsible:false}}}};<\/script>
<script async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-chtml.js"><\/script>`
};
const expressions = [
["1","Simple variable", "\\(z\\)"],
["2","Subscript", "\\(z_0\\)"],
["3","Power", "\\(z^2\\)"],
["4","Fraction", "\\(\\frac{1}{z}\\)"],
["5","Taylor series", "\\[f(z)=\\sum_{n=0}^{\\infty}a_n(z-\\alpha)^n\\]"],
["6","Quadratic formula", "\\[x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}\\]"],
["7","Aligned equations", "\\[\\begin{aligned}f(z)&=\\sum_{n=0}^{\\infty}a_n(z-\\alpha)^n,\\\\g(z)&=\\sum_{n=0}^{\\infty}b_n(z-\\alpha)^n.\\end{aligned}\\]"],
["8","Trigonometric identity", "\\[\\sin^3(z)=\\frac{3\\sin(z)-\\sin(3z)}{4}\\]"]
];
function makeFrame(letter, label) {
const math = expressions.map(e => `<div class="test"><h3>${letter}${e[0]}. ${e[1]}</h3><div>${e[2]}</div></div>`).join("");
const src = `<!doctype html><html lang="en"><head><meta charset="utf-8">
<title>${label}</title>${configs[letter]}
<style>body{font-family:sans-serif;line-height:1.8;padding:1em}.test{border-bottom:1px solid #aaa;padding:.8em 0}</style>
</head><body><h2>${label}</h2>${math}</body></html>`;
const f = document.createElement("iframe");
f.title = label;
f.srcdoc = src;
return f;
}
const containers = [
["A","MathJax 3 + assistive MathML"],
["B","MathJax 4 + new accessibility"],
["C","MathJax 4 + assistive MathML"]
];
const sections = document.querySelectorAll("body > section");
sections.forEach((section, i) => {
const [letter, label] = containers[i];
section.innerHTML = `<h2>${label}</h2>
<p class="small">${letter === "A" ? "Older assistive-MathML method." :
letter === "B" ? "New MathJax 4 speech/Braille/semantic-enrichment method." :
"MathJax 4 using assistive MathML with the new accessibility features disabled."}</p>`;
section.appendChild(makeFrame(letter, label));
});
</script>
</body>
</html>