이미지에 대한 alt 태그 사용과 alt=”” 버그

센스리더는 웹페이지내의 이미지에 대해 기본적으로는 파일명을 음성출력합니다. 하지만 파일명만으로는 해당 이미지에 대한 정보를 정확히 알 수 없기 때문에 alt 태그의 정보를 활용하게 됩니다. 이미지에 대해 alt 태그로 정보를 넣어줄 경우 스크린리더는 해당 내용을 파일명 대신 음성출력하게 됩니다.



이미지의 alt 태그 유무에 따른 음성출력 예
<img src=”sub_g01.gif”>
<img src=”sub_go1.gif: alt=”전송”>
sub_g01.gif 이미지
전송 이미지


alt 태그의 정보를 활용해 음성출력하면 모든 이미지에 대해 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 이후 수정되었습니다.


센스리더 프로 v1.2.0.3 버그 (v1.2.0.4 이후 수정)
<img src=”sub_g01.gif”>
<img src=”hor_line01.gif” alt=””>
<img src=”sub_go1.gif: alt=”전송”>
sub_g01.gif 이미지
이미지
전송 이미지


이미지를 링크로 사용하는 경우가 많은데 이에 대한 음성출력은 다음과 같습니다.


이미지 링크에서 alt와 title
<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일 기준으로 작성되었습니다.
------------------------------------------------------------------------------------------------------------------------

2010/04/12 14:15 2010/04/12 14:15
해빠 이 작성.

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


당신의 의견을 작성해 주세요.

[로그인][오픈아이디란?]
: 1 : ... 80 : 81 : 82 : 83 : 84 : 85 : 86 : 87 : 88 : ... 117 :