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

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.  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 + *);
   };


[1] http://www.w3.org/TR/wai-aria/roles#math

Received on Saturday, 19 May 2012 01:36:07 UTC