대체 텍스트 제공 | 웹 접근성 연구소

개발자 아카이브

Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 JavaScript 제작기법 > JavaScript 접근성 지원 프로그래밍 지침 >
대체 텍스트 제공

2.1 대체 텍스트 제공

'텍스트가 아닌 콘텐츠'에는 대체 텍스트를 제공하여야 한다.

국가표준 항목 1.1에 따르면, '텍스트가 아닌 콘텐츠'(예를 들어 이미지, 멀티미디어, 애니메이션 등)는 적절한 대체 텍스트를 제공하여야 화면 낭독 프로그램을 이용하는 장애인에게 그 내용을 전달할 수 있다. 이는 중요한 내용을 포함하고 있는 배경 이미지의 경우에도 마찬가지이다. 그러나 모든 '텍스트가 아닌 콘텐츠'에 대체 텍스트를 제공해야만 하는 것은 아니다.

2.1.1 요구조건

(1) 스크립트를 이용하여 웹 콘텐츠에서 '텍스트가 아닌 콘텐츠'를 스크립트를 이용하여 교체하는 경우에는 교체하는 콘텐츠의 대체 텍스트도 제공하여야 한다.

2.1.2 적용방법

가) 이미지 치환 JavaScript는 웹 페이지상의 이미지를 새로운 이미지로 치환할 수 있다. 이 과정에서 이미지만 치환한다면 이 이미지에 대한 대체 텍스트는 치환되기 이전의 대체 텍스트가 제공되므로 치환된 이미지에 적합한 대체 텍스트를 제공하지 못한다. 따라서 이미지를 치환할 경우에는 대체 텍스트도 함께 치환하도록 한다.

아래의 JavaScript 프로그램은 화면에 나타난 웃는 얼굴의 이미지 상에서 마우스를 클릭하면 기존의 이미지 old_image.jpg를 new_image.jpg로 치환하고, 대체 텍스트를 new_image.jpg에 적합한 내용 "우는 얼굴"로 치환하는 코딩의 한 예제이다.

우수사례

사례 이미지

웃는 얼굴(좌)을 클릭하면 우는 얼굴(우)로 변경되는 예제이미지

[그림] 웃는 얼굴(좌)을 클릭하면 우는 얼굴(우)로 변경되는 예제

사례 코드

<html>
<head>
<title> ... </title>
<script type="text/JavaScript">    
var bool=0;
function replaceImage(){
 if (bool == 0) {bool = 1;
  document.getElementById("image").src="new_image.jpg";
  document.getElementById("image").alt = "우는 얼굴";}
else{bool = 0;
 document.getElementById("image").src="old_image.jpg";
 document.getElementById("image").alt = "웃는 얼굴";} 
}
</script>
</head>
<body>
 <div style="margin-top:100px; text-align:center">   
 <img id = "image" src=old_image.jpg" alt="웃는 얼굴" 
 style="cursor:pointer" onclick="replaceImage(bool);" />
 </div>
</body>
</html>

나) 올바른 대체 텍스트 '텍스트가 아닌 콘텐츠'와 함께 제공되는 대체 텍스트는 화면에 표시되는 이미지를 대신해서 보조 기술(예를 들어 화면 낭독 프로그램)에게 제공되는 정보이므로 그 내용이 적절하여야 한다.

바람직한 방법은 왜 이미지를 화면에 제공하는지를 생각하여 대체 텍스트의 내용을 결정하는 것이 이미지의 모습을 설명하는 것보다 낫다. 예를 들어 투명한 플라스틱 병에 생수가 가득 들어있는 이미지에 대한 대체 텍스트를 '투명한액체가 담긴 플라스틱 병'이라고 하기 보다는 '생수병'이라고 하는 것이 더 적합하다.

'텍스트가 아닌 콘텐츠' 요소에 대체 텍스트를 제공하는 것은 어려운 일이 아니다. 보다 중요한 점은 '언제, 어떤 내용의 대체 텍스트를 제공할 것인가'이다. 또한 대체 텍스트가 화면 낭독 프로그램 사용자에게 어떠한 영향을 주는가를 항상 고려하여야 한다.

메인메뉴