이미지에 대한 alt 태그 사용과 alt=”” 버그
센스리더는 웹페이지내의 이미지에 대해 기본적으로는 파일명을 음성출력합니다. 하지만 파일명만으로는 해당 이미지에 대한 정보를 정확히 알 수 없기 때문에 alt 태그의 정보를 활용하게 됩니다. 이미지에 대해 alt 태그로 정보를 넣어줄 경우 스크린리더는 해당 내용을 파일명 대신 음성출력하게 됩니다.
| <img src=”sub_g01.gif”> <img src=”sub_go1.gif: alt=”전송”> |
sub_g01.gif 이미지 전송 이미지 |
alt 태그의 정보를 활용해 음성출력하면 모든 이미지에 대해 alt 정보를 제공해야 하는지에 대한 논란이 발생할 수 있습니다. 일반적으로 의미를 갖지 않는 경계선/배경/불릿 등에 대해서는 alt=””과 같이 공백문자 처리를 함으로서 스크린리더가 이미지 파일명 조차 읽지 않고, 아무것도 없는 듯이 지나가도록 처리하고 있습니다.
| <img src=”sub_g01.gif”> <img src=”hor_line01.gif” alt=””> <img src=”sub_go1.gif: alt=”전송”> |
sub_g01.gif 이미지 (아무것도 없는 듯 지나감) 전송 이미지 |
위와 같이 이미지에 대해 alt=”” 태그를 사용하면 불필요한 이미지에 대한 음성출력을 막을 수 있습니다. 하지만 센스리더 프로 1.2.0.3 의 경우 이에 대한 처리에 버그가 있어서 이미지로 음성을 출력하게 됩니다. 이 버그는 1.2.0.4 BETA 이후 수정되었습니다.
| <img src=”sub_g01.gif”> <img src=”hor_line01.gif” alt=””> <img src=”sub_go1.gif: alt=”전송”> |
sub_g01.gif 이미지 이미지 전송 이미지 |
이미지를 링크로 사용하는 경우가 많은데 이에 대한 음성출력은 다음과 같습니다.
| <a href=”#”><img src=”sub_g01.gif” alt=”전송”></a> <a href=”#” title=”새창으로”><img src=”sub_g01.gif” alt=”전송”></a> <a href=”#” title=”새창으로”target=”_blank”><img src=”sub_g01.gif” alt=”전송”></a> <a href=”#” title=”새창으로”><img src=”sub_g01.gif”></a> |
전송 그래픽 링크 전송 그래픽 링크 전송 새창 그래픽 링크 새창으로 그래픽 링크 |
이미지에서는 alt 값이 title 보다 우선합니다. a 태그 안에 있는 title 값도 img 안에 alt값이 있기 때문에 alt 값을 음성출력하게 됩니다. 링크에서 target=”_blank”는 스크린리더에서 인지해서 새창으로 음성출력하기 때문에 굳이 사용하지 않으셔도 문제가 없습니다.
-------------------------------------------------------------------------------------------------------------------------
위 내용은 센스리더 프로페셔널 에디션 v1.2.0.4를 기준으로 Internet Explorer 8에서 확인된 내용이며
2010년 4월 12일 기준으로 작성되었습니다.
------------------------------------------------------------------------------------------------------------------------
Trackback URL : http://www.haeppa.kr/trackback/38
Trackback RSS : http://www.haeppa.kr/rss/trackback/38
Trackback ATOM : http://www.haeppa.kr/atom/trackback/38
당신의 의견을 작성해 주세요.