평소 img에다 필수도 아닌 title attribute을 사용하는 일은 거의 없었고 또 그래야 할 동기도 없었다. 그림에 대한 설명은 alt로도 충분하다고 생각했기 때문이다.

그런데 무조건 모든 그림과 관련된 정보를 alt의 속성으로 묶어서 쓰기엔 무리가 있고 가끔 간단한 그림의 보충 설명이나 제목은 alt보단 title 속성을 써주는 것이 더 적절한 때가 있단다.

alt 속성은 필수 요소로서 그림을 대체하는 내용이 들어가는데, 보통 그림이 없다고 가정했을 때 앞뒤 문맥을 자연스럽게 연결하는 내용을 대신 써주는 게 좋다. 그리고 간혹 생략 시에도 앞뒤 문맥이 자연스럽게 연결되면서 내용을 전달하는데 별 지장이 없다면 그냥 공백으로 놔두는 것도 가능하다. img를 위한 alt 그리고 title의 쓰임새 비교(이)란 제목의 글 마저 읽기 →

웹 접근성을 논할 때마다 하나의 권고 사항으로 얘기되는 것이 바로 그림을 설명하는 대체 텍스트(alternative text)를 꼭 입력해 주라는 말이 있다. 이 alt 속성으로서의 올바른 사용 유형이라면, 그림의 성격에 따라 글자 형태의 로고 파일의 경우에는 간단하게 읽히는대로 써주면 될 것이고, 사진일 경우 전달하고자 하는 내용이나 상황을 설명해 주면 될 것이다.

원래 이 alt 속성에 지정되어 있는 텍스트는 브라우저의 그림 파일 표시 기능을 꺼주지 않는 한 그림 밖으로 보여질 수가 없는 운명이다. 하지만, 그림 밑에 주석을 달고자 할 경우, 이 대체 텍스트가 그 자리에 안성맞춤이 될 수 있지 않을까? 그래서, jQuery를 이용한 간단한 구현 방법을 소개하고자 한다.

먼저, 글에 올려진 주석을 달고자 하는 img를 찾고나서, alt 속성에 있는 대체 텍스트를 구해야 한다.

var targetImg = $('.entry img');
var altText = targetImg.attr('alt');

차후 CSS로 스타일의 정의를 쉽게 하기 위해서 특정 class 값이 주어진 div으로 감싸주는 것이 편할 것이다. 그리고 나서, 그림 밑에 달릴 주석을 위한 공간을 마련해준다. 여기에는 다음과 같은 방법이 사용될 수 있다:

targetImg.wrap('<div class="img-with-description"></div>').after('<span class="img-description">' + altText+'</span>');

여기서 하나 고려해봐야 할 것이, 만약 그림이 글 내용 중에서 float되어 있는 상태라면, 이를 감싸고 있는 div도 같이 float되게 해주어야만 원래 의도한 그림 표시 스타일을 유지할 수 있다. 그래서, img의 float 속성과 너비값을 알아내야 한다.

var imgWidth = targetImg.width();
var floatProperty = targetImg.css('float');

이렇게 해서 얻어진 float 속성을 가지고 그대로 이 속성값을 감싸는 div에도 적용해 준다. 만약, float 속성이 ‘none’이라면 그림 파일은 중앙 정렬된 상태라고 가정할 수 있고, 따라서 감싸는 div도 margin 값으로 중앙 정렬해준다.

var descriptionImage = $('div.img-with-description');
if(floatProperty == 'none') // aligned center 
  descriptionImage.width(imgWidth).css('margin', '0 auto');
else
  descriptionImage.width(imgWidth).css('float', floatProperty);

마지막으로, 감싸주는 div과 주석 부분을 위한 적당한 CSS를 정의해주면 되겠다.

이렇게 해서 완성된 코드는 아래의 페이지에서 확인할 수 있다:
➡ img 속 alt 속성에 있는 내용을 그림 밑으로 끄집어내어 표시해주는 본보기 페이지

alt 속성의 색다른(alternative) 봄나들이 외출.