대체 텍스트 올바르게 제공하기-
1편
오류 유형으로 살펴보는 웹 접근성 지침
오류유형1. 이미지 요소의 alt 속성 제공
웹사이트에 이미지를 표현하고 싶을 때 여러 가지 방법을 이용할 수 있습니다. 그 중 가장 기본적이며, 흔하게 사용되는 방법이 <img>, <input type=”image”>와 같은 HTML 이미지 요소(element)의 사용일 것입니다.
alt 속성(attribute)은 이러한 이미지 요소를 대체할 수 있는 텍스트(alternative text), 즉, 설명을 제공하는 역할을 합니다. 스크린 리더는 alt 속성값으로 제공된 텍스트를 해석해서 음성으로 출력해 줍니다. 이번 편에서는 이미지 콘텐츠의 대체 텍스트를 제공하는 방법 중 하나인 alt 속성과 관련된 웹 접근성 오류에 대해 알아보겠습니다.
alt 속성을 선언하지 않은 경우
만약 alt 속성 자체를 생략해 버린다면, 어떻게 될까요? alt 속성을 생략하는 것은 이미지가 중요한 콘텐츠이지만 이를 설명하는 텍스트를 사용할 수 없는 상태를 의미합니다. 어찌 되었든 의미가 있는 콘텐츠이기 때문에 대부분의 스크린 리더는 이미지 요소에 대한 해석을 건너 뛰지 않습니다. 하지만 이미지 요소에서 사용할 수 있는 텍스트 설명이 없으므로, 대신 경로 정보(src)를 음성으로 출력하게 됩니다.
Do Not
<img src="/img/logo_color_272x92dp.png">
스크린 리더 음성
"로고 컬러 이백칠십이엑스구십이디피 피앤지 이미지"
Do
<img src="/img/logo_color_272x92dp.png" alt="에스앤씨랩">
스크린리더 음성
"에스앤씨랩 이미지"
일반적으로 우리가 웹사이트가 제공하는 정보를 이해하기 위해 콘텐츠를 볼 때, 이미지 요소의 경로 정보를 필요로 하지는 않습니다. 오히려 경로 텍스트가 화면에 그대로 노출되어 있다면 알고 싶은 중요한 콘텐츠에 집중하기 어렵겠죠. 이는 스크린 리더 사용자에게도 마찬가지 입니다. 중간 중간에 의미 없는 긴 알파벳을 반복적으로 듣게 된다면 이미지 콘텐츠의 의미를 이해할 수 없을 뿐더러 콘텐츠 탐색에 방해를 받게 됩니다. 그러므로 웹 페이지에 이미지 요소를 제공할 때, alt 속성을 선언하는 것을 잊지 말아야 합니다.
alt 속성을 선언하였으나, 대체 텍스트를 입력하지 않은 경우
alt 속성을 선언하였더라도 텍스트 설명이 없다면 사용자들은 결국 이미지의 의미를 이해할 수 없습니다. 텍스트 설명을 생략하는 것은 이미지라는 콘텐츠가 가지고 있는 정보를 알 수 없는 것과는 다른 문제를 만들어 냅니다.
위의 예시에서 alt 속성과 값 모두를 생략한 경우에도 스크린 리더 사용자들은 ‘이미지 콘텐츠’가 있다는 것은 알 수 있었습니다. 하지만 alt 속성을 선언하고 빈값(“”)을 제공하는 것은 이미지가 핵심적인 요소가 아님을 의미하기 때문에 스크린 리더는 이미지 요소를 해석하지 않습니다. 결국 스크린 리더 사용자들은 내용 중에 이미지 콘텐츠가 있다는 것조차 알 수 없게 됩니다.
Example
사용자들에게 정보를 전달할 목적으로 제공되는 이미지
Do Not
<img src="/img/bg_reseach_bench.png" alt="">
Do
<img src="/img/bg_reseach_bench.png" alt="받침대 역할을 하는 ㅈ모양의 부품 두 개 사이에 사람의 움직임을 파악하는 센서를 장착한 후, 상판과 기둥을 조립, 기둥과 기둥 사이 천장 형태의 LED등을 단 센서형 벤치를 완성했다.">
alt 속성을 선언하고 텍스트 값을 제공함으로써, 이제 우리는 이미지 콘텐츠의 의미를 보조 기술 사용자들에게 전달할 수 있게 되었습니다. 하지만 보조 기술 사용자가 대체 텍스트를 통해 기술의 도움이 필요 없는 일반적인 사용자들이 이해할 수 있는 것과 동등한 수준의 정보를 제공받기 위해서는 좀 더 노력이 필요합니다. 대체 텍스트를 통해 유용한 정보가 전달될 수 있도록, 다음 사례들을 통해 대체 텍스트의 내용을 적절하게 제공하는 방법에 대해 알아보도록 하겠습니다.
대체 텍스트 내용을 불충분하게 제공한 경우
대체 텍스트는 글자 그대로 이미지 요소를 대체할 수 있는 텍스트여야 합니다. 일반 사용자가 시각적으로 이미지 콘텐츠를 봤을 때 확인할 수 있는 내용과 동등한 수준의 구체적인 설명이 제공되지 않는다면, 대체 텍스트가 있어도 스크린 리더 사용자들은 여전히 콘텐츠에 접근하는 데 제약이 있습니다.
Example
이미지로 저장한 텍스트
Do Not
<img src="/img/main_banner_1.jpg" alt="오늘 하루, 모든 eBook 25% 할인">
Do
<img src="/img/main_banner_1.jpg" alt="오늘 하루, 모든 eBook 25% 할인. 문학전집 시리즈 및 신간 도서는 할인에서 제외됩니다.">
Do Not 코드의 alt 속성값에는 할인 제외 품목에 대한 정보가 빠져있습니다. 물론 위 예시 이미지에서 전달하려는 정보의 핵심은 도서 할인에 관한 것이지만, 할인에서 제외되는 품목이 있다는 것을 아는 사용자와 그렇지 않은 사용자는 같은 웹사이트라도 매우 다른 방식으로 책을 탐색하게 될 것입니다.
대체 텍스트의 오타로 인해 정보전달에 문제가 생긴 경우
대체 텍스트는 오타 없이 정확한 내용으로 제공해야 합니다. 문장과 단어 군데 군데 포함된 오타는 스크린 리더 음성에 의존하여 청각적으로 정보를 처리하는 사용자들의 이해를 방해합니다. 더군다나 오타가 발생한 부분이 콘텐츠에서 핵심이 되는 내용이라면 스크린 리더 사용자는 정보를 완전히 다르게 이해할 수 밖에 없습니다.
Example
이미지 텍스트를 통해 중요한 정보를 전달하는 이미지
Do Not
<img src="/src/banner/activity_01.jpg" alt="봄맞이 걷기 행사 참여자 모집. 모집기간 2019년 4월 2일부터 4월 21일. 행사내용 올바른 걷기자세 안내, 함께 걷기. 접수방법 홈페이지를 통한 온라인 접수(선착순). 신청하러 가기">
Do
<img src="/src/banner/activity_01.jpg" alt="봄맞이 걷기 행사 참여자 모집. 모집기간 2019년 4월 1일부터 4월 22일. 행사내용 올바른 걷기자세 안내, 함께 걷기. 접수방법 홈페이지를 통한 온라인 접수(선착순). 신청하러 가기">
Do Not 코드를 유심히 살펴보면, 참여자 모집 시작일이 2일로 잘못 표기된 것을 알 수 있습니다. ‘고작 오타 하나일 뿐인데.’ 하고 생각할지도 모르지만, 단순해 보이는 이 오타 하나로 인해 스크린 리더 사용자들은 하루의 신청 기회를 놓치게 되고 결국 행사에 참여 하지 못하게 될 지도 모릅니다.
그러므로 이미지의 대체 텍스트를 제공할 때 오타가 발생하지 않도록 주의하고, 특히 위 사례와 같이 대체 텍스트에 중요한 정보가 포함되는 경우에는 작업을 완료하기 전에 한 번 더 점검하는 것이 좋습니다.
동일한 정보를 중복해서 제공하는 경우
웹 접근성에서 대체 텍스트의 중요성을 알고 있는 퍼블리셔와 개발자들은 대체 텍스트를 잘 제공하려고 노력하다 오히려 지나치게 친절한 설명을 제공하는 실수를 저지르곤 합니다. 앞선 예시들을 통해 살펴본 것처럼 대체 텍스트는 정확한 내용으로 충분하게 제공하는 것이 중요하지만, 과도한 설명은 또 다른 불편을 가져다 줍니다.
Example
썸네일 이미지와 제목, 설명으로 구성된 게시물 목록
Do Not
<img src="/image/main_thumb_1.jpg" alt="야후재팬(Japan Accessibility Conference) - 한국 모바일 금융 애플리케이션 사례와 인클루시브">
<a>
<span>야후재팬(Japan Accessibility Conference) - 한국 모바일 금융 애플리케이션 사례와 인클루시브</span>
…(생략)…
</a>
스크린 리더 음성
"야후재팬(Japan Accessibility Conference) - 한국 모바일 금융 애플리케이션 사례와 인클루시브 이미지
야후재팬(Japan Accessibility Conference) - 한국 모바일 금융 애플리케이션 사례와 인클루시브 링크"
Do
<img src="/image/main_thumb_1.jpg" alt="">
<a>
<span>야후재팬(Japan Accessibility Conference) - 한국 모바일 금융 애플리케이션 사례와 인클루시브</span>
…(생략)…
</a>
‘Do Not’ HTML 코드 예시를 살펴보면 이미지 요소의 대체 텍스트가 게시물 제목과 완전히 동일하게 제공되고 있습니다. 이렇게 되면 스크린 리더 사용자들은 같은 내용을 연속적으로 두 번 듣게 됩니다.
예시 이미지는 목록의 일부만을 보여주고 있지만, 대개의 목록은 훨씬 더 많은 항목으로 구성되어 있습니다. 스크린 리더 사용자는 각각의 항목마다 같은 내용을 반복해서 듣게 되어 지루함을 느끼고 시간 또한 낭비하게 될 것입니다.
하지만 내용의 중복을 피하기 위해 제목과 전혀 다른 내용으로 썸네일 이미지에 대체 텍스트를 제공하는 것도 적절한 방법은 아닙니다. 예시에서 썸네일 이미지는 텍스트인 게시물 제목을 시각적으로 보다 빠르게 인지할 수 있게 도와주는 요소이기 때문입니다. 그러므로 위와 같은 상황에서는 이미지 요소의 대체 텍스트를 빈 값(“”)으로 제공하는 것이 바람직합니다.
한 가지 예시를 더 다루겠습니다.
Do Not
<img src="/image/main_thumb_2.jpg" alt="일본 비즈니스 교류 세미나(JIET)에 참석한 참여사 대표들이 행사 현수막 뒤에서 기념촬영을 하는 사진">
스크린 리더 음성
“일본 비즈니스 교류 세미나(JIET)에 참석한 참여사 대표들이 행사 현수막 뒤에서 기념촬영을 하는 사진 이미지”
Do
<img src="/image/main_thumb_2.jpg" alt="일본 비즈니스 교류 세미나(JIET)에 참석한 참여사 대표들이 행사 현수막 뒤에서 기념촬영을 하는 모습">
스크린 리더 음성
“일본 비즈니스 교류 세미나(JIET)에 참석한 참여사 대표들이 행사 현수막 뒤에서 기념촬영을 하는 모습 이미지”
이번 편을 열심히 읽으신 분들은 아마 지금쯤 이런 생각을 하고 계실지도 모르겠습니다.
‘웹 페이지에 제공되는 이미지 요소가 ‘이미지’라는 것도 중요한 정보이니 대체 텍스트에 표현해 주어야 하지 않을까?’
하지만 스크린 리더는 HTML의 시맨틱 태그(semantic tag)를 구분하여 읽어주기 때문에, 대체 텍스트에 ‘사진, 이미지, 아이콘’ 등의 단어를 포함하게 되면 스크린 리더가 기본적으로 알려주는 태그 정보와 중복된 정보를 제공하게 됩니다. 스크린 리더는 HTML의 이미지 요소를 ‘이미지’라고 표현하므로, Do Not 예시에서는 '사진'과 ‘이미지’라는 동일한 의미의 단어가 반복되고 있는 것이죠. 정리하면, 이미지의 대체 텍스트는 이미지가 전달하고 있는 내용만 적절하게 표현하는 것으로 충분합니다.
요약
이처럼 텍스트가 아닌 콘텐츠는 alt 속성을 반드시 선언해 주어야 하며, 선언된 속성값으로 올바른 콘텐츠의 의미를 제공해 주어야 합니다. 이렇게 제공된 대체 텍스트는 스크린리더 사용자에게 콘텐츠 탐색에 방해가 되지 않는지, 그 문맥상 역할을 다하고 있는지, 혹시나 과도하게 정보를 제공하고 있지 않은지 살펴야 합니다.
이번 편에서는 이미지 요소의 대체 텍스트를 올바르게 제공하는 기본적인 방법에 대해 살펴 보았습니다. 그러나 같은 이미지 요소임에도 용도와 목적에 따라 대체 텍스트가 필요하지 않은 경우도 있습니다. 다음 편에서는 대체 텍스트를 생략해야 하는 상황에서의 오류 사례를 통해 대체 텍스트를 올바르게 제공하는 방법에 대해 살펴보겠습니다.
