차트와 접근성

원문: Charts & Accessibility

차트, 그래프, 그리고 지도는 사용자들에게 복잡한 이미지를 전달하기 위해 시각적인 요소를 사용합니다. 하지만 이미지를 이용하기 때문에 이들은 색각이상이 있는 사용자들이나 화면 낭독 프로그램 사용자들의 접근성을 크게 떨어트립니다. 이 글을 통해 차트를 보다 접근성이 있도록 만드는 방법에 대해서 알아보도록 합시다.

시작에 앞서

1. 만일 차트, 그래프 또는 지도의 데이터가 웹 페이지에서 아주 중요한 컨텐츠라면, 해당 이미지에 대한 설명글을 제공해야만 합니다. 어떤 경우에는 차트의 데이터를 그대로 보여주는 표가 추가적인 접근성을 제공해줄 수도 있을 것입니다.

   WCAG 2.0 Guideline 1.1.1 - “사용자에게 제공되는 모든 글자가 아닌 형태의 컨텐츠는 동일한 목적의 글자로 된 대안이 있습니다”

2. 색각이상이 있는 사용자들의 접근성을 향상시키기 위해서 질감, 다른 선 스타일, 그래프에 글자 삽입, 또는 다른 색조를 가진 보완된 컬러코드를 이용해서 차트를 만들 수 있습니다. 차트는 흑백으로도 볼 수 있어야합니다.

   WCAG 2.0 Guideline 1.4.1 - “색상을 정보를 전달하거나, 행위를 의미하거나, 반응을 일으키거나, 시각적인 요소를 구분하는 유일한 시각 장치로 사용하지 않습니다”

3. 표를 이미지로 변환하지 않습니다.

차트를 위한 설명글

전략

일반적으로 말해서 ALT 태그는 복잡한 차트에는 적절하지 못합니다. 차트를 묘사하는 다른 방법은 차트 근처에 요약글과 적절하게 변형된 데이터 테이블을 같이 제공하는 것입니다.

차트는 추세를 보여주고, 테이블은 보다 흥미를 가지는 사람들에게 정확한 데이터를 제공해주기 때문에 이런 방법을 사용하면 더 많은 청중들을 만족시킬 수 있습니다.

예시: 디트로이트의 아프리카계 미국인들의 마지막 /r/ 발음 생략

Trudgill(1995)은 디트로이트에 사는 아프리카계 미국인들을 사회적 지위와 성별로 나눠서 단어의 마지막에 오는 /r/ 발음의 생략에 대한 데이터를 보여줬습니다. 숫자는 백분율로 되어 있으며, 숫자가 높을수록 일반적인 형태의 발음을 의미합니다.

ALT=사회적 지위와 성별에 따라 데이터를 비교하는 막대 차트. 데이터는 아래의 표를 확인

데이터 출처: Trudgill, P.(1995) Sociolinguistics: An Introduction to Language and Society, 3rd Edition. Harmondsworth, U.K.: Penguin Books.

디트로이트 차트의 예시 설명글

아래는 경향에 대한 설명입니다.

/r/ 발음을 생략하는 것은 사회적 지위가 낮아질수록 표준으로(마지막 /r/을 발음하는 비율이 낮아) 보이지만, 모든 사회적 지위에서 여성은 남성보다 /r/ 발음을 유지하는 것으로 보인다.

즉, 모든 사회적 지위에서 여성은 남성보다 표준 영어에 가까운 발음을 한다

차트에 있는 데이터를 표에서도 반복하기

위의 차트는 특정 값들을 보여줍니다. 데이터 테이블에는 표제와 제목줄 기능이 있다는 것을 기억합시다.

• 블로그 글을 마크다운으로 작성하는데, 마크다운에서 표에 음영을 넣는 기능을 찾지 못했습니다. 원문에서 보다 나은 형태의 표를 확인하실 수 있습니다.

성별과 사회적 지위에 따른 디트로이트에 사는 아프리카계 미국인들의 마지막 /r/ 발음 비율

차트와 색상

예시 데이터

운영 체제에 따른 컴퓨터의 수 데이터로 여러 차트를 작성하려고 합니다.

언어학 세미나에서 선호하는 컴퓨터 운영 체제

막대 차트

접근성이 떨어지는 막대 차트

아래의 차트들은 운영 체제별 학생 수를 접근성이 떨어지는 형태로 나타낸 그림입니다. 비슷한 밝기의 빨간색과 초록색이 사용되었는데, 이는 색각 이상이 있는 사용자들은 구분하기 어려울 수 있습니다.

또한 차트의 범례는 색상을 보여주고 있으며, 그렇기 때문에 색상을 구분할 수 없다면 제대로된 정보를 얻을 수 없습니다.

접근성이 높은 막대 차트

위의 표에서 본 데이터를 이용해서 다시 만든 막대 차트입니다. 이번에는 다양한 색조의 파란색을 이용했습니다. 색각 이상이 있는 사용자들도 명암의 수준만으로도 운영 체제를 구분할 수 있습니다. 뿐만 아니라, 운영 체제 라벨을 하단에 추가하여 보는 사람들이 범례를 볼 필요가 없도록 만들었습니다.

선 차트

선 차트에서는 선의 스타일을 바꾸고 라벨을 추가하여 사용성을 높일 수 있습니다.

• 원문에서는 막대 차트의 그림들과 다르게 아래 선 차트의 그림들은 배경이 흰색이 아니라 투명인 것 같습니다. 원문의 이미지를 그대로 가져왔기 때문에 차트가 제대로 보이지 않을 수도 있습니다.

접근성이 떨어지는 선 차트

• 1990년과 2003년의 운영 체제의 점유율을 비교하는 표에서 발췌한 데이터로 만든 차트입니다. 이전에 살펴본 접근성이 떨어지는 차트와 마찬가지로 이 차트는 비슷한 명도의 3가지 색상을 사용하고 있으며, 범례는 색상만을 나타내고 있습니다. 회색조로 바꾸면 세 색상은 거의 동일합니다.

접근성이 높은 선 차트

이 차트에서는 세 실선을 하나의 실선과 두 가지 점선으로 나타냈고, 각각에 라벨을 추가하였습니다.

맺음말

이전에 회사에서 대시보드 및 시각화 스터디를 진행하면서 색각 이상이 있는 사용자들에 대해서도 고려를 해야 한다는 내용을 보고 크게 놀란적이 있었다. 데이터 분석을 하면서 엑셀, 태블로, 데이터 스튜디오, ggplot 등 수많은 툴을 사용하면서 한 번도 이에 대한 고려를 해본 적이 없었기 때문이었다. 나 스스로가 색각 이상이 없었기 때문에 큰 고민 없이 업무를 진행했던 것이라고 생각한다. 아쉽게도 이에 대해서 깨달은 지금도 철저하게 고민을 하고 생각해서 색상을 고르고 있지는 않지만 이제 조금은 더 고민을 해봐야겠다고 생각한다.

• 2023 5
• 2022 1
• 2020 7
• 2019 24