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

From: Peter Krautzberger <pkrautzb@umich.edu>
Date: Sat, 19 May 2012 11:39:16 -0400
Cc: Cameron McCormack <cam@mcc.id.au>, Vincent Hardy <vhardy@adobe.com>, "public-fx@w3.org" <public-fx@w3.org>
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>
[/itex]</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>
> >     [/itex]
> >   </div>
> >
> >
> > This is not going to work with MathJax -- either with the SVG or
> > HTML+CSS renderings -- since as people have pointed out the > > 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 [itex] 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> > >
> >     <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
>
>

Received on Saturday, 19 May 2012 17:23:08 UTC

This archive was generated by hypermail 2.3.1 : Monday, 22 June 2015 03:33:47 UTC