웹 접근성을 고려한 텍스트 숨기기

📌 웹 접근성을 고려해 텍스트 숨기는 방법

📍 text-indent의 경우, a태그나 html5에서의 대화형 요소들(a, button, details, embed, iframe, keygen, label, select, textarea)에서 초점을 document 바깥에서 잡아버리는 문제점이 있다. 보이지 않는 곳에 초점이 가는 것은 접근성에 위배되기 때문에 부적합하다.

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

📍 스크린리더가 읽어줄 수 있게 최소한의 너비와 높이(1px)를 가진다. clip 속성은 position 값이 absolute나 fixed 일 때만 사용 가능하다. 또한 css2에서 사용되던 속성이기 때문에, 최신버전인 clip-path도 넣어준다.

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

❗️ 하지만 position:absolute는 해당 컨텐츠를 block 속성으로 바꿔버리는 특성이 있기 때문에 컨텐츠의 '부분숨김'을 할 때에 문제가 있다.

<span>
   text<span class="hidden">부분숨김처리부분</span>
</span>

📍 위와 같은 코드를 작성 할 때, 스크린리더는 hidden 부분을 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%);
}