Search code examples
accessibilitymathjax

How to activate MathJax accessibility by default?


I've searched the documentation back and forth, and couldn't find a way to activate the accessibility feature by default. Only by right click on a Mathjax element to open the context menu, and select accessibility->activate.

The documentation reads: "The extension can be activated either via the context menu, which itself is fully accessible, or by default using configuration options. "

But I couldn't find any mention of how to activate it using the configuration. This is the configuration I found, and there's no "activate" option there.

What am I missing?

(I'm using the latest MathJax version: 3.0)

This is how I configure my MathJax, and below is the context menu I'm getting, where the accessibility option is not activated.

MathJax = {
   tex: {
     inlineMath: [['##', '##'], ['\\(', '\\)']]
   },
   options: {
       a11y: {
          speech: true,   
          subtitles: true
       }
  }
};

The option I want to set is marked in red


Solution

  • After two days of digging in the documentation, I gave up. I don't think it's possible to activate the accessibility feature by default. Personally I think it's absurd, because how on earth is a blind person supposed to guess how to activate it if the screen reader isn't reading it?

    Eventually, what I did was to hide a div in a top location in every page, with instructions on how to activate the plug in. I'm using css to hide that div from all users, and expose it to screen readers like so:

      .accessibility_hint{font: 400 12px arial; color: #0e2d6d; background-color: white; position: absolute; left: 50%; margin-left: -55px; top: 0px; padding: 2px 4px; opacity: 0;}
    	.accessibility_hint:focus, .accessibility_hint:active{opacity: 1; z-index:999;} 
    the div is here. you'll see it only if you use keyborad navigation to focus on it
        <div class=accessibility_hint tabindex=0>[insert textual explanation on how to use keyboard navigation to activate the plug-in]</div>