접근가능한 차트

Chart.js 차트는 사용자가 제공하는 canvas 요소에 렌더링됩니다. 그러므로, 접근 가능한 방식으로 canvas 요소를 작성하는 것은 유저의 몫입니다. canvas 요소는 모든 브라우저에서 지원되고 화면에 렌더링 되지만 화면 리더기는 canvas 콘텐트에 접근할 수 없습니다.

canvas에서, canvas 요소에 아리아(ARIA) 속성을 사용하여 접근성을 추가하거나 내부 대체 콘텐트를 열고 닫는 캔버스 태그 안에 추가해야 합니다.

이 웹사이트는 더 많은 canvas 접근성의 자세한 설명뿐만 아니라 깊이 있는 예제도 있습니다.

예제

접근가능한 canvas 요소에 대한 몇가지 예제입니다..

role과 아리아 라벨(aria-label)을 설정하여, 이 canvas는 이제 접근가능한 이름을 가집니다.

<canvas id="goodCanvas1" width="400" height="100" aria-label="Hello ARIA World" role="img"></canvas>

이 canvas 요소는 대체 콘텐트를 통한 대체 텍스트를 가집니다.

<canvas id="okCanvas2" width="400" height="100">
    <p>Hello Fallback World</p>
</canvas>

접근할 수 없는 canvas 요소에 대한 몇 개의 나쁜 예제가 있습니다.

이 canvas 요소는 접근 가능한 이름 또는 역할을 가지지 않습니다.

<canvas id="badCanvas1" width="400" height="100"></canvas>

이 canvas 요소는 접근할 수 없는 대체 콘텐트를 가집니다.

<canvas id="badCanvas2" width="400" height="100">Your browser does not support the canvas element.</canvas>