[css]웹 접근성을 고려한 blind 처리

웹 접근성이란?

장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킵니다.

자세한 방법에 대해선 따로 정리하겠습니다.

 

blind css

콘텐츠를 숨기고 싶지만, 스크린 리더기에는 읽혀야 하는 경우 사용합니다.

 

우선, 콘텐츠를 숨기는 방법 중

display:none과 visibility:hidden , font-size:0, line-height:0, width:0, height:0과 같이 화면에서 영역이 잡히지 않는 속성들이 있습니다.

이런 속성들은 스크린 리더로 읽히지 않기 때문에 웹 접근성에 좋지 않은 속성입니다.

 

스크린리더는 width, height가 0인 속성들은 읽을 수 없으므로, 사이즈는 최소 1px 이상으로 해야 합니다.

아래 css는 제가 사용하는 blind css입니다.

구글링 하면 조금씩 다른 blind css가 있으니 참고하세요 :)

blind 작성

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

 

position:absolute -> clip 속성이 absolute, fixed 일 경우에만 적용가능

clip -> top, bottom / left, right의 값이 같으면 요소가 숨겨짐

border:0 -> border-style 적용했을경우 대비해 안전하게 0으로 설정

overflow:hidden -> overflow 된 콘텐츠를 숨김