# Highcharts 1 Enable Accessibility

> Sub-skill of highcharts: 1. Enable Accessibility (+3).

- Skill: `vamseeachanta/highcharts-1-enable-accessibility` (Agent Skill)
- Install (CLI): `npx skillmds@latest add vamseeachanta/highcharts-1-enable-accessibility`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vamseeachanta/highcharts-1-enable-accessibility/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: vamseeachanta (https://skillmd.com/u/vamseeachanta)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/vamseeachanta/highcharts-1-enable-accessibility

---


# 1. Enable Accessibility (+3)

## 1. Enable Accessibility

```javascript
Highcharts.chart('container', {
  accessibility: {
    enabled: true,
    description: 'Chart showing sales trends over time',
    keyboardNavigation: {
      enabled: true
    }
  },
  // ... rest of config
});
```


## 2. Customize Tooltips

```javascript
tooltip: {
  formatter: function () {
    return '<b>' + this.series.name + '</b><br/>' +
           this.x + ': ' + this.y.toFixed(2);
  }
}
```


## 3. Use Responsive Options

```javascript
Highcharts.chart('container', {
  chart: {
    height: (9 / 16 * 100) + '%' // 16:9 ratio
  },
  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          align: 'center',
          verticalAlign: 'bottom',
          layout: 'horizontal'
        },
        yAxis: {
          labels: {
            align: 'left',
            x: 0,
            y: -5
          },
          title: {
            text: null
          }
        }
      }
    }]
  }
});
```


## 4. Export Functionality

```javascript
exporting: {
  enabled: true,
  buttons: {
    contextButton: {
      menuItems: [
        'downloadPNG',
        'downloadJPEG',
        'downloadPDF',
        'downloadSVG',
        'separator',
        'downloadCSV',
        'downloadXLS'
      ]
    }
  }
}
```