웹 접근성 - 대체 텍스트 기법

대체 텍스트 기법

 

웹 접근성을 높이기 위해서는 이미지 사용을 자제해야 합니다. 텍스트는 문자 인코딩 방식을 따르며 문서 리더기가 쉽게 읽어줄 수 있습니다. 하지만 이미지는 비트코드로 되어 있으며 이미지의 내용을 문서 리더기는 해석할 수 없습니다. 이런 이유로 접근성을 높이기 위해서는 이미지 사용을 자제해야 합니다.

 

이미지를 이용하여 글자나 단어, 문장 등 간단하고 짧은 글자들의 집합을 이용해서 디자인된 이미지를 텍스트 이미지라고 부릅니다. 이런 텍스트 이미지는 브라우저 옵션에서 그림을 꺼놓을 경우 대체 텍스트가 없다면 그림이 무엇인지 전혀 알 수 없습니다. 이 때 대체 텍스트를 사용하며 그림이 무엇을 나타내는지 짐작할 수 있습니다.

  

 

이미지만 사용한 방법(잘못된 방법)

<img src="img/test.gif" width="100" height="100" />

 

이미지에 alt 속성에 대체 텍스트를 제공하는 방법(올바른 방법)

<img src="img/test.gif" width="100" height="100" alt="테스트용 풍경 그림" /> 

 

 

 

 

 

 

링크가 걸린 이미지에 대체 텍스트 제공하기

 

이미지에 링크를 걸어 이미지를 통해 페이지를 이동시킬 때는 그 링크의 성격에 맞는 대체 텍스트를 제공해야 합니다. 추가로 링크 자체에도 링크의 성격을 기술해주는 title 속성을 넣어주면 일반 그래픽 브라우저 사용자들에게도 풍선 도움말(Tool tip)로 링크에 대한 설명이 제공되는 장점을 줄 수 있습니다.

 

 

이미지에 링크만 건 방법 (잘못된 방법)

<a href="http://www.w3c.com" /><img src="img/w3c.gif" width="100" height="100" border="0" /></a>

 

이미지와 링크에 대체 텍스트를 사용한 방법 (올바른 방법)

<a href="http://www.w3c.com" title="W3C 표준안이 있는 홈페이지 주소" />

    <img src="img/w3c.gif"  width="100" height="100" border="0" alt="W3C 홈페이지 링크" />

</a>

 

 

 

 

불릿 이미지등 의미 없는 그래픽 이미지에 대체 텍스트 사용하기

 

불릿 이미지는 삼각형, 리스트의 앞에 오는 도형처럼 의미 없는 이미지를 말합니다. 이렇게 의미 없는 이미지에는 alt 속성에 "" 와 같은 방식의 대체 텍스트로 표현해야 합니다.

 

 

 

 

 

잘게 짤려 있는 이미지 처리방법

 

이미지가 잘게 짤려져 있는 경우에는 위에 있는 가장 큰 이미지에는 정상적인 대체 텍스트를 넣고 아래의 작은 이미지에는 공백 대체 텍스트를 넣어줍니다. 간단한 설명은 alt를 이용하고, 그것보다 조금 더 상세한 설명은 title을 이용하고, 아주 상세한 설명은 별도의 파일로 제작하여 longdesc 에 넣어줍니다.

 

<img src="img/w3c.gif" alt="설명" title="타이틀명" longdesc="description.html"/>