Chart accessibility.
색과 포인터만으로 의미를 전달하지 않는 차트를 만드세요.
차트의 의미와 대체 데이터
#차트의 제목에 측정 대상과 단위를 쓰고, 주요 결론을 본문으로 설명하세요. 숫자는 차트 바깥의 HTML 표나 공통 파사드의 데이터 표로도 제공할 수 있습니다.
<figure aria-labelledby="trend-title" aria-describedby="trend-description">
<figcaption id="trend-title">월별 방문자 · 천 명</figcaption>
<p id="trend-description">1월 24에서 3월 35로 증가했습니다.</p>
<sy-chart id="trend" type="line" aria-label="월별 방문자 추이"></sy-chart>
<button id="show-data" type="button">데이터 표 열기</button>
</figure>
<script type="module">
await customElements.whenDefined('sy-chart');
const chart = document.querySelector('#trend');
chart.series = [{ name: '방문자', values: [24, 29, 35] }];
chart.xAxis = { kind: 'category', categories: ['1월', '2월', '3월'] };
document.querySelector('#show-data').addEventListener('click', () => chart.showDataTable());
</script>포커스와 조작
#- 대체 입력 점 클릭에 중요한 앱 동작을 연결했다면 버튼이나 표에서도 같은 동작을 제공하세요.
- 범위 선택 Data Zoom·Navigator 같은 컨트롤은 키보드로도 조작해 보고 현재 범위를 텍스트로 전달하세요.
- 문서 탐색 예제 선택과 옵션은 네이티브 select·input입니다. 코드 탭은 방향키와 Home·End로 이동할 수 있습니다. API 이름에서 Tab을 누르면 툴팁의 복사 버튼으로 이동합니다.
- 로고 브랜드 마크는 장식 요소입니다. 읽기 순서나 탭 순서에 포함되지 않고 차트의 포인터 입력을 막지 않습니다.
색상·대비·움직임
#- 색 이외의 구분 시리즈 이름·범례·마커 모양·직접 레이블을 함께 사용하세요. 색상만으로 성공과 실패를 전달하지 마세요.
- 대비 밝은 화면과 어두운 화면에서 글자·축·선·포커스 링을 직접 확인하세요. 커스텀 로고도 두 배경에서 읽히는 자산을 사용하세요.
- 줄어든 움직임 운영체제의 prefers-reduced-motion 설정을 반영해 animated를 제어할 수 있습니다.
const media = matchMedia('(prefers-reduced-motion: reduce)');
const chart = document.querySelector('#trend');
const syncMotion = () => { chart.animated = !media.matches; };
media.addEventListener('change', syncMotion);
syncMotion();
// 화면 해제 시 media.removeEventListener('change', syncMotion);