[css 활용] 텍스트/컨텐츠 숨김처리

흔히들 말하는 offscreen class 혹은 hidden 클래스, caption 숨김처리 등을 실무에서 많이 사용하고 있다.

숨기게 만드는 거야 어렵지 않지만, 접근성을 고려한다면 이게 맞는건지, 제대로 쓰고있는지 모르고 사용하는

경우도 많다.

 

IR기법을 사용하여 숨김처리를 할 때에, 보통 이런 방식을 많이 사용한다.

 

.offscreen{
    position:absolute;
    top:-9999px;
    left:-9999px;
    text-indent:-9999px;
    width:1px;
    height:1px;
}

하지만 위와같은 방법은 접근성에서 문제를 일으킨다.

text-indent의 경우, 앵커태그(<a href="~">)나 html5에서의 대화형 요소들 에서 초점을

document 바깥에서 잡아버리는 문제점이 있다.

 

보이지 않는곳에 초점이 가는것은 접근성에 위반이 되는 문제이기에, 숨김텍스트를 사용하고자 할 때에, 부적합하다.

 

때문에 아래와 같은 방법을 사용한다.

.offscreen{
    position:absolute;
    overflow:hidden;
    border:0;
    width:1px;
    height:1px;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path:inset(50%);
}

스크린리더가 읽어줄 수 있게 최소한의 너비와 높이를 가진다.(0은 읽어주지 않아요..)

clip 속성은 position 값이 absolute나 fixed 일 때만 사용 가능하다.

또한 css2에서 사용되던 속성이기 때문에, 최신버전인 clip-path 도 같이 넣어주었다.

 

하지만 이 또한 컨텐츠의 '부분숨김' 을 할 때에 문제가 있다.

position:absolute는 해당 컨텐츠를 block 속성으로 바꿔버리는 특성이 있다.

 

예를들어

<span>
   테스트입니다<span class="offscreen">숨김처리부분</span>
</span>

위와 같은 코드를 작성 할 때, 스크린리더는 offscreen 된 부분을 block element로 인식하여 읽게 될 것이다.

때문에 inline 요소를 숨김처리 할 때에는 position 값을 걷어내고 display 속성을 조절해 주어야 한다.

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