# 접근성

## Content

Wijmo 차트 컨트롤은 차트 이름, 키보드 포커스, 스크린 리더 의미 정보, 지원되는 차트 상호작용에 대한 접근성 기능을 제공합니다.

지원되는 기능은 차트 유형과 표시되는 콘텐츠, 컨트롤 설정에 따라 달라집니다. Wijmo는 컨트롤 수준에서 접근성 기능을 제공하지만, 애플리케이션에서도 접근성 레이블을 설정하고 중요한 시각 정보를 텍스트나 데이터로 제공해야 합니다. 주변 콘텐츠의 접근성 역시 별도로 고려해야 합니다.

## 접근 가능한 차트 이름 지정

차트의 목적이나 내용을 쉽게 파악할 수 있도록 이름을 지정해야 합니다. `ariaLabel` 속성을 사용하면 차트 이름을 설정할 수 있습니다.

```javascript
const chart = new wijmo.chart.FlexChart('#chart', {
    itemsSource: data,
    bindingX: 'date',
    series: [
        { name: 'Sales', binding: 'sales' }
    ],
    ariaLabel: 'Quarterly sales by region'
});
```

`ariaLabel`을 설정하지 않으면 Wijmo가 차트 제목, 차트 유형, 표시 중인 계열 등의 정보를 바탕으로 차트 이름을 자동으로 생성할 수 있습니다.
차트 이름은 차트 자체를 식별하기 위한 정보입니다. 따라서 차트에 표시된 상세 값이나 추세, 데이터 간 비교 내용을 이해하는 데 필요한 텍스트 또는 데이터 형태의 대체 정보까지 대신할 수는 없습니다.

## 키보드 차트 탐색 활성화

차트 데이터 영역은 기본적으로 키보드 포커스를 받을 수 없습니다. 사용자가 `Tab` 키로 차트에 진입하고 지원되는 차트 영역을 탐색해야 하는 경우 `focusMode`를 `true`로 설정합니다.

```javascript
chart.focusMode = true;
```

차트 유형과 콘텐츠에 따라 다음 영역을 지원할 수 있습니다.

* 차트 제목
* 계열 및 데이터 포인트
* 주석
* 범례 항목

`focusMode`가 활성화되어 있고 해당 영역이 존재할 때 다음 명령을 사용할 수 있습니다.

| 구분 | 키 | 동작 |
| --- | --- | --- |
| 차트 탐색 | `Tab` | 다음으로 지원되는 차트 영역으로 이동합니다. |
| 차트 탐색 | `Shift+Tab` | 이전으로 지원되는 차트 영역으로 이동합니다. |
| 계열 영역 | `Left` / `Right` | 데이터 포인트 사이를 이동합니다. |
| 계열 영역 | `Up` / `Down` | 계열 사이를 이동합니다. |
| 계열 또는 주석 영역 | `Home` / `End` | 첫 번째 또는 마지막 항목으로 이동합니다. |
| 범례 영역 | `Left` / `Right` | 범례 항목 사이를 이동합니다. |
| 범례 영역 | `Up` / `Down` | 계열 그룹 사이를 이동합니다. 범례에 그룹이 하나만 있으면 항목 사이를 이동합니다. |
| 범례 영역 | `Enter` / `Space` | 범례 토글 기능을 지원하는 경우 포커스된 범례 항목을 활성화합니다. |

개별 데이터 포인트와 범례 항목은 차트 영역 내부의 키보드 탐색으로 접근합니다. 해당 항목이 페이지의 일반적인 Tab 이동 순서에 개별적으로 추가되는 것은 아닙니다.

## 키보드 포커스 시 툴팁 표시

`focusMode`와 `showTooltipOnFocus`를 모두 활성화하면 키보드 포커스가 지원되는 계열의 데이터 포인트 또는 주석으로 이동할 때 설정된 툴팁이 표시됩니다.

```javascript
chart.focusMode = true;
chart.showTooltipOnFocus = true;
```

두 속성은 기본적으로 비활성화되어 있습니다. `showTooltipOnFocus`만 설정해도 차트 영역에서 키보드 포커스를 받을 수 있게 되는 것은 아닙니다.
툴팁 콘텐츠는 차트의 접근 가능한 이름이나 애플리케이션에 필요한 텍스트 또는 데이터 대체 표현을 대신하지 않고 보완해야 합니다.

## 차트 상호작용을 위한 키보드 대안

해당 기능이 활성화되어 있으면 다음과 같은 키보드 대안을 사용할 수 있습니다.

| 구분 | 키 | 동작 |
| --- | --- | --- |
| RangeSelector 핸들 | 화살표 키 | 활성 핸들을 작은 단계로 조정합니다. |
| RangeSelector 핸들 | `PageUp` / `PageDown` | 활성 핸들을 큰 단계로 조정합니다. |
| RangeSelector 핸들 | `Home` / `End` | 활성 핸들을 최솟값 또는 최댓값으로 이동합니다. |
| ChartGestures | 화살표 키 | 표시되는 차트 범위를 이동합니다. |
| ChartGestures | `+`, `=`, `PageUp` | 확대합니다. |
| ChartGestures | `-`, `_`, `PageDown` | 축소합니다. |
| ChartGestures | `Home` / `Escape` | 확대 및 이동 상태를 초기화합니다. |

이 명령은 해당 기능이 활성화되어 있고 적절한 차트 영역에 포커스가 있을 때만 적용됩니다.

## 렌더링 엔진 및 차트 유형별 접근성 지원

SVG, Canvas, WebGL 렌더링 엔진에서는 기본 접근성 정보를 제공합니다. 사용자 지정 렌더링 엔진을 사용하는 경우, 애플리케이션에서 필요한 접근성 정보와 키보드 동작을 직접 구현해야 합니다.
접근성 지원 범위는 차트 유형에 따라 달라질 수 있습니다.

* FlexMap은 헤더가 설정된 경우 제목 영역을 제공하고, 상태 안내를 포함한 접근 가능한 확대·축소 컨트롤을 지원합니다. 다만, 계열이나 데이터 포인트를 위한 접근성 영역을 통해 지도 데이터를 제공하지는 않습니다.
* 금융 차트는 렌더링된 차트 유형에 적합한 값을 노출할 수 있습니다. 예를 들어 OHLC 차트는 시가, 고가, 저가 및 종가를 노출할 수 있습니다.
* 폭포형 차트(Waterfall)는 시작값, 합계, 중간값, 상승·하락 값, 변화량 및 누적값 등의 정보를 노출할 수 있습니다.
* 기본 제공 분석 및 금융 계열은 해당하는 경우 각 유형에 특화된 접근성 정보를 제공합니다. 여기에는 추세선(TrendLine), 이동평균(MovingAverage), 함수 계열(FunctionSeries), 오차 막대(ErrorBar), 폭포형 차트(Waterfall), 상자 수염 차트(BoxWhisker), 손익분기점(BreakEven), 평균 실제 범위(ATR), 상품 채널 지수(CCI), 상대강도지수(RSI), 윌리엄스 %R(Williams %R), 볼린저 밴드(Bollinger Bands), 엔벨로프(Envelopes), 이동평균 수렴·확산(MACD), 스토캐스틱(Stochastic) 및 피보나치(Fibonacci) 도구가 포함됩니다.
* 헤이킨 아시(HeikinAshi), 라인 브레이크(LineBreak), 렌코(Renko), 카기(Kagi) 및 포인트 앤 피겨(PointAndFigure) 차트는 원본 데이터 행만을 기준으로 하지 않고, 렌더링된 시각적 포인트를 기준으로 접근성 정보를 노출합니다.

자동 생성되는 차트 수준 요약에는 축 요약이 포함되지 않습니다. 차트를 이해하는 데 축 제목, 척도, 범위 또는 단위가 필요한 경우 애플리케이션에서 추가 정보를 제공해야 합니다.
사용자 지정 계열이나 데이터 변환이 많이 적용된 계열은 기본 제공 Wijmo 계열과 동일한 수준의 접근성 의미 정보가 제공된다고 보장할 수 없습니다. 여기에는 렌더링된 데이터의 의미를 변경하는 애플리케이션 정의 데이터 변환, 조건부 서식 및 정렬 로직이 포함됩니다.

## 애플리케이션의 책임

차트 콘텐츠나 스타일을 사용자 지정하는 애플리케이션은 다음 항목을 확인해야 합니다.

* 차트 이름 및 이에 상응하는 텍스트 또는 데이터 대체 표현
* 키보드 포커스의 가시성
* 텍스트와 그래픽 객체의 대비
* 사용자 지정 주석, 템플릿 및 오버레이의 포커스 동작
* RangeSelector 핸들 및 지도 컨트롤과 같은 차트 컨트롤의 대상 크기
* 애플리케이션에서 요구하는 확대 수준에서의 동작
* 애플리케이션이 지원하는 브라우저 및 보조 기술에서의 스크린 리더 출력

Wijmo Chart 컨트롤은 WCAG 2.0, 2.1 및 2.2 Level AA의 해당 요구사항을 지원합니다. 하지만 이 지원만으로 모든 차트 또는 전체 애플리케이션이 모든 WCAG 성공 기준을 충족한다고 보장할 수는 없습니다.

요구사항은 [웹 콘텐츠 접근성 지침(WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)을 참조하세요. 스크린 리더 테스트는 [NVDA](https://www.nvaccess.org/download/)를 참조하세요.