SYIDAX CHARTS

접근성

차트의 의미를 색, 움직임과 포인터 이외의 방법으로도 전달하세요.

제목과 대체 데이터

차트 옆에 지표의 이름, 단위, 기간과 데이터 출처를 텍스트로 설명하세요. 숫자의 정확한 비교가 필요하면 표나 다운로드도 제공하세요. 페이지의 aria-label과 설명이 실제 데이터의 의미를 담도록 작성합니다.

키보드와 상호작용

지원하는 확대·선택·범례 동작을 키보드로 확인하세요. 포인터 툴팁에만 중요한 내용을 넣지 말고 문장이나 표에서도 읽을 수 있게 하세요. 차트별로 지원하는 이벤트와 메서드는 개별 API 문서를 확인합니다.

색과 움직임

시리즈 이름과 마커 형태를 함께 사용해 색만으로 집단을 구분하지 않도록 합니다. 배경과 레이블 대비를 확인하고, 사용자가 움직임 감소를 선호하면 animated를 꺼서 대응하세요.

javascript
chart.animated = !matchMedia('(prefers-reduced-motion: reduce)').matches;