스크린리더 미 사용자를 위한 <img> title 추가 스크립트

들어가기

'한국형 웹 콘텐츠 접근성 지침 2.0(이하 "지침2.0)' 에서는 img의 대체 텍스트를 alt로 제공할 것을 명시하고 있습니다.
그런데 어떤 경우 우리는 alt 대신 title만 혹은, alt와 title을 모두 사용하고 싶을 수도 있습니다.
하지만 이 방법은 세가지 단점을 지니고 있습니다.

1. 익스플로러 기준, img 비활성화 시 title로 작성된 대체텍스트는 화면에 표시되지 않습니다.
2. 일부 보조기기는 alt와 title을 중복으로 제공할 시, 둘 중 하나를 무시합니다.
3. alt와 title을 중복으로 제공할 시, 두 값을 모두 동일하게 지정하지 않는 경우가 발생합니다. 이것은 2번의 경우에 빗댈 경우 사용자의 스크린리더에 따라 서로 다른 대체텍스트를 제공받을 수 있다는 의미가 됩니다.

지침2.0 의 권고사항처럼 alt 대체텍스트만 제공하면 위의 단점을 쉽게 극복할 수 있습니다.
하지만 우리는 스크린리더 사용자를 만족시키기 위해서 일반 사용자를 불편하게 만들어서는 안 됩니다. 실제로 title 속성은 인접한 보충텍스트가 없는 경우, 일반 사용자에게 img와 관련된 유용한 마우스툴팁을 제공해 줍니다. 그런데 스크린리더에 대한 대응만 고려하다 보니 이렇게 유용한 기능을 부지불식 간에 배제하기도 합니다.

해결방법

해결방법을 알아보기 전에 우리는 먼저 한가지를 전제해야 합니다.
일반 사용자는 모두 '마우스'를 이용하고 있을 것이라는 전제입니다. 사실 이 전제는 모바일 터치 디바이스에 대한 대응에 있어 한계를 갖고 있습니다.
그렇지만 모바일 터치 디바이스에 대한 대응은 아직은 고민이 더 필요한 대목이라고 판단, 우선은 보류하겠습니다. 이 이슈에 대한 좋은 해결책을 갖고 계신 분은 댓글이나 whitedot@sir.co.kr 로 언젠든 의견 주세요. 성실히 수렴하겠습니다.

다시 본론으로 돌아와서, 마우스를 이용하는 일반 사용자를 위해, 우리는 지금부터 자바스크립트를 이용하여 a 요소로 감싸여진 img 요소에 동적으로 title 속성값을 부여할 것입니다. (마우스오버 시) 그리고 다시 title 속성값을 제거하기도 할 것입니다. (마우스아웃 시)

이 기능을 구현하려면 jquery 가 필요합니다.

관련소스, js/common.js

$(function() {
    $('a img').mouseover(function() {
        $a_img_title = $(this).attr('alt');
        $(this).attr('title', $a_img_title);
    }).mouseout(function() {
        $(this).attr('title', '');
    });
});

스크린샷

자바스크립트 적용 전

마우스 커서가 그래픽 링크 위로 올라가도 아무런 반응이 없습니다.

자바스크립트 적용 후

마우스 커서가 그래픽 링크 위로 올라가면 툴팁텍스트가 표시됩니다.