준비 중인 포스트에 쓸 아서 클라크 경(Sir Arthur C. Clarke) 사진을 찾아 헤매다가 문득 깨진 이미지 링크를 발견하고 영감을 얻어, 혹시나 싶어 이 포스트를 써보기로 했습니다. 이름하여 'image disabled' 체크하기.
우선, shut up 하고 사이트 테스트부터 시작하겠습니다. 모두 Internet Explorer 6에서 테스트했습니다.
예상보다 결과가 훨씬 좋군요. 이미지를 사용할 수 없어도 (적어도 탑 페이지 만큼은) 거의 모든 컨텐츠를 구별하고 접근가능했습니다. NAVER나 야후 같은 경우에는 alt 처리 되지 않은 이미지 중 몇몇이 중요한 역할을 하는 부분이라 기능상 문제가 발생했지만, DAUMDaum 같은 경우는 거의 완벽하군요.
오늘의 핵심(Today's point)
CSS 2.1 규약의 background-image 부분에는 다음과 같이 기술되어 있습니다.
When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).
배경 이미지(background-image)를 사용하게 되면, 반드시 배경 이미지가 표시되지 않을 때를 대비한 배경색을 같이 기술하라
는 강조구문(should)입니다. 위의 사이트들 중 NAVER와 DAUMDaum의 상단에 위치하는 색상박스(NAVER는 green, Daum은 blue)가 인용문에 해당된다고 볼 수 있겠지요.
우리에게 Web Standards Solutions이라는 저서로 잘 알려진 댄 씨더홈(Dan Cederholm)이 운영하는 simplebits.com의 경우에도 이런 원칙을 잘 지키고 있는 것을 알 수 있습니다.
그렇다면 꼭 이런 원칙을 지켜야만 하는가 하고 의문을 제기하시는 분이 계실 것이라 짐작합니다. 아래에 준비된 사이트 스크린샷을 보시겠습니다.
우아한 디자인으로 유명한 apple.com입니다. 그 우아함의 기반이 되는 이미지들을 없애버렸더니 우측처럼 되는군요. 같은 페이지라는 것이 믿어지시나요? 상단 메뉴바의 배경 이미지가 사라지면서 메뉴의 글자색과 배경색이 같아지는 바람에 전혀 구분이 되지 않는padding-top을 늘려 텍스트를 overflow 영역 밖으로 밀어내버려 아무 것도 남지 않은 상황입니다. 위의 CSS 2.1의 인용문은 바로 이런 상황에 대비하라는 의미입니다.
좀더 깊게 생각해보자면, 중요한 컨텐츠를 display="none"이나 text-indent의 값을 마이너스로 할당해 화면에서 아예 지워버리는 방법에 대한 고민이 필요한 부분입니다. apple.com의 코딩 담당자가 이런 고민을 했는가 여부는 저로서는 알 수 없지만, 위에서 느껴지는 고민의 흔적은, 메뉴의 경우 배경을 쓰려면 필연적으로 float 속성을 사용해야 하는데, 이것을 쓰기 위해 display="block"을 회피해 보려는 집요한 시도에 대한 것뿐입니다.
기술적인 면에서 전혀 어려울 것이 없지만, 마인드가 되어 있지 않으면 놓치기 쉬운 부분입니다. Apple이 돈이 없어서 웹 표준을 간과했다고 보기는 어려울테니까요. 웹 표준은 전술이고, 웹 접근성은 전략입니다. 전략을 깨닫지 못하는 자에게 전술은 그저 하나의 테크닉에 불과할 뿐입니다. 오늘도 명심, 또 명심합시다.
- Web Standards Solutions
- 국내에는 실용예제로 배우는 웹 표준이라는 제목으로 번역되어 있습니다.