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

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>

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>

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

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>

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

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