널리

웹페이지나 모바일 앱 등에서 이미지, 아이콘과 같은 콘텐츠에 대체 텍스트를 제공하는 것은 기본적인 접근성 원칙입니다. 대부분의 것이 그렇겠지만, 기본적이라는 것의 의미는 매우 중요하다는 의미로도 이해할 수 있습니다. 중요한 접근성 항목인 만큼 이곳 블로그에 저희가 여러 차례 관련 내용을 다루어 왔습니다.

같은 맥락에서 이번 아티클은 기술적 내용보다 대체 텍스트를 제공할 때 고려해야 하는 여러 원칙들에 대해 정리해 보았습니다. 1부는 대체 텍스트의 기본 원칙, 내용만을 포함한 이미지, 기능이 포함된 이미지의 대체 텍스트 제공 방법을 다룹니다. 2부에서는 장식용 이미지 및 사이트맵, 버튼 이미지와 같은 정보에 대해 다루도록 하겠습니다.

참고: 이 아티클은 WebAIM 기관에서 제공하는 ‘Alternative Text’ 자료를 기반으로 작성하였습니다.

위의 원칙을 바탕으로 다음의 예들을 살펴보겠습니다.

<img src="media/gw.jpg" alt="예시" width="125" height="157">

독립 전쟁에서 미군 총사령관으로서 그리고 나중에 미국의 초대 대통령인 조지 워싱턴은 종종 "그의 나라의 아버지"라고 불립니다.

위의 예에서 이미지에 대한 적절한 대체 텍스트를 아래 보기에서 선택해 보시기 바랍니다.

정답은 4번입니다. 1번은 ‘이미지’라는 불필요한 요소 정보를 제공한 경우이고 2번은 이미지에 없는 추가 정보를 삽입하였고 텍스트 뒤에 있는 내용과도 중복됩니다. 3번은 이미지 대상이 바로 인접한 위치에 표시되고 있지 않아 적절하지 않습니다. 다음 예에서는 이미지 자체를 스크린리더에서 인식하지 않도록 하는 것이 적절합니다.

 

조지 워싱턴

독립 전쟁에서 미군 총사령관으로서 그리고 나중에 미국의 초대 대통령으로서 조지 워싱턴은 종종 "그의 나라의 아버지"라고 불립니다.

조지 워싱턴

<a href="http://en.wikipedia.org/wiki/George_Washington" class="noicon"><img src="media/gw.jpg" alt="example image" class="link" width="125" height="157"></a>

다음 보기 중에서 위의 링크에 대한 가장 적절한 대체 텍스트를 골라 보시기 바랍니다. 

위의 이미지는 링크 안에 포함된 이미지가 내용 및 기능을 가지고 있습니다. 기능에 대한 정보는 링크라는 컨트롤 요소를 통해서 제공해 주고 있고 내용은 대체 텍스트 정보를 통하여 제공해 주게 됩니다. 위의 보기에서 가장 적절한 답은 4번입니다. 물론 링크 아래의 텍스트와 위의 링크 대체 텍스트는 중복이 되지만 기능에 대한 설명으로는 해당 대체 텍스트가 가장 적절합니다. 1번과 같이 적용할 경우 스크린리더는 기능에 대한 설명 콘텐츠 정보를 출력할 수 없으므로 스크린리더 설정에 따라 이미지 파일명을 읽거나 링크 주소를 읽게 됩니다. 만약 위의 예에서 링크 하위에 텍스트와 이미지가 함께 있었고 텍스트가 이미지와 같은 설명을 부여해 주었다면 이때는 대체 텍스트를 숨겨도 무방합니다.

<a href="http://en.wikipedia.org/wiki/George_Washington" class="noicon"><img src="media/gw.jpg" alt="" class="link" width="125" height="157"><br><strong>조지 워싱턴</strong></a>

2번은 이미지에 없는 정보를 제공한 경우입니다. 이미지에 대한 정보는 그 이미지를 통하여 유추할 수 있는 정보로 국한해야 하며 위의 이미지를 봐서는 위키피디아로 연결된다는 정보를 전혀 이미지 만으로 인지할 수 없습니다. 3번은 이미지에 대한 설명이 더 보기로 만 되어 있으므로 적절하지 않습니다. 

앞에서도 설명한 바와 같이 링크, 버튼과 같은 요소는 스크린리더가 대체 텍스트가 아닌 컨트롤 정보를 통해서 컨트롤을 인식할 수 있도록 마크업 하는 것이 중요합니다.