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


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

Received on Saturday, 19 May 2012 05:54:44 UTC