대체 텍스트 올바르게 제공하기-
2편
오류 유형으로 살펴보는 웹 접근성 지침
오류유형2. 의미 없는 이미지에 대한 대체 텍스트 제공
웹 콘텐츠를 구성하는 요소는 사용자에게 어떤 정보를 전달하려는 목적 외에도 여러가지 목적을 가집니다. 예를 들어, 이미지를 포함한 많은 시각적 요소들은 콘텐츠의 이해를 돕는 보조적인 수단, 또는 단순히 심미적인 효과를 위해 사용됩니다.
일반 사용자는 이러한 시각적 요소의 의미를 이해하기 위해 특별히 노력하지 않습니다. 오히려 이와 같은 정보에는주의를 기울이지 않고 원하는 내용을 담고 있는 영역을 우선적으로 확인할 것입니다. 그런데 우리가 콘텐츠의 강조나 심미적인 효과를 위해 사용한 이미지에 대체 텍스트를 제공한다면 스크린 리더 사용자는 무의미한 정보로 인해 웹 사이트 탐색 과정을 방해 받게 됩니다. 따라서 이러한 유형의 의미 없는 이미지는 보조기술이 해석하지 않고 건너뛰도록 대체 텍스트를 생략해야 합니다.
글머리 이미지에 대체 텍스트를 제공한 경우
글머리 이미지(bullet image)는 해당 콘텐츠가 목록의 한 항목임을 알려주기 위한 용도로 사용되는 이미지를 의미합니다. 일반적인 기호(·, ◆, ▷ 등)를 사용하는 대신 시각적인 효과를 더하여 사용자의 주의를 끌기 위해 별도의 이미지를 정의한 것입니다.
글머리 이미지는 콘텐츠의 구조를 시각적으로 구분하는 용도로 사용되기 때문에 텍스트 설명을 제공하지 않아도 됩니다.
Example
글머리 이미지가 사용된 콘텐츠 예시
Do Not
<img src="/src/img/bullet_01.png" alt="불릿">
<h3>주요 연구 실적</h3>
<p>융합사업을 통해 센서 기반의 원격 제어기와 클라우드 기반 IoT 플랫폼에 대한 연구 및 제작 실적을 보유하고 있음</p>
스크린 리더 음성
"불릿 이미지
주요 연구 실적 헤딩3
융합사업을 통해 센서 기반의 원격 제어기와 클라우드 기반 이오트 플랫폼에 대한 연구 및 제작 실적을 보유하고 있음"
Do
<img src="/src/img/bullet_01.png" alt="">
<h3>주요 연구 실적</h3>
<p>융합사업을 통해 센서 기반의 원격 제어기와 클라우드 기반 IoT 플랫폼에 대한 연구 및 제작 실적을 보유하고 있음</p>
스크린 리더 음성
"주요 연구 실적 헤딩3
융합사업을 통해 센서 기반의 원격 제어기와 클라우드 기반 이오트 플랫폼에 대한 연구 및 제작 실적을 보유하고 있음"
'Do'예시에서는 글머리 이미지의 대체 텍스트를 생략하여 스크린 리더로 불필요한 정보가 출력되지 않도록 하였습니다. 그런데 한편으로 웹 콘텐츠를 시각적으로 확인하는 사용자들이 글머리 이미지를 통해 얻는 도움을 고려해 보면 대체 텍스트를 생략하는 것이 적합한 방법이 아닐 수 있다는 생각이 들지도 모릅니다.
글머리 이미지는 콘텐츠를 구조적으로 보이게 하는 효과가 있습니다. 이로 인해 콘텐츠를 일정 단위에 따라 탐색할 수 있게 해주고, 단순히 일련의 문장으로 구성되었을 때보다 가독성을 높여 줍니다. 스크린리더 사용자 역시 콘텐츠를 의미 단위별로 탐색하는 것이 내용을 이해하기 용이합니다. 이를 위해서는 글머리 이미지와 대체 텍스트가 아닌 HTML의 시맨틱 태그(semantic tag)를 적절히 활용하는 것이 더욱 효과적입니다.
스크린 리더는 <img>요소를 '이미지'로 구분하는 것과 같은 방식으로 여러 가지 시맨틱 태그를 구분합니다. 위 사례를 다시 한 번 살펴보면, 글머리 기호가 붙어 있는 텍스트와 그에 대한 설명이 각각 제목과 문단 태그인 <h3>와 <p>로 구분되어 있습니다. 대부분의 스크린 리더는 제목 태그를 구분하여 출력해 주며, 제목을 단위로 콘텐츠를 건너뛰어 탐색할 수 있는 기능을 지원합니다. 그러므로 스크린 리더 사용자는 시맨틱 태그에 기반하여 시각적으로 콘텐츠를 탐색하는 사용자와 매우 유사한 방식으로 웹 페이지를 이용할 수 있게 됩니다.
'Do' 예시와 같이 글머리로 구분된 콘텐츠를 제목 태그로만 구분해야 하는 것은 아닙니다. <h1> 등의 제목 태그와 <p>, <ul>, <ol>과 <li>, <dl>과 <dt> 등 콘텐츠의 구조와 의미에 따라 적절한 태그를 선택하여 마크업하면 됩니다.
장식을 위한 배경 이미지에 대체 텍스트를 제공한 경우
텍스트 콘텐츠의 의미를 시각적으로 강조하여 표현하기 위한 이미지, 심미적 효과를 위해 사용된 장식용 배경 이미지는 어떤 정보를 전달하는 목적을 가진 의미 있는 이미지가 아니므로 대체 텍스트를 생략해야 합니다.
Example
장식용 배경 이미지를 사용한 예시
Do Not
<a href="/spot_01.html" >
<span>강원도 · 자동차 여행</span>
<p>3일 만에 돌아보는 태백 숨은 명소</p>
<img src="/src/img/bg.png" alt="파란색 자동차가 해질녘의 낮은 햇살을 받으며 길 위에 서있다.">
</a>
Do
<a href="/spot_01.html" >
<span>강원도 · 자동차 여행</span>
<p>3일 만에 돌아보는 태백 숨은 명소</p>
<img src="/src/img/bg.png" alt="">
</a>
위 사례에서 배경 이미지로 제공되고 있는 사진은 '자동차 여행'이라는 콘텐츠 제목의 의미를 더 효과적으로 표현하기 위한 수단입니다. 사진 자체가 핵심정보를 전달하는 것이 아닌기 때문에 이를 텍스트로 설명하기도 어려우며 사진을 사용한 목적을 고려해보면 텍스트 설명을 제공하는 것은 적절하지 않습니다. 그러므로 배경 이미지의 대체 텍스트는 빈 값("")으로 제공해야 합니다.
Best
HTML
<a href="/spot_01.html" >
<span>강원도 · 자동차 여행</span>
<p>3일 만에 돌아보는 태백 숨은 명소</p>
</a>
CSS
#spot > div ul li.type1 a{
background: url(../img/bg.jpg) no-repeat 0 0;
}
위 사례와 같이 특별한 의미가 없는 배경 이미지를 사용하는 경우, 가장 적절한 마크업 방안은 이미지 태그를 사용하지 않는 것입니다. 문자 그대로 '배경'의 용도로 사용되고 있으므로 스타일 시트에서 배경(background) 속성을 활용해 이미지를 표현하면 됩니다.
요약
이미지 요소에 어떤 내용으로 대체 텍스트를 제공할 것인지 고민하기 전에, 이미지를 어떤 목적으로 사용하고 있는지를 생각해 봐야 합니다. 이미지가 주요 콘텐츠의 일부로서 사용자에게 정보를 전달하는 역할을 한다면 '1편'의 내용을 참고하여 대체 텍스트를 제공하면 됩니다. 반대로 이미지가 콘텐츠의 내용을 설명하는 핵심적인 요소가 아니라면 대체 텍스트를 생략하거나 배경 이미지 속성을 활용함으로써 스크린 리더 사용자에게 불필요한 정보를 전달하지 않도록 합니다.
이번 편에서는 의미 없는 이미지의 요소의 대체 텍스트 제공 방법에 대해 살펴 보았습니다. '대체 텍스트 올바르게 제공하기 -3편'에서는 조직의 관계나 프로세스와 같이 이미지에 표현된 항목들이 서로 관계를 맺고 있거나 내용이 다소 복잡한 경우 어떻게 대체 텍스트를 올바로 제공할 수 있는지, 사례를 통해 그 방법을 살펴보도록 하겠습니다.
