현재 페이지 위치

Home> 광장> 널리 블로그> 상세보기

목록이전 글 보기346/359다음 글 보기

추천하기
추천 횟수 :0
조회수
937
공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0

대체 텍스트 적용 시 기본 원칙 1부

접근성

안녕하세요, 엔비전스입니다.

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

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

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

 

대체 텍스트 제공 기본 원칙

  1. 이미지가 포함하고 있는 내용 및 기능이 대체 텍스트 및 기타 정보를 통해 정확하고 동등하게 제공되어야 합니다. 여기서 말하는 이미지의 내용은 그 이미지가 어떤 이미지인지에 대한 것을 말하며 기능은 이미지가 링크나 버튼과 같이 추가 액션을 가지고 있는 경우를 의미합니다. 일반적으로 이미지에 대한 내용은 대체 텍스트로, 기능에 대한 정보는 표준 컨트롤과 상태를 표현할 수 있는 속성으로 제공합니다.
  2. 최대한 간결해야 합니다. 특별한 경우를 제외하고는 문장보다는 단어 혹은 어구가 적절하며 이미지가 긴 글을 포함하는 경우에는 IR 기법을 사용합니다.
  3. 내용, 즉 콘텐츠만 포함한 이미지에 대한 설명이 이미지 아래 텍스트에서 동일하게 제공되는 경우는 이미지의 대체 텍스트의 내용과 본문 내용이 중복되므로 스크린리더에서 이미지 요소가 인식되지 않도록 합니다. 
  4. 설명하는 이미지가 사진이라는 정보를 굳이 제공하지 않아도 되는 경우에는 이미지에 대한 설명만으로 충분하며 xx 이미지, xx 그래픽 등의 추가 정보는 텍스트로 제공하지 않습니다.
위의 원칙을 바탕으로 다음의 예들을 살펴보겠습니다.

이미지가 내용만 포함한 경우

예시

<img src="media/gw.jpg" alt="예시" width="125" height="157">
독립 전쟁에서 미군 총사령관으로서 그리고 나중에 미국의 초대 대통령인 조지 워싱턴은 종종 "그의 나라의 아버지"라고 불립니다.

위의 예에서 이미지에 대한 적절한 대체 텍스트를 아래 보기에서 선택해 보시기 바랍니다.
  1. 조지 워싱턴 이미지
  2. 미국의 초대 대통령, 조지 워싱턴
  3. 이미지 자체를 스크린리더에서 인식되지 않도록 처리.
  4. 조지 워싱턴
정답은 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>
다음 보기 중에서 위의 링크에 대한 가장 적절한 대체 텍스트를 골라 보시기 바랍니다. 
  1. 스크린리더에서 이미지를 인식하지 못하도록 하는 방법
  2. 조지 워싱턴 위키백과
  3. 더보기
  4. 조지 워싱턴
위의 이미지는 링크 안에 포함된 이미지가 내용 및 기능을 가지고 있습니다. 기능에 대한 정보는 링크라는 컨트롤 요소를 통해서 제공해 주고 있고 내용은 대체 텍스트 정보를 통하여 제공해 주게 됩니다. 위의 보기에서 가장 적절한 답은 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번은 이미지에 대한 설명이 더 보기로 만 되어 있으므로 적절하지 않습니다. 

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

Nts Nuli님 프로필

회원 등급 : 7

Nts Nuli

널리 관리자입니다.

1개79개

댓글보기

전체 댓글
2
로그인
방믜

회원 등급 : 1

이미지가 링크 안에 포함된 경우에서 4번 보기가 누락된 것 같아요~
박웅진

회원 등급 : 1

'이미지가 링크 안에 포함된 겅우'서
보기 4번이 적혀있지 않습니다.

목록이전 글 보기346/359다음 글 보기

공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0