MathJax Configuration for Web, Mobile, and Helper

Question

Input:

<ins class="marked-for-jax">\[ 1 + 2 + 3 + \ldots + n = \frac{n(n+1)}2. \]</ins> 

MathJax Config:

 MathJax.Hub.Config({ jax: ["input/TeX", "output/HTML-CSS"], extensions: ["tex2jax.js"], messageStyle: "none", TeX: { extensions: ["AMSmath.js", "AMSsymbols.js", "noErrors.js", "noUndefined.js"] } }); 

MathJax output, shortened and formatted for clarity:

 <p> <ins class="marked-for-jax"> <span class="MathJax_Preview" style="color: inherit;"></span> <div class="MathJax_Display" style="text-align: center;"> <span class="MathJax" id="MathJax-Element-2-Frame" tabindex="0" data-mathml="[mathML data here]" role="presentation" style="position: relative;"> <nobr aria-hidden="true"><span class="math" id="MathJax-Span-12" role="math" style="width: 14.517em; display: inline-block;"><!--lots of nested spans here--></nobr> <span class="MJX_Assistive_MathML MJX_Assistive_MathML_Block" role="presentation"><!--lots of mathML here--></span> </span> </div> <script <!--does not impact any output. Why is it even there at all?--> type="math/tex; mode=display" id="MathJax-Element-2">1 + 2 + 3 + \ldots + n = \frac{n(n+1)}2.</script> </ins> </p> 

Appearance in UIWebView. Please note that we see the result twice. The first is from nested spaces; the second is from an assistant.

If I cross out the helper with CSS, we really only see the output. But VoiceOver users do not hear anything. Alternatively, I could split the nested spaces using CSS. I am suspicious of this approach because, although it will probably work on iOS, most likely it will not work on all browsers. Also, depending on how I use the output, I might want MathJax not to output parts of what it is doing now. For example, in some cases I will use Html in such a way as to be sure that it will appear only on iOS. In that case, any Html that I am removing css, I would prefer not to have in the first place.

How can I get a conclusion to make sense for both sighted and auxiliary users?

EDIT: I found a related question here: MathJax duplicates my equations - why and how can I fix it?

Further editing: I can get rid of the "double vision" problem with the following CSS obtained here: http://mathjax.readthedocs.org/en/latest/options/assistive-mml.html . But then I had a new problem - VoiceOver doesn't talk about any math.

 span.MJX_Assistive_MathML { position:absolute!important; clip: rect(1px, 1px, 1px, 1px); padding: 1px 0 0 0!important; border: 0!important; height: 1px!important; width: 1px!important; overflow: hidden!important; display:block!important; } 

Answer 1

PARTIAL ANSWER was supposed to include the following CSS. Please note that this applies to my standalone iOS / droid script. For those of you who have different scenarios, it may not apply. In addition, some things come out very badly. I'm not quite happy with that.

 [aria-hidden="true"] { display: none; }