물론 일반 법인(주식회사)이 주체인 기업블로그, 특히 대기업 블로그라면 법적으로 장애인 웹 접근성을 준수해야 할 것이니, 이 부분에 대한 작업은 이미 되어 있을 것입니다. 아마도 저보다 더 실력좋은 웹퍼블리셔가 이 부분에 대한 작업은 미리 해 놨을 테지요. 저는 그런 기업블로그가 아닌 개인블로그를 운영하면서 장애인 웹 접근성을 준수하는 현실적인 방법에 대해 이야기하고자 합니다.


아쉽게도 제가 이번에 말하려는 이 부분은 티스토리 블로그에만 적용됩니다. 티스토리 블로그보다 네이버 블로그가 더 대중적이지만, 네이버 블로그는 jQuery를 지원하지 않으므로 다른 방법을 사용해야 합니다.(사실 네이버 블로그로는 현실적으로 장애인 웹 접근성을 지킬 수 없는 부분이 많습니다... 그런데 네이버가 이 부분을 보완해줄까요?) 아예 따로 계정에 워드프레스를 설치해서 블로그로 활용하는 경우도 있는데, 워드프레스의 경우는 기본적으로 장애인 웹 접근성 관련 옵션들을 지원하므로 제가 이 글에 적은 대로 따로 손댈 필요가 없습니다.




이번에는 블로그 이미지에 대체텍스트를 어떻게 넣을 것인가에 대해 이야기하고자 합니다.


티스토리의 기본 옵션에서는 이미지에 대체텍스트를 넣는 기능을 지원하지 않습니다. 또한 게시글을 일일히 다 바꾼다고 이미지에 대체텍스트가 들어가는 것도 아닙니다. 왜냐하면 티스토리 시스템상 일반적인 <img src=""> 태그를 사용하여 이미지를 삽입하는 방식이 아니기 때문입니다.




티스토리 이미지 들어가는부분


물론 기존의 이미지에 모두 대체텍스트를 넣는 작업을 하는 것은 지루하며, 이미 작성해 놓은 포스팅이 많다면 모든 이미지에 대체텍스트를 넣는 것은 거의 불가능한 작업입니다.


아마도 티스토리의 기본 설정대로 이미지 부분의 장애인 웹 접근성을 검사하면 이러한 결과를 보실 수 있을 것입니다.





( 위 그림에 사용된 장애인 웹 접근성 검사 툴 : Mozilla Firefox, N-WAX + Firebug )




문제는 alt를 정의하지 않는 것은 명백한 장애인 웹 접근성 위반이라는 점입니다. 그렇다고 현실적으로 모든 이미지에 alt를 넣을 수도 없고 티스토리가 이걸 지원하는 구조도 아니고...


이런 상황에서는 현실적으로 이 방법을 써야 합니다.




1. jQuery로 빈 alt를 생성시킵니다.


이미지(img 태그)에 alt값을 아예 설정하지 않으면, 스크린리더 등 장애인 보조기기가 오작동하여 이상한 값을 주저리주저리 하게 되니 alt값은 꼭 입력해야 합니다. 빈 alt를 생성시키면, 스크린리더기 등 장애인 보조기기들은 이미지를 인식하지 않고 그냥 넘어가게 됩니다. 그렇게 되면 장애인 웹 접근성을 지키는 것과 거리가 먼 것 아니냐? 라고 물으시겠지만, 다음 2번 항목에서 이에 대한 해결책을 제시하겠습니다.


기술적으로 jQuery로 빈 alt를 생성시키는 방법은 다음과 같습니다.


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

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

});


jQuery를 삽입하는 것이 익숙하지 않으시다면, skin.html의 <head>와 </head> 사이에 다음 구문을 포함시킵니다.


<script>

$(document).ready(function(){

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

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

});

});

</script>


대부분의 티스토리 스킨은 jQuery를 지원하기 때문에 이 부분을 따로 넣으실 필요는 없을 것이라고 생각됩니다만, 혹여나 jQuery를 지원하지 않는 스킨을 사용하고 계시다면 <head>와 </head> 사이에 다음 구문을 포함시켜야 합니다.


<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>




2. 이미지를 대체하는 text를 alt 속성이 아닌 일반 text로 넣는다.


1번과 같은 jQuery 코드를 활용하여 일일히 상황에 맞는 alt 속성을 집어넣는 것은 사실상 불가능합니다. 차라리 1번처럼 일괄적으로 빈 alt를 집어넣고, 그 대신 이미지를 대체하는 text를 alt 속성이 아닌 일반 text로 집어넣는 것이 더 현실적인 대책이지요.


실제로 이 방법은 회사 홈페이지를 대상으로 판매되는 외국의 유명 html 템플릿에서도 종종 쓰이는 방법이니, 이 방법의 장애인 웹 접근성 준수 여부에 대해 너무 걱정하실 필요는 없으십니다.



위 그림과 같이 핵심적인 부분만을 대체텍스트로 적어 주시는 게 좋습니다.


(해당 포스트 예시는 http://zoahaza.tistory.com/429 참고)






이 방법을 적용하고 장애인 웹 접근성 검사 툴을 사용한 결과는 다음과 같습니다.





이 부분은 제가 배포한 스킨의 최신버전 nQuark 1.2에 적용되어 있습니다. 따라서 제 스킨에 적용된 것을 분석해서 가져다 사용하셔도 무방합니다. 물론 스킨의 저작권은 저에게 있습니다만, 공익적인 일이니 마다할 필요가 없지요.


좀 더 따뜻한 세상을 만들자구요~ 장애인도 사용할 수 있는 웹환경을 위해~




+) 댓글의 제보 중에 티스토리 시스템상에서 대체텍스트를 넣을 수 있다는 제보가 있었는데 그게 사실이더군요. 위의 알고리즘은 대체텍스트가 없는 이미지만을 선택해서 빈 alt를 넣도록 수정되어야 할 것입니다. 수정된 코드는 다음과 같습니다.


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

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

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

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

};

});


이 코드에 대한 설명은 나중에 제 블로그에서 하겠습니다. 일단은 이 코드를 가져다 쓰시면 정상 동작할 것입니다.





댓글을 달아 주세요

  1. 2015.05.05 10:43  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. 2015.05.05 11:20  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 책덕후 화영 2015.05.05 11:26 신고  댓글주소  수정/삭제

      사실 글쓴이입니다 님이 제보해주신 내용은 제가 여지껏 티스토리 사용하면서 아예 몰랐던 기능이라 하마터면 놓칠뻔했습니다. -_-;;; 일단 수정된 코드를 먼저 올리고 그에 대한 설명은 나중에 해야 할 것 같습니다.

  3. 2015.05.05 13:24  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  4. 까칠양파 2015.05.05 17:35 신고  댓글주소  수정/삭제  댓글쓰기

    티스토리에서 알아서 만들어주면 참 좋을거 같네요.
    컴맹인 저는 읽어도 잘 모르겠어요.ㅜㅜ

    • 책덕후 화영 2015.05.05 20:29 신고  댓글주소  수정/삭제

      티스토리에서 알아서 되는 기능이었다면 장애인들이 티스토리 블로그 내용을 더 파악하기 쉬웠을테니 이런 소스코드는 필요가 없었겠죠. 사실 전 스킨제작자들이 이런 코드를 사용하는 것이 필요하다고 생각합니다만 지금까지 분석해본 바로는 이런 로직을 갖춘 스킨은 아직 눈에띄질 않네요...

  5. 씽이v 2015.05.08 21:17 신고  댓글주소  수정/삭제  댓글쓰기

    와웅 ㅋㅋㅋ 블로그까지 이런 배려를 ㅎㅎㅎ
    퍼블리셔군요!! 저는 웹디자인과 퍼블리셔를 겸하긴 하는데, 디자인쪽에 더 가깝게 일을해서,, ㅎㅎ 반갑습니다

    • 책덕후 화영 2015.05.08 22:16 신고  댓글주소  수정/삭제

      일반적인 회사들이 웹퍼블리싱보단 웹디자인에 비중을 더 많이 두는건 사실이죠. 웹에이전시가 아니면서도 퍼블리싱에 중점을 두는 우리 회사가 좀 특별한거구요... 사실 그건 그럴만한 이유가 있는게 우리회사는 디자인이 주력인 회사라서 웹디자인은 물론이고 편집디자인 등등 많은 디자인영역을 처리하는 능력있는 디자이너들이 따로 있답니다.

티스토리 툴바