title: Highcharts accessibility / VUE.js
body: <p>we have a client wanting full screen read and keybaord navigation for their site (hosted on squarespace and we made a vue plugin for them)</p>
  <p>I got all areas of their site to work including leaflet but high charts i am having no luck with keyboard navigation
  html line in vue</p>
  <pre><code>    &lt;highcharts
        :options=&quot;overTimeChartOptions&quot;
        id=&quot;splineChat&quot;
        style=&quot;display: block&quot;
      &gt;&lt;/highcharts&gt;
  </code></pre>
  <p>use this in the JS section for options of the chart</p>
  <pre><code>  this.overTimeChartOptions = {
      accessibility: {
        keyboardNavigation: {
          enabled: true,
          focusBorder: {
            enabled: true,
            hideBrowserFocusOutline: true,
            margin: 2,
            style: {
              borderRadius: 3,
              color: &quot;#335cad&quot;,
              lineWidth: 2,
            },
          },
        },
      },
      chart: {
        type: &quot;areaspline&quot;,
        style: {
          fontFamily: &quot;sans-serif&quot;,
          color: &quot;#333333&quot;,
        },
      },
      title: {
        text: &quot;&quot;,
        align: &quot;left&quot;,
      },
      subtitle: {
        text: &quot;&quot;,
        align: &quot;left&quot;,
        style: {
          fontSize: &quot;15px&quot;,
        },
      },
      legend: {
        layout: &quot;horizontal&quot;,
        align: &quot;center&quot;,
        verticalAlign: &quot;bottom&quot;,
        fontweight: &quot;bold&quot;,
        itemStyle: {
          fontWeight: &quot;500&quot;,
          fontfontSize: &quot;14px&quot;,
        },
        symbolRadius: 0,
        symbolHeight: 9,
      },
      xAxis: {
        categories: data.xxx.xxx,
      },
      yAxis: {
        title: {
          text: &quot;xxxx&quot;,
        },
      },
      credits: {
        enabled: false,
      },
      plotOptions: {
        areaspline: {
          fillOpacity: 0,
          lineWidth: 5,
        },
      },
      series: [
        {
          name: &quot;xxxxxx&quot;,
          data: data.xxx.xxx,
          color: &quot;#0070c0&quot;,
        },
       ,
      ],
    };
  </code></pre>
  <p>for good measure added the script line for the accessibiliy module with highcharts</p>
  <pre><code> head() {
     return {
      script: {
      src: &quot;https://code.highcharts.com/modules/accessibility.js&quot;,
      },
    };
  },
  </code></pre>
  <p>once we are one the screen though the tabs and arrows completely bounce over the chart section</p>
  <p>added the main js file as below</p>
  <pre><code>import Vue from &quot;vue&quot;;
  import App from &quot;./App.vue&quot;;
  import router from &quot;./router&quot;;
  import store from &quot;./store&quot;;
  
  import VueHighcharts from &quot;vue-highcharts&quot;;
  import Highcharts from &quot;highcharts/highmaps&quot;;
  import HighchartsVue from &quot;highcharts-vue&quot;;
  
  &lt;script src=&quot;https://code.highcharts.com/modules/accessibility.js&quot;&gt; 
  &lt;/script&gt;;
  
  Vue.config.productionTip = false;
  new Vue({
  router,
  store,
  render: (h) =&gt; h(App),
  }).$mount(&quot;#app&quot;);
  
  Vue.use(VueHighcharts, { Highcharts });
  
  Vue.use(HighchartsVue);
  
  Highcharts.setOptions({
  accessibility: {
  keyboardNavigation: {
    enabled: true,
  },
  },
  });
  </code></pre>