텍스트 숨기기

텍스트를 숨기는 방법

1. display: hidden

텍스트를 숨기는데 가장 많이 사용되는 display: hidden의 경우 가시적으로 표시가 되지 않지만, 보조기기에도 정보를 전달하지 않도록 처리가 됩니다.

2. visibility: hidden

visibility: hidden는 가시적으로는 숨기처리가 되지만 요소가 영역만큼 자리를 차지하고 있는다. 가끔 position: absolute과 함께 사용해 자리도 차지하지 않도록 해 숨김처리를 하는데 사용하기도 하지만 이 역시 스크린리더가 해당 정보를 사용자에게 전달하지 않게 됩니다.

3. text-indent

text-indent: -9999px와 같이 CSS의 들여쓰기 기능을 이용해 텍스트를 보이지 않게 할 수도 있다. 하지만 이경우 CSS도 검색을 하는 구글 알고리즘 같은 경우 해당 기법을 스팸으로 분류를 하기 때문에 권장하지 않으며, 검색 엔진 최적화에 좋지 않은 영향을 미치게 됩니다.

4. zero pixel sizing

width나 height을 0으로 만들어 숨기는 경우도 있다. 이경우 NADA 및 VoiceOver로 테스트를 했을 경우 읽히지만 ios에서 VoiceOver로 초점을 이동시켜보면 초점이 잡힙니다. 결국 빈 객체에 초점을 일으키기 때문에 사용자들에게 혼돈을 유발할 수도 있습니다.

5. opacity: 0

opacity: 0을 통해 시각적으로 내용을 숨기는 경우 대화형 요소의 경우 마우스 포인터가 반응하는 문제가 발생하며 VoiceOver는 이를 읽어주지 않아 접근성 측면에서 좋지 않습니다.

6. clip사용

.hidden {
  overflow: hidden;
  position: absolute;
  border: 0;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

앞서 zero 픽셀 사이즈의 문제를 피하기 위해 가장 근접하게 수렴가능한 1px을 사용하고 screen out 기법으로 인한 black hat을 피하기 위해 고안된 방법입니다.

하지만 이 경우 position:absolute를 적용함으로써 블록요로 변경되는 문제접을 가지고 있습니다. 한문단내에서 inline formatting context(이하 IFC)로 전달되어야 하는 정보에 이 스타일을 적용하게 되면 BFC로 변경되어 분리가 일어나게 되는 것입니다. 따라서 한번에 전달해야하는 문맥이 끊어지는 일이 발생해 스크린리더로 읽게 되면 마치 div요소로 묶어놓은 것 마냥 끊어읽게 되는 일이 발생합니다.

7. 접근가능한 숨김방법(1)

.hidden {
  overflow: hidden;
  border: 0;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px); // for legacy browsers
  clip-path: inset(50%);
}

결국 문맥까지 고려해본다면 위와 같이 position을 덜어내고 clip의 최신표준을 사용해야 합니다.

하지만 이렇게 할 경우, phrasing contents는 IFC를 가지기 때문에 width, height를 가질 수 없고 더구나 이를 가진다 하더라도 1px 만큼의 자리를 차지하게 되는 문제가 또 발생됩니다.

이 문제는 display: inline-block을 통해서 해결할 수 있습니다.

.hidden {
  overflow: hidden;
  display: inline-block;
  border: 0;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px); // for legacy browsers
  clip-path: inset(50%);
}

하지만 이 역시 완벽하지는 않습니다. 1px만큼 자리를 차지하는 것을 해결해야하기 때문입니다. 이경우 position값을 relative 또는 absolute로 주고 top/left/z-index를 조작하는 방법과, margin을 음수로 조작하는 방법이 있습니다.

하지만 margin을 음수로 주는 경우 VoiceOver에서 읽기 순서에 변형이 일어나는 이슈가 보고 되었다고 하기에 권장하지 않습니다.

또한 position값을 relative 또는 absolute 한 후 top/left를 조작하는 경우 주변 요소에 영향을 주기에 z-index를 사용해 보완할 수 있습니다.

7. 접근가능한 숨김방법(2)

.sr-only {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  white-space: nowrap;
}

• position: absolute; → 위치를 지정함. 위로 붕 뜬 상태가 되어 뒤에 오는 요소들의 자리를 차지하지 않게 됨
• width: 1px; → 가로크기
• height: 1px; → 세로크기
• overflow: hidden; → 현재 크기 이상의 영역은 모두 감춤
• padding: 0; → 부풀리는 영역을 없앰
• margin: -1px; → 벌리는 영역을 오히려 더 좁힘
• border: 0; → 테두리를 없앰
• clip: rect(0,0,0,0); → 보여지게 하는 부분을 설정하는 것인데, 모든 값이 0 이므로 결국 보여지는 부분이 없음

참고자료

접근 가능한 숨김 텍스트