Re: [Filter Effects][css3-transforms] Using MathML for formulas

Dirk: in an earlier email you asked (about MathJax):

> At the moment the [MathML] code is not visible in the DOM, right?

A copy of the MathML code remains in the DOM enclosed in a script tag.

For example, in this simple test
http://cdn.mathjax.org/mathjax/latest/test/sample-mml.html after the
rendering of a≠0 you will find

<script type="math/mml" id="MathJax-Element-1">
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>a</mi><mo>≠</mo><mn>0</mn>
</math></script>


Peter.



On Sat, May 19, 2012 at 1:54 AM, Dirk Schulze <dschulze@adobe.com> wrote:

>
> On May 19, 2012, at 4:35 AM, Cameron McCormack wrote:
>
> > I think some of the existing <pre>-formatted formulae in the spec aren't
> > really accessible yet anyway, especially those that render say matrices
> > with repeated "[" and "]" characters.
> Yes, that is right.
>
> >  The example that I replaced,
> >
> >   <pre>miterLimit / stroke-width = 1 / sin ( theta / 2 )</pre>
> >
> > is (at a guess) probably OK.
> >
> > I think we can use ARIA attributes to mark up the math with equivalent
> > descriptions[1].  Here's a first go at representing the above formula:
> >
> >   <div role="math" aria-describedby="a">
> >     <math display="block">
> >       <semantics>
> >         <mrow>
> >           <mfrac>
> >             <mi>miterLength</mi>
> >             <mi>stroke-width</mi>
> >           </mfrac>
> >           <mo>=</mo>
> >           <mfrac>
> >             <mn>1</mn>
> >             <mrow>
> >               <mi>sin</mi>
> >               <mo>&#x2061;</mo>
> >               <mfrac>
> >                 <mi>θ</mi>
> >                 <mn>2</mn>
> >               </mfrac>
> >             </mrow>
> >           </mfrac>
> >         </mrow>
> >         <annotation-xml encoding="application/xhtml+xml">
> >           <pre id="a">miterLimit / stroke-width = 1 / sin(theta /
> 2)</pre>
> >         </annotation-xml>
> >       </semantics>
> >     </math>
> >   </div>
> >
> >
> > This is not going to work with MathJax -- either with the SVG or
> > HTML+CSS renderings -- since as people have pointed out the <math>
> > element gets replaced with content like this (in the SVG case):
> >
> >   <div style="text-align: center;" aria-readonly="true" role="textbox"
> >        class="MathJax_SVG_Display">
> >     <span class="MathJax_SVG" style="display: inline-block;">
> >       <svg>
> >         ...
> >       </svg>
> >     </span>
> >   </div>
> >   <script type="math/mml">
> >     (CDATA representing the serialised <math> tree we started with)
> >   </script>
> >
> > so the element with id="a" is gone.
> >
> > (I'm not sure why a read only text box is the best way to present the
> > <svg> representation of the math to ATs.)
> >
> >
> > Regardless, I'm after a practical solution here -- so perhaps we can
> > just fall back on the old "position some text for the screen reader off
> > the page where the sighted reader can't see it".
> >
> >   <style>
> >     div[role="math"] > :first-child + * {
> >       position: absolute;
> >       left: -400px;
> >       width: 400px;
> >       overflow: hidden;
> >     }
> >   </style>
> >   <div role="math" aria-describedby="a">
> >     <math display="block">
> >       <mrow>
> >         <mfrac>
> >           <mi>miterLength</mi>
> >           <mi>stroke-width</mi>
> >         </mfrac>
> >         <mo>=</mo>
> >         <mfrac>
> >           <mn>1</mn>
> >           <mrow>
> >             <mi>sin</mi>
> >             <mo>&#x2061;</mo>
> >             <mfrac>
> >               <mi>θ</mi>
> >               <mn>2</mn>
> >             </mfrac>
> >           </mrow>
> >         </mfrac>
> >       </mrow>
> >     </math>
> >     <pre id="a">miterLimit / stroke-width = 1 / sin(theta / 2)</pre>
> >   </div>
> >
> > This worked in Safari with VoiceOver -- although surprisingly to me, it
> > didn't read the parentheses; I'm not sure if there is a way to
> > investigate the exact characters that are in there with VO or other ATs..
> >
> > Can anyone suggest any better way to represent the math content in HTML
> > besides a <pre> with content that looks like code?  Especially for more
> > complex formulae like the ones in
> > http://www.w3.org/TR/SVG11/implnote.html#ArcConversionEndpointToCenter.
> >  Are screen reader users who read math on the web comfortable with TeX?
> >  (I notice that Wikipedia uses <img>s of rendered math with TeX in the
> > alt="".)
> >
> >
> > Aside: it'd be neat if I could use CSS to provide aria-describedby
> > relationships for all the math in the page at once, for example
> > something like:
> >
> >   div[role="math"] {
> >     aria-describedby: selector(:scope > :first-child + *);
> >   };
> >
> That is a really great idea. I wonder if we can leave the MathML code in
> the DOM but it gets somehow "visually overridden" by the generated image.
> Means you can't see the MathML, but see the replacement. I know that some
> accessible sites do it by using "top: -1000". It is of course hacky. But we
> would just use it if the Browser does not support MathML natively.
>
> If we use <pre> (and I am fine with it for now). The problem is which
> serialization can we use. Especially for Braille the used descriptions
> differ a lot. They can even differ within a country. In CSS Transforms I
> use TeX as alternative to the images. But it is not necessarily the
> majority which can read it. I like the example on the link you posted with
> the native description on 'aria-label' as alternative. But even for the
> spoken languages it is hard to describe matrix multiplication. And it would
> require english knowledge.
>
> I will try to get some feedback from more accessibility experts.
>
> Greetings,
> Dirk
>
> >
> > [1] http://www.w3.org/TR/wai-aria/roles#math
>
>