텍스트 숨김 처리
퍼블리싱 작업을 하다보면 웹 접근성에 맞추어 텍스트를 숨겨야 할 때가 있다. 이미지에 대체 텍스트를 넣어야 하는 경우나 텍스트가 필요한 이미지 등이 이에 해당된다. 일단 텍스트를 숨기는 방법을 몇 가지 소개해보겠다.
📌 텍스트 숨기는 방법
1. display:none;
.hidden{
display: none;
}이렇게 display: none; 을 해주면 아얘 영역에서 사라지게 되어버린다. 즉, 화면에서만 사라지는 것이 아니라 보조기기등이 접근하지 못함으로써 이는 접근성을 고려하지 못한 숨김 방법이 되는 것이다.
접근성에 위배되는 대표적인 예이지만 이를 간과하고 써버리는 경우가 많다. none은 접근성을 생각한다면 절대 사용하면 안되는 것이다!
2. visibilty 사용
.hidden{
visibility: hidden;
}visibility 역시 보여지지 않도록 해주지만 얘는 1번에서 설명한 none 과는 다르게 영역을 차지한다.
그러나 이것 역시 스크린 기기에서 읽히지 않으며 당연히 접근성에 위배된다.
3. text-indent 사용
.hidden{
text-indent: -9999px;
}가장 많이 사용되는 방법이다. 이것은 CSS의 들여쓰기 기법으로 들여쓰기를 이용해 텍스트를 밀어서 숨기는 것이다. 이 떄에는 스크린 리더기에도 읽히고 영역도 차지해준다.
그렇다면 이렇게 하면 될까? 아니다. 이렇게 처리해주면 초점이 문서 바깥으로 나가버리는 이슈가 생긴다. 따라서 정확한 위치를 표시할 수 없으며 검색엔진 최적화에 안좋은 영향을 미치게 된다.
4. 크기를 zero로 만들기
.hidden{
width: 0;
height: 0;
font-size: 0;
line-height: 0;
}이렇게 모든 요소의 크기를 0으로 만들어버리면 역시 화면에 보여지지 않는다. 그러나 일부 스크린 리더는 이렇게 했을 때에 인식을 못하는 경우가 발생한다고 한다.
그렇다면 얘도 탈락이다 😥
5. opacity 이용
.hidden{
opacity: 0;
}이 방법은 불투명도를 이용하여 숨기는 방법인데, 이것 역시 일부 스크린 리더가 읽지 못하는 이슈가 생긴다고 한다.
📌 접근성을 고려한 방법?
이쯤되면 접근성을 고려하여 숨기는게 거의 불가능해보였다. 그러나 마지막으로 접근 가능한 숨긴 방법을 찾았다!
👉 clip을 이용하자!
.hidden{
overflow: hidden;
position: absolute;
border: 0;
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);
}일단 clip-path 는 지정된 클리핑 범위의 바깥 부분을 숨겨주는 속성이다.
이는 앞에서 본 문제들을 해결해주는 가장 접근성에 근접한 코드일 것이다. zero를 사용하지 않고 width를 1px로 하여 사라지지 않도록 해주었다.
그러나 한 가지, 여기에서도 문제가 있었다. 바로 abolute 로 인해 영역의 문제가 되는 것이다. 그렇다면 abolute 를 지우고 위와 같은 방법으로 해주면,
.hidden{
overflow: hidden;
border: 0;
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);
/* 추가 */
clip-path: inset(50%);
display: inline-block;
}이렇게 추가해주었다. 그러나 이게 100퍼센트는 아니였다. 여기서 1px만큼 자리를 차지하는 것을 해결하기 위해서 margin 을 사용하면 되지 않을까? 싶었지만 음수 margin 은 읽기 순서에 변형이 올 수 있다고 한다.
이 경우에는 z-index 를 사용하여 조절해 주면 된다. 사실상 모든 것을 만족시켜줄 수 있는 완벽한 접근성을 고려한 숨김 처리는 어려우나 저 정도로 해준다면 접근성에 위배되지 않고 숨기는 것이 가능할 것이다.
(출처: https://mulder21c.github.io/2019/03/22/screen-hide-text/ )
