웹 접근성을 논할 때마다 하나의 권고 사항으로 얘기되는 것이 바로 그림을 설명하는 대체 텍스트(alternative text)를 꼭 입력해 주라는 말이 있다. 이 alt 속성으로서의 올바른 사용 유형이라면, 그림의 성격에 따라 글자 형태의 로고 파일의 경우에는 간단하게 읽히는대로 써주면 될 것이고, 사진일 경우 전달하고자 하는 내용이나 상황을 설명해 주면 될 것이다.
원래 이 alt 속성에 지정되어 있는 텍스트는 브라우저의 그림 파일 표시 기능을 꺼주지 않는 한 그림 밖으로 보여질 수가 없는 운명이다. 하지만, 그림 밑에 주석을 달고자 할 경우, 이 대체 텍스트가 그 자리에 안성맞춤이 될 수 있지 않을까? 그래서, jQuery를 이용한 간단한 구현 방법을 소개하고자 한다.
먼저, 글에 올려진 주석을 달고자 하는 img를 찾고나서, alt 속성에 있는 대체 텍스트를 구해야 한다.
var targetImg = $'.entry img';var altText = targetImgattr'alt';
차후 CSS로 스타일의 정의를 쉽게 하기 위해서 특정 class 값이 주어진 div으로 감싸주는 것이 편할 것이다. 그리고 나서, 그림 밑에 달릴 주석을 위한 공간을 마련해준다. 여기에는 다음과 같은 방법이 사용될 수 있다:
targetImgwrap'<div class="img-with-description"></div>'after'<span class="img-description">' + altText+'</span>';
여기서 하나 고려해봐야 할 것이, 만약 그림이 글 내용 중에서 float되어 있는 상태라면, 이를 감싸고 있는 div도 같이 float되게 해주어야만 원래 의도한 그림 표시 스타일을 유지할 수 있다. 그래서, img의 float 속성과 너비값을 알아내야 한다.
var imgWidth = targetImgwidth;var floatProperty = targetImgcss'float';
이렇게 해서 얻어진 float 속성을 가지고 그대로 이 속성값을 감싸는 div에도 적용해 준다. 만약, float 속성이 ‘none’이라면 그림 파일은 중앙 정렬된 상태라고 가정할 수 있고, 따라서 감싸는 div도 margin 값으로 중앙 정렬해준다.
var descriptionImage = $'div.img-with-description';iffloatProperty == 'none' // aligned centerdescriptionImagewidthimgWidthcss'margin' '0 auto';elsedescriptionImagewidthimgWidthcss'float' floatProperty;
마지막으로, 감싸주는 div과 주석 부분을 위한 적당한 CSS를 정의해주면 되겠다.
이렇게 해서 완성된 코드는 아래의 페이지에서 확인할 수 있다:
➡ img 속 alt 속성에 있는 내용을 그림 밑으로 끄집어내어 표시해주는 본보기 페이지
alt 속성의 색다른(alternative) 봄나들이 외출. 
