- 대체텍스트 입력하기
목차
- 일단 사진 올려보기
- 대체텍스트 작성하기 @iOS
- 대체텍스트 작성하기 @Web
웹 접근성에 관심을 가지고 가장 처음 접하게 되는 정보 중 하나가 img의 alt 속성이다. 시각장애인은 이미지 정보를 눈으로 확인할 수 없기 때문에 이를 보완하기 위해 alt 속성을 사용하게 되고, 이것을 화면낭독기가 음성출력한다.
다들 알다시피 모든 이미지에 alt 속성값을 제공하는 것은 아니다. alt 속성의 제공에서 제외되는 것은 정보를 담지 않은 블릿, 선, 배경 등의 이미지다. 장식에 사용되는 이런 이미지에는 화면낭독기가 음성을 출력하지 않도록 alt=””과 같이 공백문자를 제공한다.
일반 이미지에서는 alt 속성의 사용이 매우 명확하다. 하지만 링크에 사용된 이미지라면 어떨까?
<a href=”#go” ><img src=”abc.jpg” alt=”아름다운풍경”></a>
<a href=”#go”>아름다운 풍경</a>
이 경우 인접한 두 링크의 텍스트와 목적지가 같기 때문에 이미지링크는 alt=”” 공백처리를 하게 된다.
<a href=”#go” ><img src=”abc.jpg” alt=””></a>
<a href=”#go”>아름다운 풍경</a>
제작자의 의도와 다르게 화면낭독기는 링크 속 이미지는 공백문자로 처리하지 않는다. 센스리더와 죠스는 아래와 같이 파일명을 그대로 음성출력하고 있다.
센스리더 : 에이비시점제이피지 그래픽링크
죠스 : 경로명/에이비씨 링크 그래픽
이런 현상에 대해 화면낭독기 개발사 측의 입장은 이렇다.
사이트를 이용하다 보면 아직도 전반적으로 준수상태가 매우 낮고 대체텍스트가 누락되거나 심지어 사이트의 모든 이미지링크가 공백처리 된 경우도 있다. 화면낭독기가 링크의 이미지도 alt=””를 공백처리하게 되면 일부 사이트를 이용할 수 없는 문제가 있다.
처음 이런 설명을 듣는 경우 납득하지 못할 수도 있지만, 화면낭독기는 접근성을 준수하지 않은 사이트도 이용해야하는 장애인보조기기이므로 이 주장을 반박하기가 어렵다.
그렇다면 어떻게 보완할 수 있을까? 해결방법은 “한국형웹콘텐츠접근성지침 v2.1 검사항목 2.4.3 적절한 링크텍스트”에서 확인할 수 있다
1-3) 이미지 링크를 제공하는 경우: URL에 관한 정보를 제공하는 텍스트와 URL로 이동하는 이미지 링크는 하나의 링크로 구성하는 것이 바람직하다. 이 경우, 이미지 링크의 대체 텍스트는 공백 문자로 제공해야 한다.
지침에서 알려주는 대로 한번 적용해보자.
<a href=”#go” ><img src=”abc.jpg” alt=””>아름다운풍경</a>
이미지를 공백처리하고 텍스트와 하나의 링크로 만들면 아래와 같이 음성출력 한다.
센스리더 : 아름다운풍경 그래픽링크
죠스 : 아름다운풍경 링크
이미지와 텍스트 링크가 인접한 경우 이 방법으로 보완할 수는 있지만, 이것이 정답이라고 말할 수는 없다. 디자인이나 개발 등 여러 이유로 하나의 링크로 묶을 수 없는 경우도 많기 때문이다.
이 사례를 접할 때마다 “지침상의 의도와 이상적인 접근성 높은 웹”이, “화면낭독기가 접하는 접근성 낮은 현실의 웹”과 상충하고 있는 지금이 참 씁쓸하다.
이 문제를 보완하는 여러 방법이 있겠지만, 이미지를 링크에 넣지 않고 링크 영역의 베경이미지로 사용하면 된다는 의견이 제시 되었지만, 어쨋든 이 경우에도 링크라는 요소가 인지되고 음성출력되기 때문에 추천하기는 어려울 것 같다.
Internet Explorer 8
센스리더 v3.2.2.0
죠스 한글판 v13
당신의 의견을 작성해 주세요.