- 홈
- 차트
공통 접근성 포인트
CDN: Chart.js 4 · 헬퍼: js/chart-a11y.js · 색상: 색각 이상 고려 팔레트
* 대체 콘텐츠(표)를 제공합니다. canvas는 이미지가 아니라도 비텍스트 콘텐츠로 취급합니다.
* canvas / 포커스 영역에 aria-label로 차트 목적과 「상세는 표 참조」를 안내합니다.
* 키보드 사용자를 위해 차트 영역 tabindex="0" + 화살표 키 탐색 + role="status" aria-live="polite" 상태 문구.
* 정보는 색만으로 전달하지 않습니다. 범례·데이터 라벨·표를 함께 둡니다.
* prefers-reduced-motion이면 Chart 애니메이션을 끕니다.
* role="application"은 키보드 탐색이 필요할 때만 사용합니다. (스크린리더 기본 탐색이 제한될 수 있음)
1. 세로 막대 (bar)
카테고리별 수치 비교. 급식 리포의 알레르기·설문 막대 차트와 같은 유형.
월별 민원 접수 건수
포커스 후 ← → 키로 막대를 이동합니다.
위 그래프와 동일한 데이터를 표로 제공합니다.
| 월 | 건수 |
|---|
* Y축은 0부터 시작합니다. (beginAtZero: true)
* 막대 색과 범례 텍스트를 함께 제공합니다.
2. 가로 막대 (bar · indexAxis: y)
긴 라벨·순위 비교에 적합. 급식 리포 식품 통계 가로 막대와 같은 유형.
부서별 처리 완료율
포커스 후 ↑ ↓ 키로 항목을 이동합니다.
위 그래프와 동일한 데이터를 표로 제공합니다.
| 부서 | 완료율(%) |
|---|
* 항목이 많으면 차트 높이를 늘리거나 표만 제공하는 편이 읽기 쉽습니다.
3. 선 (line)
시계열·추세. 급식 리포 성장곡선·가격 추이·일별 영양소 비율과 같은 유형.
주간 방문자 수 추이
PC: 파란색 실선 · 모바일: 주황색 점선 — 색과 선 스타일을 함께 구분합니다.
위 그래프와 동일한 데이터를 표로 제공합니다.
| 요일 | PC | 모바일 |
|---|
* 다중 시리즈는 색 + 선 스타일(실선/점선)로 구분합니다.
* 키보드 탐색 시 같은 X축의 시리즈 값을 한 문구에 모아 읽습니다.
4. 원형 (pie)
구성비. 급식 리포 설문 응답 분포와 같은 유형. 조각이 많으면 막대·표가 더 읽기 쉽습니다.
문의 유형 비율
건수와 비율을 함께 제공합니다. (색만으로 구분하지 않음)
| 유형 | 건수 | 비율(%) |
|---|
* 툴팁·표에 건수 + 비율을 모두 넣습니다.
* 조각 5개 이하를 권장합니다. 그 이상은 막대 차트가 유리합니다.
5. 도넛 (doughnut)
구성비 + 중앙 요약. 급식 리포 식재료 비중·역할 비율과 같은 유형.
채널별 유입 비중
전체 유입 1,240건
중앙 요약 수치는 시각 장식이므로, 동일 정보를 표와 문구로도 제공합니다.
| 채널 | 건수 | 비중(%) |
|---|
* 중앙 텍스트는 canvas 플러그인만으로 두지 말고, HTML 문구로도 중복 제공합니다.
6. 레이더 (radar)
다축 균형 비교. 급식 리포 영양균형 레이더와 같은 유형. 스크린리더는 표를 우선 이용하도록 안내합니다.
서비스 만족도 균형
레이더는 형태 파악용입니다. 정확한 값은 표를 사용하세요.
| 항목 | 점수 |
|---|
* 축 눈금은 0~100 등 고정 스케일을 권장합니다.
* 면 채우기만으로 비교하지 말고 표·수치를 병행합니다.
종류별 선택 가이드
| 종류 | 적합한 데이터 | 접근성 주의 |
|---|---|---|
| 세로/가로 막대 | 카테고리 비교, 순위 | 0 기준선, 대체 표, 키보드 순회 |
| 선 | 시계열, 추세, 다중 지표 | 색+선스타일, X축 단위로 값 묶음 낭독 |
| 원형/도넛 | 소수 구성비(≤5) | 건수+%, 중앙값은 HTML로도 제공 |
| 레이더 | 다축 균형(참고용) | 표가 본정보, 차트는 보조 시각화 |
| 버블(참고) | 위치+크기(성장곡선 등) | 크기만으로 의미 전달 금지, 표·텍스트 병행 |
* 급식 리포의 성장곡선 버블은 「선 + 단일 포인트」 패턴입니다. 필요 시 선 차트에 포인트 데이터셋을 추가하고 표에 좌표를 명시하세요.
기본 마크업 골격
<div class="chart-block">
<h3 id="chart-title">차트 제목</h3>
<div id="chart-info" class="chart-keyboard-info"
role="status" aria-live="polite" aria-atomic="true"></div>
<div class="chart-canvas-wrap" tabindex="0" role="application"
aria-labelledby="chart-title"
aria-label="… 차트. 키보드 탐색 가능. 상세는 표 참조.">
<canvas id="my-chart"
aria-label="… 차트. 상세 정보는 아래 표를 참조하세요"></canvas>
</div>
<div class="chart-table-wrap" role="region" aria-label="… 표">
<table>
<caption>…</caption>
<thead>…</thead>
<tbody>…</tbody>
</table>
</div>
</div>