# 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>.
```
Sign in with Wallet
Connect another wallet