이미지에는 대체 텍스트를 꼭 사용합시다.
Posted 2007/12/20 09:30, Filed under: Web StandardsBlackJack이 주머니에 들어온 이후로 지하철이나 버스에서도 RSS를 구독할 수 있게 되었습니다. 그렇다고 제가 항상 온라인에 접속해 있다는 것은 아니고요, 집이나 회사의 Wi-fi를 이용해 최신 글들을 미리 클립해 두었다가 이동시간 중에 틈틈히 확인하는 식으로 사용하고 있습니다. 아무리 3G망으로 접속할 수 환경이 마련되었다고 한들 그 비용이 후덜덜하기 때문이죠. 약간은 원시적인 방법입니다. 큿-
나름대로 이게 어디야~ 라며 만족하면서 사용하고 있습니다만, 역시나 불편한 점을 얘기하지 않을 수가 없습니다.
플래시? 동영상? 아직 이런 것 까지는 바라지도 않습니다. 하지만 이미지라면 얘기가 달라지죠.
지금은 News Break라는 어플리케이션을 사용하고 있는데 요놈은 페이지를 직접 열어야만 이미지를 불러오는 식이라서 온라인 상태가 아닐경우에 나타나는 이미지들은 모두 엑스박스로 나타납니다. 불필요한 패킷을 줄이기 위해 이렇게 설계가 된듯하지만 저의 사용 방식과는 궁합이 맞질 않아서 문제가 생기지요.
여기서 제가 하고 싶은 얘기는 프로그램이 못났다가 절대 아닙니다. 다만 컨텐츠를 생산하는 사용자들(e.g. 블로거)이 웹 접근성을 고려치 않고 제작한다 라는 점이 아쉬울 따름 입니다. 이게 뭔 뚱딴지 같은 소리냐면,
<img src="./ybody.jpg" />
이미지는 경우에 따라서 보일 수도 있고 안보일 수도 있다고 생각합니다만 단순히 이렇게만 작성된다면 그 이미지를 볼 수 없는 사용자들은 소외를 받게 되고, 서로의 소통에 문제가 생기게 됩니다. 어쩔 수 없이 그냥 그 곳에 어떠한 이미지가 있고, 문맥상 이러이러한 이미지가 들어갈 것이라고 추측만 하게 될 뿐이죠.
이미지가 안보이는데 그걸 어쩌라고요?
이미지 태그에는 대체 텍스트를(alternative text) 지정할 수 있는 속성이 있습니다.
엘리먼트 내에 alt="대체 텍스트 내용" 과 같은 방법으로 사용할 수가 있죠.
<img src="./ybody.jpg" alt="유재석의 근육" />
이미지를 볼 수 없는 환경이라도 이미지를 대신한 대체 텍스트를 볼수가 있어 내용을 이해하는데 많은 도움이 됩니다.
하지만 대부분의 사용자가 위지윅에디터를 사용하고 있고, 코드만 보면 울렁증을 호소하는 분들이 많기 때문에 이런 배려까지는 나에게는 무리 라고 생각하시는 분들도 계실 텐데, 다행히도 텍스트큐브(태터툴즈), 티스토리에는 이미지 옵션에 대체 텍스트 입력 칸이 존재합니다.
이미지를 본문에 추가하고 선택(본문에 삽입된 이미지 클릭)하면 우측에 대체 텍스트를 입력할 수 있는 항목이 나옵니다. 이 곳에 이미지를 대체할 수 있는 설명을 달아두면 대체 택스트를 쉽게 달수 있게 되는거죠.
일전에 어떤 사람이 '뭐 하러 귀찮게 이미지에 일일이 대체 텍스트를 달고 있는가?'
라고 물었던 적이 있는데, 확실히 그것은 잘못된 생각이라고 말하고 싶습니다. 단순히 눈에 보여지는 결과를 원한다면 이러한 노력은 삽질이 되고 말겠지만 시력이 불편하여 스크린 리더에 의지하며 인터넷을 사용하는 사람들이나 저처럼 이미지가 보이지 않는 환경에서 접속해 있는 사용자들의 입장을 헤아릴 수 있다면 그것만으로도 충분히 의미가 있는 일이니까요.