img태그의 longdesc사용법

접근성을 맞추기 위해서 이미지에 적힌 글을 모두 alt속성에 적어줘야 한다.
허나 이미지에 글이 너무 많을 경우에는 longdesc속성에 적어주는게 좋다.
<img src="../images/img_contents01.gif" longdesc="#msg_contents01" /> <p id="msg_contents01" class="hide"> ... 이미지 안에 있는 글 내용 ... </p>
식으로 연결해주면 된다.
이 경우 스크린리더로 읽을 때도 longdesc의 ID를 찾아가서 읽어준다.

 

 

# 2012-04-24 수정

웹접근성연구소 심사를 받던 중 img를 longdesc를 사용하여 처리하였는데 오류로 리턴받은 경우가 있다.

위와 같을 경우 longdesc를 제공하더라도 <img /> 태그의 alt는 이미지를 대표하는 제목으로 제공해야한다고 하며

longdesc는 별도의 구조적, 계열적으로 작성되어진 html페이지로 연결하라고 명시한다.

1번의 경우 이해는 가지만 html페이지로 따로 빼서 연결하라는 이유를 모르겠다.. 결론적으로 처리 방안은

<img src=".." alt="체크리스트1과 2의 절차" longdesc="설명.html" />

식으로 표기 하라고 언지를 해줬다.

 

* html 페이지로 연결하라고 하는 이유에 대해 간략하게 적어줬는데, 설명의 내용을 hidden시켜놓는 것보다 longdesc속성을 사용하여 사용자가 선택적으로 정보를 습득할 수 있도록 제공하는 것이 원칙이므로, 구조적으로 설명한 내용을 따로 페이지로 작성하고 연결하여 제공해야 한다고 한다.