Override mathjax accessibility blue box feature

Question

How do I override the accessibility feature in mathjax that puts a blue box around equations? I just want it to respond like normal text when clicked, ie no blue box.

For example, click on an equation here: http://jsfiddle.net/dandiebolt/AqDCA/

\(ax^2 + bx + c = 0\)

Answer 1

You are probably describing the native browser behavior that adds an outline to an element that is in focus (default styling depends on the browser). MathJax elements can be put into focus by clicking because they are added to the tabindex for accessibility purposes.

So first piece of the answer must be: don't do it. Don't abandon accessibility.

If you don't like the default browser outline, design the heck out of it! All this needs is something like

.MathJax:focus, .mjx-chtml:focus, .MathJax_SVG:focus {
   outline: 1px solid gray;
}

(to cover MathJax's HTML-CSS, CommonHTML and SVG output.)

But this is an ugly world so if you are brutally forced to abandon accessibility, you can disable the tabindex.

To quote from the MathJax documentation:

inTabOrder: true

This controls whether math elements should be included in the tabindex. If set to true, MathJax will add tabindex=0to the output. If set to false, it will add tabindex="-1".

Developers are strongly discouraged from initially disabling this (by means of configuration) as it will render the menu inaccessible.

In other words, unless you disable the menu, don't damage its accessibility. (And also, don't disable the menu; it's critical for accessibility, especially with enhancements in the upcoming v2.7 release.)