# ARIA for MathML experiments Disclaimer: These are not "unique" or "best" narrations. E.g. the raw presentation tree is a better narration for copy-editing flows. The concept-oriented narrations, such as "binomial of a and b", are better for either skimming the document, or e-Learning elaborations. ## Setup You need google chrome with Screen Reader installed. You can get narrations for the formulas either by: - navigating via `tab`, which for me reads out the raw presentation tree when a MathML expression is focused - for sighted users only: clicking on the expression, and the bounding boxes of its subexpressions, using the mouse. This appears to read out the correct ARIA-specified narrations, at all levels of granularity. - for sighted users only: if you click over an identifier with an `aria-describedby` annotation and hold the pointer for a little while, you should hear the narration of the secondary "property" in a different pitch. ## Markup used This experiment makes use of: - ARIA - [aria-label](https://www.w3.org/TR/wai-aria/#aria-label) - [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) - [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) - HTML - [id](https://html.spec.whatwg.org/multipage/dom.html#global-attributes:the-id-attribute-2) - [tabindex](https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute) - [presentation MathML 3](https://www.w3.org/TR/MathML3/chapter3.html) - Google Chrome with [Screen Reader](https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn) ## Examples, second stab, July 2021 ### Example 1: binomial coefficient <div> Here is the <span id="binomial-details"> <span id="binomial">binomial</span> coefficient</span> with <span id="arg-details">natural number argument</span>s: <math aria-labelledby="ex1"> <mrow id="ex1" tabindex='0' aria-labelledby="binomial arg1 arg2"> <mo aria-describedby="ex1">(</mo> <mfrac linethickness="0pt"> <mi aria-describedby="arg-details" id="arg1">a</mi> <mi aria-describedby="arg-details" id="arg2">b</mi> </mfrac> <mo aria-describedby="ex1">)</mo> </mrow> </math> </div> ```html Here is the <span id="binomial-details"> <span id="binomial">binomial</span> coefficient</span> with <span id="arg-details">natural number argument</span>s: <math aria-labelledby="ex1"> <mrow id="ex1" tabindex='0' aria-labelledby="binomial arg1 arg2"> <mo aria-describedby="ex1">(</mo> <mfrac linethickness="0pt"> <mi aria-describedby="arg-details" id="arg1">a</mi> <mi aria-describedby="arg-details" id="arg2">b</mi> </mfrac> <mo aria-describedby="ex1">)</mo> </mrow> </math> ``` ### Example 2: unit circle origin <div> Let the <span id="origin-details">unit circle origin</span> be <math aria-labelledby="ex2"> <mrow id="ex2" tabindex='0' aria-labelledby="point varname at-coordinates"> <mrow id="point" aria-label="point"></mrow> <mrow> <mi id="varname" aria-describedby="origin-details">X</mi> <mrow id="at-coordinates" aria-labelledby="coordinates x y"> <mo aria-describedby="at-coordinates" stretchy="false">(</mo> <mn id="x">0</mn> <mo id="coordinates" aria-label="at coordinates">,</mo> <mn id="y">0</mn> <mo aria-describedby="at-coordinates" stretchy="false">)</mo> </mrow> </mrow> </mrow> </math>. </div> ```html Let the <span id="origin-details">unit circle origin</span> be <math aria-labelledby="ex2"> <mrow id="ex2" tabindex='0' aria-labelledby="point varname at-coordinates"> <mrow id="point" aria-label="point"></mrow> <mrow> <mi id="varname" aria-describedby="origin-details">X</mi> <mrow id="at-coordinates" aria-labelledby="coordinates x y"> <mo aria-describedby="at-coordinates" stretchy="false">(</mo> <mn id="x">0</mn> <mo id="coordinates" aria-label="at coordinates">,</mo> <mn id="y">0</mn> <mo aria-describedby="at-coordinates" stretchy="false">)</mo> </mrow> </mrow> </mrow> </math>. ``` ### Example 3: open interval <div> <math aria-labelledby="ex3"> <mrow id="ex3" tabindex='0' aria-labelledby="varname in interval"> <mi id="varname" aria-describedby="x-details">x</mi> <mo id="in" aria-label="is in">∈</mo> <mrow id="interval" aria-labelledby="open-interval arg-from arg-to"> <mrow id="open-interval" aria-label="open-interval"></mrow> <mo stretchy="false" aria-describedby="interval">]</mo> <mn id="arg-from">0</mn> <mo aria-describedby="interval">,</mo> <mn id="arg-to">1</mn> <mo stretchy="false" aria-describedby="interval">[</mo> </mrow> </mrow> </math>, where x is <span id="x-details">a real number</span>.</div> ```html <math aria-labelledby="ex3"> <mrow id="ex3" tabindex='0' aria-labelledby="varname in interval"> <mi id="varname" aria-describedby="x-details">x</mi> <mo id="in" aria-label="is in">∈</mo> <mrow id="interval" aria-labelledby="open-interval arg-from arg-to"> <mrow id="open-interval" aria-label="open-interval"></mrow> <mo stretchy="false" aria-describedby="interval">]</mo> <mn id="arg-from">0</mn> <mo aria-describedby="interval">,</mo> <mn id="arg-to">1</mn> <mo stretchy="false" aria-describedby="interval">[</mo> </mrow> </mrow> </math>, where x is <span id="x-details">a real number</span>. ``` ## Examples, First stab, June 2021 ### June example 1: binomial coefficient Here is the <span id="interval-details">binomial coefficient</span> with <span id="arg-details">natural number argument</span>s: <div role='math'> <math tabindex='0' aria-labelledby="op arg1 arg2"> <mrow id="op" aria-label="binomial" aria-describedby="binomial-details"> <mo>(</mo> <mfrac linethickness="0pt"> <mi aria-describedby="arg-details" id="arg1">a</mi> <mi aria-describedby="arg-details" id="arg2">b</mi> </mfrac> <mo>)</mo> </mrow> </math> </div> ```html Here is the <span id="binomial-details">binomial coefficient</span> with <span id="arg-details">natural number argument</span>s: <math aria-labelledby="op arg1 arg2"> <mrow id="op" aria-label="binomial" aria-describedby="binomial-details"> <mo>(</mo> <mfrac linethickness="0pt"> <mi aria-describedby="arg-details" id="arg1">a</mi> <mi aria-describedby="arg-details" id="arg2">b</mi> </mfrac> <mo>)</mo> </mrow> </math> ``` ### June example 2: unit circle origin Let the <span id="origin-details">unit circle origin</span> be <div> <math tabindex='0' aria-labelledby="point varname at-coordinates"> <mrow id="point" aria-label="point"> <mi id="varname" aria-describedby="origin-details">X</mi> <mrow id="at-coordinates" aria-labelledby="coordinates x y"> <mo stretchy="false">(</mo> <mn id="x">0</mn> <mo id="coordinates" aria-label="at coordinates">,</mo> <mn id="y">0</mn> <mo stretchy="false">)</mo> </mrow> </mrow> </mrow> </math> </div> ```html Let the <span id="origin-details">unit circle origin</span> be <math tabindex='0' aria-labelledby="point varname at-coordinates xy"> <mrow id="point" aria-label="point"> <mi id="varname" aria-describedby="origin-details">X</mi> <mrow id="xy" aria-labelledby="x y"> <mo stretchy="false">]</mo> <mn id="x">0</mn> <mo id="at-coordinates" aria-label="at coordinates">,</mo> <mn id="y">0</mn> <mo stretchy="false">[</mo> </mrow> </mrow> </mrow> </math> ``` ### June example 3: open interval <div> <math tabindex='0' aria-labelledby="varname in interval"> <mi id="varname" aria-describedby="x-details">x</mi> <mo id="in" aria-label="is in">∈</mo> <mrow id="interval" aria-labelledby="open-interval arg-from arg-to"> <mo stretchy="false">]</mo> <mn id="arg-from">0</mn> <mo id="open-interval" aria-label="open-interval">,</mo> <mn id="arg-to">1</mn> <mo stretchy="false">[</mo> </mrow> </math> </div> where x is <span id="x-details">a real number</span>. ```html <math tabindex='0' aria-labelledby="varname in interval"> <mi id="varname" aria-describedby="x-details">x</mi> <mo id="in" aria-label="is in">∈</mo> <mrow id="interval" aria-labelledby="open-interval arg-from arg-to"> <mo stretchy="false">(</mo> <mn id="arg-from">0</mn> <mo id="open-interval" aria-label="open-interval">,</mo> <mn id="arg-to">1</mn> <mo stretchy="false">)</mo> </mrow> </math> where x is <span id="x-details">a real number</span>. ```