전문가 상담

HOME > 지식마당 > 온라인 자문서비스 > 전문가 상담
이미지 대체 텍스트 질문입니다.
이미지 대체 텍스트 질문입니다.
작성일 2017-05-17 오후 1:49:56 작성자 김미선
첨부파일
  • 등록된 첨부파일이 없습니다.
[질문]

첫번째 질문
게시판에 일반 유저가 등록한 이미지도 alt등 웹접근 평가 심사 대상인가요?
게시판에 관리자가 등록한 이미지도 alt등 웹접근 평가 심사 대상인가요?
표시되어야 한다면 상세하게 텍스트가 다 표시되어야 하는지 alt="게시판 이미지" 형태로 등록되어도 되는지요?

두번째 질문
첨부한 그림과 같이 hidden 상태의 이미지가 있습니다.(링크도 없고 alt도 없습니다.)
기본은 hidden 상태이다가 사용자가 이미지를 클릭했을 경우 이미지가 팝업창(레이어)에 확대되어 보여 집니다.
이 같은 경우 웹접근 평가에서 어떻게 평가가 되나요?
hidden 상태의 이미지도 평가 대상인가요?
alt에 '확대 이미지' 와 같이 대체 텍스트가 있어야 하나요?

세번째 질문
N-WAX로 테스트 하였습니다.
<div><span class="blind">대체 텍스트</span></div>형태로 코딩하였고 div요소에 hidden이 들어가 있습니다.
div가 hidden 상태에서는 대체 텍스트가 없다고 나타납니다.
div가 block이 되었을때 대체 텍스트가 N-WAX에서 보여 집니다.
이 상황은 어떻게 평가가 되나요? (new 아이콘 이미지를 백그라운드로 사용하여 blind로 대체 텍스트를 표시한 경우입니다.)
hidden 상태도 평가 대상에 들어가나요?

네번째 질문
갤러리 게시판에 썸네일로 등록되는 이미지에도 대체 텍스트를 표시해야 하나요?
표시되어야 한다면 상세하게 텍스트가 다 표시되어야 하는지 alt="썸네일 이미지" 형태로 등록되어도 되는지요?

질문이 많아서 죄송합니다.




[답변]
1. 게시판에 등록되는 이미지의 대체텍스트도 웹접근성 평가 심사대상에 포함됩니다.(사용자,관리자 등록 모두 포함됨)
관리자가 등록하는 게시물의 경우 이미지뿐 아니라, 표테이블, 동영상, 명도대비 등 해당 게시 콘텐츠에 대해 일반 페이지와 동일하게 심사가 진행됩니다.
다만, 사용자 등록의 경우 사용자가 올바른 대체텍스트 정보를 등록했는지에 대해 관리자가 통제할 수 없기 때문에 사용자 등록 컨텐츠 입력수단에 대체텍스트를 넣을 수 있는 기능(동영상의 경우 자막등록 기능, 표의 경우 summary와 caption값을 넣을수 있는 기능 등)을 별도로 제공했는지의 여부로 웹접근성 평가를 진행합니다.
이미지의 경우 해당 이미지에서 제공되는 정보를 요약 또는 누락해서 제공하면 안되며, 내용이 많은 경우 이미지의 alt를 빈값으로 제공하고 IR기법을 통해 대체콘텐츠로 제공하셔도 됩니다.(alt="게시판 이미지" 형태로 등록불가)

2. 기능에 따라 이미지가 show/hide 되는 경우라도 대체텍스트를 제공해주어야 됩니다.
사용자가 이미지를 클릭했을 경우 이미지가 확대되어 보여지는 경우 해당 레이어 팝업으로 초점이 이동되어야 하며, 해당 이미지의 대체텍스트는 ex)블라우스 확대컷일 경우 : *** 블라우스 소매 확대보기(크게보기), 단순 동일이미지 확대컷일 경우 해당 상품명으로 대체텍스트를 제공해주시면 됩니다.(alt에 '확대 이미지' - 대체텍스트 불충분 제공 오류)

3. hidden 상태의 유무와 상관없이 대체텍스트 정보를 올바르게 제공하시면 됩니다.
<div><span class="blind">대체 텍스트</span></div> 제공된 div가 show 되는 조건을 충족하였을때 대체텍스트를 읽어주게 되므로 hidden의 상태유무와 상관없이 이미지 또는 의미있는 이미지의 배경이미지로 제공시 모두 평가 대상이 됩니다.
* IR기법으로 대체텍스트 또는 table 내 caption 등을 숨김처리 하는 경우 display:none; 또는 visibility:hidden;의 값을 제공하지 않도록 해야 됩니다.

4. 썸네일로 제공되는 이미지의 경우 아래와 같이 제공하시면 됩니다.
▼ 썸네일 + 텍스트로 정보 구성된 링크 제공시
<a href="URL">
<img src="thumbnail.jpg" alt="">
<span>웹접근성 테스트 안내 - 썸네일 이미지 포함한 링크 제공</span>
</a>

▼ 썸네일 링크 단독 제공 또는 텍스트와 분리 제공시
<a href="URL">
<img src="thumbnail.jpg" alt="이미지에 텍스트가 있는 경우 해당 텍스트로 제공, 상품일 경우 삼품명으로 제공, 기사일 경우 기사제목으로 제공 또는 해당 썸네일과 연관된 링크텍스트로 제공">
</a>
<a href="URL">웹접근성 테스트 안내 - 썸네일 이미지 포함한 링크 제공</a>

▼ pdf, hwp, file 등의 아이콘 이미지만으로 첨부링크를 제공하는 경우 참고
<a href="url/file.pdf" title="첨부파일 다운/링크"><img src="pdf.gif" alt="웹접근성 테스트 안내.pdf"></a>
관련링크 http://www.wah.or.kr/Participation/technique.asp

전문가상담 목록
번호 분류 제목 작성자 작성일
10263 평가 이미지 대체 텍스트 질문입니다. 장해원 2017-05-11
10270 평가  전문가 답변이미지 대체 텍스트 질문입니다. 김미선 2017-05-17

웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.

(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)

위로가기