[CSS] 화면에서 대체 텍스트를 숨기는 방법

대체 텍스트는 화면에 직접 보여서는 안 되지만, 스크린 리더는 인식할 수 있어야 한다. 어떻게 할까?

화면에서 숨기라고? 

/* BAD */
visibility: hidden;
display: none;
width: 0; 
height: 0; 
font-size: 0; 
line-height: 0;

화면에서 숨겨야 한다는 말에 그만 스크린 리더가 대체 텍스트를 인식하지 못하게 돼버렸다. 곤란하다.

숨기지는 않되 보이지만 않게 하자

/* 그닥.. */
opacity: 0;
text-indent: -99999px;
z-index: -1;

뭐.. 안 되는 건 아니지만 예상하지 못한 문제가 발생할 수 있다.

 

``opacity: 0``를 사용하면 텍스트가 투명해지긴 하지만 페이지에서 공간을 차지하고 있으며, 텍스트의 투명도를 조절하는 과정에서 성능이 떨어질 수 있다.

 

``text-indent: -99999px``를 사용하면 전체 요소의 크기가 너무 크게 잡혀서 성능이 떨어질 수 있다. 100% 또는 -100%로 설정하면 되긴 하지만, 대체 텍스트가 2줄 이상인 경우 첫 줄을 제외한 나머지 줄이 그대로 노출된다.

 

``z-index: -1``를 사용하면 ``position: absolute``가 있어야만 사용할 수 있다. 텍스트가 길어질수록 성능에 더 많은 영향을 미치게 된다.

이렇게 하자

스크린 리더가 인식할 수 있는 동시에 레이아웃과 성능에 영향을 미치지 않는 코드이다.

.blind {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

<span class="blind">어떤 대체 텍스트</span>

``clip``은 네 개의 좌표(위, 오른쪽, 아래, 왼쪽)로 지정한 직사각형 모양대로 요소를 자른다. 지정한 좌표 안쪽만 보이도록 마스크를 씌운다고 생각하면 된다. ``clip``을 사용하려면 ``position``을 ``absolute`` 또는 ``fixed``로 지정해야 한다. 기본값은 ``auto``이다.

clip - CSS: Cascading Style Sheets | MDN

``width``와 ``height``를 1px로 작성하여 요소를 화면에 최대한 보이지 않게 하였다. 위에서 말했듯이 0px로 작성하면 스크린 리더가 읽을 수 없다.

 

``margin: -1px``와 ``overflow: hidden``을 조합하여 요소가 화면에 보이지 않도록 하였다. ``width``와 ``height``가 모두 1px임을 기억하자.