[javascript] Highcharts에서 차트 데이터 접근성 개선하기

27 Nov 2023

javascript

Highcharts는 많은 개발자들에게 인기 있는 자바스크립트 기반 차트 라이브러리입니다. 그러나 그래프를 스크린리더기와 같은 보조 기술을 통해서 접근하려고 할 때, 일부 사용자들은 데이터를 이해하기 어려울 수도 있습니다.

이 문제를 해결하기 위해 Highcharts는 데이터 접근성을 개선하기 위한 몇 가지 기능을 제공합니다.

제목 설정하기

차트에 대한 설명을 제공하기 위해 제목을 설정할 수 있습니다. 이는 주요 내용에 대한 명확한 설명을 사용자에게 제공해주기 때문에 접근성을 증가시킬 수 있습니다.

Highcharts.chart('container', {
    ...
    title: {
        text: '월별 판매량'
    },
    ...
});

축 라벨 설정하기

X축과 Y축에 대한 라벨을 설정하여 데이터의 의미를 명확하게 전달할 수 있습니다. 이는 시각적으로 표현된 차트에서 데이터를 이해하기 어려운 사용자들에게 중요한 정보를 제공해줄 수 있습니다.

Highcharts.chart('container', {
    ...
    xAxis: {
        title: {
            text: '월'
        }
    },
    yAxis: {
        title: {
            text: '판매량'
        }
    },
    ...
});

데이터 라벨 설정하기

각각의 데이터 포인트에 대한 라벨을 설정하여 실제 값에 대한 정보를 사용자에게 제공할 수 있습니다.

Highcharts.chart('container', {
    ...
    series: [{
        data: [
            { y: 100, name: '1월' },
            { y: 200, name: '2월' },
            { y: 300, name: '3월' },
        ],
        dataLabels: {
            enabled: true,
            format: '{point.name}: {point.y}'
        }
    }],
    ...
});

스크린리더용 설명 추가하기

추가로, 각각의 데이터 포인트에 대한 스크린리더용 설명을 제공할 수도 있습니다. 이는 시각으로 차트를 표현할 수 없는 사용자들에게 제공하는 콘텐츠로서 의미있는 정보를 전달할 수 있습니다.

Highcharts.chart('container', {
    ...
    series: [{
        data: [
            { y: 100, name: '1월', accessibility: { description: '1월 판매량은 100개 입니다.' } },
            { y: 200, name: '2월', accessibility: { description: '2월 판매량은 200개 입니다.' } },
            { y: 300, name: '3월', accessibility: { description: '3월 판매량은 300개 입니다.' } },
        ],
        ...
    }],
    ...
});

위의 예시들은 Highcharts에서 차트 데이터 접근성을 개선하기 위한 몇 가지 방법을 보여줍니다. 이러한 기능들을 사용하여 사용자들이 보다 쉽게 차트 데이터를 이해할 수 있도록 도움을 줄 수 있습니다.

더 자세한 내용은 Highcharts 공식 문서를 참조하세요.