웹 접근성을 고려한 대체 텍스트 처리

이미지를 백그라운드 처리 후에 텍스트로 이미지에 대한 대체 텍스트가 필요한 경우나 시각적인 요소를 설명하기 위한 대체 텍스트가 필요한 경우에 그 대체 텍스트를 시각적으로는 감추고자 할때 사용하는 CSS 소스입니다.

.a11y-hidden {
  overflow: hidden;
  position: absolute;
  clip:     rect(0 0 0 0); /* IE 6,7 */
  clip:     rect(0,0,0,0);
  width:    1px;
  height:   1px;
  margin:   -1px;
  border:   0;
  padding:  0;
}

.a11y-hidden.focusable:focus {
  overflow: visible;
  position: static;
  clip:     auto;
  width:    auto;
  height:   auto;
  margin:   0;
}

* a11y 는 accessibility를 의미합니다.

위와 같은 CSS 코드 작성후 대체 텍스트에 a11y-hidden 이라는 클래스명을 주게되는데, 이때 주의할 점은  a11y-hidden 클래스를 적용할 요소가 table에 caption일 경우입니다.

아래와 같은 border-collapse: collapse 가 적용된 table의 caption에 위와 같은 CSS를 적용시키면,

표만들기 샘플 Caption

제목	내용
제목	내용
제목	내용

아래 상황과 같은 border가 한줄 생기는 문제가 발생합니다.

표만들기 샘플 Caption

제목	내용
제목	내용
제목	내용

따라서 border-collapse:collapse 가 적용된 table의 caption의 경우에는 아래와 같이 position: static을 추가합니다.

caption.a11y-hidden {
  position: static;
}