# 접근성

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

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`), 무늬(`patterns`)를 함께 쓰세요.

## 무늬 (patterns)

`patterns: true` 는 막대·영역·파이·도넛 조각·트리맵 칸에 색과 함께 무늬를 입힙니다. 순서는 팔레트처럼 고정입니다: 1번 시리즈 45° 빗금, 2번 135° 빗금, 3번 점, 4번 십자, 5번 세로줄, 6번 격자, 7번 고리, 8번 가로줄. 폭포 차트는 증가·감소가 반대 방향 빗금, 등락률 트리맵은 상승·하락이 반대 방향 빗금입니다. 범례 키에도 같은 무늬가 들어가고 PNG·SVG 내보내기와 `renderToSVG` 에도 그대로 나옵니다. 흑백 인쇄, 색약 사용자, 공공 웹 접근성 심사(KWCAG 5.3.1 "색에 무관한 콘텐츠 인식")에 씁니다.

```js
createChart('#chart', {
  type: 'bar',
  title: '연령대별 이용률',
  unit: '%',
  patterns: true,
  data: {
    labels: ['20대', '30대', '40대', '50대', '60대'],
    series: [
      { name: '모바일', data: [92, 88, 81, 70, 52] },
      { name: 'PC', data: [41, 55, 62, 58, 44] },
      { name: '방문', data: [8, 12, 19, 31, 47] },
    ],
  },
});
```

기본값 `'auto'` 는 평소에는 무늬가 없고, 고대비 모드(`forced-colors: active`)와 인쇄할 때만 켭니다. `false` 면 언제나 끕니다. 히트맵·달력은 한 색의 밝기로 값을 나타내므로 무늬를 쓰지 않습니다(칸 안의 값, 툴팁, 표로 읽힙니다).

## 키보드 이동도 hover 이벤트

화살표·`Home`·`End` 로 옮기면 마우스를 올렸을 때와 같은 `hover` 이벤트(같은 `ChartPoint`)가 옵니다. 그래서 hover 로 옆 패널을 바꾸는 대시보드도 키보드로 똑같이 쓸 수 있고, `group` 으로 묶은 차트도 함께 따라옵니다. `Esc` 는 `null` 입니다. 코드로 부른 `showTooltip()` 은 이벤트를 내지 않습니다.

## 인쇄

인쇄할 때는 내려받기·⋯ 메뉴·확대 단추·툴팁을 숨기고, 어두운 테마여도 흰 종이에 맞게 밝은 테마로 다시 그리며, `patterns: 'auto'` 라면 무늬를 켭니다. 접혀 있던 범례 항목도 모두 나오고 차트 하나가 두 쪽으로 갈리지 않습니다(`break-inside: avoid`). 인쇄가 끝나면 원래대로 돌아옵니다. 따로 할 일은 없고, 82chart.css 를 넣으면 됩니다.