웹접근성을 위한 텍스트 숨김 처리(blind text)

사용이유!

display: none 이 아닌 접근성을 고려해 숨김처리한다.

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

위와 같은 경우 접근성에 문제를 일으킨다.

text-indent의 경우, 앵커태크(<a href="/">)나 html5에서 대화형 요소들에서 초점을 document 밖에 잡아버리는 문제점이 있다.

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

.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
}
// 스타일 설명
/*
1) position:absolute;
- 레이아웃에 영향 미치지 않기 위해치지 않기 위해
2) overflow:hidden;
- 요소의 크기를 벗어나는 콘텐츠 숨기기 위해
3) width, height: 1px;
- 넓이와 높이 최소(1px)하여 스크린리더기가 인식할 수 있도록 한다.
4) margin:-1px;
- 요소의 크기만큼 역마진을 주어 요소 차지하는 공간 제거
5) clip: rect(0, 0, 0, 0);
- 요소가 화면에 보이는 영역을 0으로 지정
6) clip-path: inset(50%);
- clip 호환성을 위해 추가
*/

하는 것이 좋다.

Reference

https://nm817.tistory.com/42

https://codingsalon.tistory.com/62