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
  • aria-labelledby
  • aria-describedby
• HTML
  • id
  • tabindex
  • presentation MathML 3
• Google Chrome with Screen Reader

Examples, second stab, July 2021

Example 1: binomial coefficient

Here is the binomial coefficient with natural number arguments: $\left(\genfrac{}{}{0pt}{}{a}{b}\right)$

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

Let the unit circle origin be $X(0,0)$.

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

$x\in ]0,1[$, where x is a real number.

<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 binomial coefficient
with natural number arguments:

$\left(\genfrac{}{}{0pt}{}{a}{b}\right)$

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 unit circle origin be

$X(0,0)$

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

$x\in ]0,1[$

where x is a real number.

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