[javascript] Chart.js에서의 접근성 최적화 방법

27 Nov 2023

javascript

Chart.js는 데이터 시각화를 위한 인기있는 JavaScript 라이브러리입니다. 그러나 시각적인 요소로만 구성되어 있어 시각 장애인이나 저시력자와 같은 사용자들에게는 접근이 어려울 수 있습니다. 따라서 우리는 Chart.js를 사용하여 만든 차트를 접근성을 고려하여 최적화해야 합니다.

다음은 Chart.js에서의 접근성 최적화를 위한 몇 가지 방법입니다.

1. 적절한 색상 대비

시각 장애인이나 저시력자를 위해서는 차트의 요소들과 배경 사이의 색상 대비가 충분히 높아야 합니다. 색상 대비는 Web Content Accessibility Guidelines (WCAG)에서 권장하는 수준인 4.5:1을 충족해야 합니다. Chart.js에서는 각 요소의 색상 속성을 커스터마이징할 수 있으므로, 적절한 색상 대비를 확보할 수 있도록 주의해야 합니다.

const chart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      legend: {
        labels: {
          color: 'black' // 차트의 범례 텍스트 색상
        }
      }
    }
  }
});

2. 대체 텍스트 제공

시각 이상이 있는 사용자들을 위해 차트 이미지의 대체 텍스트를 제공해야 합니다. 대체 텍스트는 alt 속성으로 정의할 수 있으며, 해당 이미지가 나타내는 정보를 간결하게 설명해야 합니다. 이렇게 하면 스크린 리더 사용자들이 차트의 내용을 이해할 수 있게 됩니다.

const chart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      legend: {
        display: true,
        labels: {
          generateLabels: function(chart) {
            return chart.data.labels.map(function(label, i) {
              return {
                text: label,
                altText: '범례 항목 ' + (i+1) // 대체 텍스트
              };
            });
          }
        }
      }
    }
  }
});

3. 키보드 제어 지원

시력상태에 관계없이 모든 사용자들은 키보드를 통해 차트를 탐색할 수 있어야 합니다. Chart.js는 키보드 이벤트를 처리하는 기능을 제공하므로, 사용자들이 키보드를 통해 차트를 조작할 수 있도록 지원해야 합니다.

const chart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      interaction: {
        mode: 'index',
        intersect: false
      }
    }
  }
});

4. 명확한 그래프 구조

차트의 데이터 구조를 명확하게 제공함으로써, 시각 이상이 있는 사용자들이 차트 내용을 이해할 수 있도록 해야 합니다. 즉, 축의 레이블, 그래프의 제목 등을 명확하고 간결하게 제공해야 합니다.

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['1월', '2월', '3월', '4월'],
    datasets: [{
      label: '판매량',
      data: [50, 60, 70, 80]
    }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: '월별 판매량' // 그래프의 제목
      },
      scales: {
        y: {
          beginAtZero: true,
          title: {
            display: true,
            text: '수량' // y축의 레이블
          }
        }
      }
    }
  }
});

Chart.js를 접근성을 고려하여 최적화하는 방법을 살펴보았습니다. 이러한 최적화를 통해 모든 사용자들이 차트를 쉽게 이용할 수 있도록 할 수 있습니다.

참고: Chart.js 공식 문서