*** 이 포스팅은 이전 포스팅 [ 티스토리 개인블로그로 장애인 웹 접근성을 준수하는 방법 (1) ] 을 보완하는 내용입니다. ***


제 블로그에 달린 댓글 중에 중요한 내용이 있었습니다.


바로 티스토리 시스템상 이미지에 alt속성을 넣는 것이 가능하다는 것이었습니다.



에디터에서 삽입될 그림을 선택하면 오른쪽에 나오는 메뉴 중에 대체텍스트를 넣는 부분이 있습니다.


하지만... 현실적으로 이 기능을 사용하여 기존에 대체텍스트가 없던 모든 이미지를 전부 대체텍스트를 넣을 건 아니지 않습니까? 솔직히 모든 이미지에 대체텍스트를 일일히 다 넣는 건 장애인 웹 접근성을 준수하는 최선의 방법이지만 현실적으로는 거의 불가능합니다.


문제는 티스토리는 대체텍스트를 넣지 않은 이미지를 alt처리를 아예 안한다는 것입니다. alt처리가 아예 안 되어 있는 이미지는 장애인 웹 접근성 위반입니다.


따라서 장애인 웹 접근성을 위해서는 대체텍스트가 들어가지 않은 이미지를 골라내어 빈alt로 처리할 필요성이 있습니다.


이 것을 구현하는 jQuery 로직은 다음과 같습니다.


$(".imageblock img").each(function(){

var $imgvar = $(this).attr("alt");

if( typeof $imgvar == "undefined" ){

$(this).attr("alt", "");

};

});


이전 로직과 비교하면 분명한 차이점이 있습니다. (아래 : 이전 로직)


$(".imageblock img").each(function(){

$(this).attr("alt", "");

});


이전 로직은 모든 이미지에 빈 alt를 넣는 반면, 새로운 로직은 alt값을 검사하여 alt값이 없는 이미지만을 빈 alt를 넣도록 개선되었습니다.


따라서 새로운 로직이 장애인 웹 접근성을 더 잘 반영한다고 할 수 있습니다. 왜냐하면 alt값이 필요한 이미지는 alt값을 표시해주는게 장애인 웹 접근성상 맞는 얘기이기 때문입니다.


혹여나 jQuery를 넣는 것이 익숙하지 않으시다면 <head>와 </head> 사이에 다음 구문을 넣습니다.


<script>

$(document).ready(function(){

$(".imageblock img").each(function(){

var $imgvar = $(this).attr("alt");

if( typeof $imgvar == "undefined" ){

$(this).attr("alt", "");

};

});

});

</script>




이 부분은 제 스킨 nQuark1.2에 아직 반영되지 않았습니다. 다음 버전에서 반영할 예정이니 기다려주세요.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 달빛천사7 2015.05.29 11:56 신고  댓글주소  수정/삭제  댓글쓰기

    나도 강좌를 보아야 되는데 한개도 안보게 되네여 1년치 수강체험인데 ㅎㅎ.

  2. 귀여운걸 2015.05.31 01:33 신고  댓글주소  수정/삭제  댓글쓰기

    오호~ 덕분에 많이 배워갑니다..
    잘 사용해봐야겠어요^^

  3. CRISP_SURPLUS 2015.07.05 21:11 신고  댓글주소  수정/삭제  댓글쓰기

    항상 "장애인 웹 접근성" 이라고 레퍼런스하시던데, 공식 명칭상 "웹 접근성"이 맞지 않을까 싶습니다. alt attr의 값은 단순히 보이스오버 등의 기능에만 사용되는 것이 아니라, CSS나 이미지 등 GUI가 없는 인터페이스에서 text-only 페이지를 보여줄 때도 쓰이거든요.

    • 책덕후 화영 2015.07.05 21:45 신고  댓글주소  수정/삭제

      저도 그 부분은 엄밀히 말하면 웹 접근성이란 표현이 더 맞지않나 생각합니다. 하지만 장애인 웹 접근성에 포함되는 부분인 것도 사실이고 해서 두 표현 모두 틀리지는 않은 말인 듯 합니다. 무엇보다도 글자가 하나 더 많아지는게 검색엔진에 더 잘 걸려서 나중에 검색할 때 유리하기도 하지요 ^^;

티스토리 툴바