웹접근성을 위한 텍스트 숨김 처리(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%);
}

하는 것이 좋다.

 

숨기기 코드를 설명

position: absolute :: clip이 absolute, fixed 일 때만 적용가능하기 때문. + 레이아웃에 영향 미치지 않기 위해.

width: 1px, height: 1px :: 스크린리더기가 읽을 수 있도록.

padding: 0 :: 상속되거나 적용될 수 있는 스타일을 제거.

border: 0 :: 상속되거나 적용될 수 있는 스타일을 제거. border:none과 border: 0은 다르다. none으로 했을 때 border-style을 적용했을 경우 우선순위로 인해 border: none인데도 테두리가 생긴다. 그러므로 안전하게 border: 0을 사용.

margin: -1px :: 부모 요소 밖으로 위치시킴.

overflow: hidden :: overflow된 콘텐츠 숨기기.

clip: rect(0, 0, 0, 0) :: top과 bottom, left와 right가 같은 값이면 요소가 숨겨진다.

 

 

 

 

---

 

Reference

https://nm817.tistory.com/42

https://codingsalon.tistory.com/62

 

 

---

[21.12.21 추가]

https://webaim.org/techniques/css/invisiblecontent/#techniques

WebAIM: CSS in Action - Invisible Content Just for Screen Reader Users