사용자가 글의 내용을 쉽게 이해 할 수 있는 시각적 자료를 제공하는 배려심이 있으면 좋겠습니다.
기술설명
이 기술의 목적은 읽기에 대한 장애를 가진 사용자를 위해 글 내용을 이해하는 데 도움이 되는 시각적 자료를 제공하자는 것입니다. 삽화는 텍스트에 추가로 제공되어야 합니다.
단어와 문장을 이해하는데 어려움을 가진 사용자가 복잡한 내용의 글을 읽고 이해한다는 것이 쉽지 않은 일입니다.
차트, 다이어그램, 애니메이션, 사진 등 시각적 자료를 이용하면 이해하는데 큰 도움이 될 것입니다.
예를 들어,
차트와 그래프가 있으면 복잡한 데이터를 이해하는데 도움이 됩니다.
다이어그램, 흐름도, 비디오, 애니메이션은 어떤 처리과정을 이해하는데 도움이 됩니다.
개념도와 조직도는 생각들이 어떻게 연관되어 있는지를 이해하는데 도움이 됩니다.
사진, 그림, 비디오는 자연현상, 역사적 사건, 사물을 이해하는데 도움이 됩니다.
예시
[예시1] 회사의 연례 보고서
연례 보고서는 작년에 회사 실적에 대한 영향을 준 요인들에 대한 보고서입니다.
보고서에는 영향을 준 요인들이 어떻게 상호작용 했는지를 나타낸 차트와 그래프도 있습니다.
각 차트와 그래프는 대체 텍스트가 있으며, 각각의 캡션에 숫자가 표시되어 있습니다.
표시한 숫자를 이용하여 내용에서 해당 차트와 그래프를 참조 할 수 있습니다.
[예시2] 기술 문서의 스크린 샷
제품에 대한 온라인 설명서가 있습니다. 단계별로 지침이 구성되어 있습니다.
각 단계에서 해당 화면을 보여주는 스크린 샷을 제공하고 있습니다.
*스크린 샷: 전자기기 화면에 보이는 그대로 찍은 출력 사진
[예시3] 복잡한 자연 현상의 그림
웹 사이트에서 2004년 쓰나미에 대해 논합니다. 이 사이트는 쓰나미가 인도양 주변의 여러 지역에 어떤 영향을 미쳤는지를 설명하고 있습니다. 각 지역의 피해 입은 사진이 포함되어 있습니다.
각 사진들은 대체 텍스트를 제공하고 있습니다.
이 사이트는 쓰나미가 발생하는 동안 수중에서 무슨 일이 일어났는지도 설명하고 있습니다.
설명에는 쓰나미가 발생하여 바다 위로 퍼지는 과정을 보여주는 애니메이션이 함께 제공되고 있습니다.
애니메이션 또한 대체 텍스트가 제공되고 있습니다.
자료
Tufte, Edward. Envisioning information. Cheshire, Conn.: Graphics Press. 1990.
Tufte, Edward. The visual display of quantitative information. Cheshire, Conn.: Graphics Press. 1983.
Tufte, Edward. Visual explanations: images and quantities, evidence and narrative. Cheshire, Conn.: 1997.
점검절차
1. 콘텐츠에 생각이나 상황, 과정을 설명 하는 텍스트가 있는지 확인합니다.
2. 콘텐츠 자체나 콘텐츠 내에 링크를 통해 시각적 자료가 제공되는지 확인합니다.
3. 시각적 그림이 해당 내용의 개념이나 과정을 잘 보여주는지 확인합니다.
나의 정리
웹 사이트에 복잡하고 이해하기 힘든 글이나 데이터, 표 같은 것 들을 접하는 경우가 있습니다.
이럴 때는 그 내용들을 쉽게 이해할 수 있는 그래프, 도식, 삽화 등의 시각적 자료를 제공해 주어 사용자가 쉽게 이해 할 수있습니다.
글을 읽고 이해는 데 어려움을 가진 사용자를 위해서라도 이런 배려가 있으면 큰 도움이 될 것입니다.
예를 들어 봅시다.
자동차 생산 공장이 있습니다. 지난 3년간 매달 얼마나 생산했는지를 표로 제공하고 있습니다.
이 표만 봐서는 무엇을 말하려는 것인지 이해할 수 없습니다.
그래서 표에 있는 데이터를 이용하여 막대그래프를 만들어 이미지로 제공합니다.
막대그래프를 통해 매달 자동차 생산량이 떨어지고 있는지 상승하고 있는지를 알 수 있습니다.
인터넷 뱅킹 앱으로 이체하기 위해 인터넷 설명서를 다운 받았습니다.
설명서에 "첫 번째 단계: 이체할 통장을 선택해주세요."라고 설명되어 있습니다.
그리고 설명 밑에 해당 앱의 스크린샷 이미지가 제공되어 있으며, 선택해야 하는 부분에 빨간색 원으로 표시되어 있습니다. 이를 통해 앱에서 무엇을 눌러야 하는지를 더 쉽게 이해 할 수 있게 되었습니다.
6.25전쟁 이후 대한민국의 경제상황을 설명하는 내용의 글입니다.
내용 중간에 그 당시 사람들의 생활 모습이 담겨 있는 사진을 삽입하여 당시 상황을 더 잘 이해 할 수 있게 되었습니다.
인터넷 쇼핑몰에서 제품을 구매 하고 배송상태를 확인하였습니다. [지점 배송 중]이라는 설명 다음에 배송 과정을 나타낸 이미지가 제공되고 있습니다. 이미지의 '지점 배송'부분이 부곽 되어 있습니다.
배송과정을 나타낸 이미지를 통해 제품이 어디 까지 왔을지 더 쉽게 파악할 수 있습니다.
*글을 더 쉽게 이해하는데 도움을 주는 시작적 자료들은 <img>, <video>등의 '비텍스트 콘텐츠'이므로 꼭 대체 텍스트를 제공해 주어야 합니다.
사용자가 글의 내용을 쉽게 이해 할 수 있는 시각적 자료를 제공하는 배려심이 있으면 좋겠습니다.
G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G103.html
G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes | Techniques for WCAG 2
The objective of this technique is to provide visual illustrations that help users with reading disabilities understand difficult text that describes concepts or processes. The illustrations are provided in addition to the text. Users with disabilities tha
www.w3.org
