# 접근성

> 키보드로 값 읽기, 자동 요약, 숨긴 표, 움직임 줄이기.

Source: https://82chart.com/docs/accessibility/

82chart는 따로 설정하지 않아도 스크린리더와 키보드로 읽을 수 있습니다. 무료 라이브러리 중에서는 드문 부분입니다.

## 자동 요약

바깥 요소는 `role="figure"` 이고 `aria-label` 에 요약이 들어갑니다. 예: "선 차트, 월별 방문자. 시리즈 2개. 1월~10월. 올해: 최고 80,100명(10월), 최저 41,200명(1월) …". `description` 옵션을 주면 그 문장이 앞에 붙습니다.

## 키보드

| 키 | 동작 |
| --- | --- |
| `Tab` | 차트로 들어가면 첫 값에 툴팁 |
| `←` / `→` | 앞뒤 x로 (가로 막대는 `↑`/`↓`) |
| `↑` / `↓` | 다른 시리즈로 |
| `Home` / `End` | 처음 / 마지막 값 |
| `Enter` / `Space` | 그 점을 누른 것과 같음 (`click` 이벤트) |
| `Esc` | 툴팁 닫기 |
| `+` / `-` / `0` | 확대 / 축소 / 원래대로 (`zoom: true`) |

아래 차트를 `Tab` 으로 누른 뒤 화살표 키로 움직여 보세요. 스크린리더가 읽는 문장이 아래에 찍힙니다. 표는 `table: true` 로 보이게 했습니다.

```js
const chart = createChart('#chart', {
  type: 'bar',
  title: '분기별 매출',
  unit: '원',
  table: true,
  data: { labels: ['1분기', '2분기', '3분기', '4분기'], series: [{ name: '올해', data: [182000000, 214000000, 198000000, 251000000] }, { name: '작년', data: [160000000, 171000000, 190000000, 205000000] }] },
});
const live = chart.root.querySelector('[aria-live]');
new MutationObserver(() => live.textContent && log(live.textContent)).observe(live, { childList: true, characterData: true, subtree: true });
```

툴팁 내용은 `aria-live` 영역으로도 읽어 줍니다. 범례 항목은 `aria-pressed` 가 있는 버튼이고, ⋯ 메뉴는 화살표 키와 Esc로 움직입니다.

## 표와 움직임

- 모든 값이 든 `<table>` 이 화면에 보이지 않게 늘 들어 있습니다. `table: true` 면 보이게 놓습니다.
- 운영체제의 "동작 줄이기"(`prefers-reduced-motion`)가 켜져 있으면 처음 그릴 때의 애니메이션을 하지 않습니다. `animation: false` 로 직접 끌 수도 있습니다.
- 고대비 모드(`forced-colors`)에서는 선을 시스템 글자색으로 그립니다.
- 색만으로 구분하지 않도록, 점선 시리즈(`dashed`)와 점 모양(`pointShape`)을 함께 쓰세요.