부트스트랩의 sr-only 클래스가 하는 일

부트스트랩의 sr-only 클래스가 하는 일

이 글은 그저 기억하기 위한 용도로 작성했으니 참고바랍니다.

부트스트랩은 sr-only 클래스를 사용하여 원하는 요소를 화면상에서는 사라지게 하는 동시에 웹 접근성을 높인다. 장애를 가진 사람은 스크린 리더기나 점자 타자기와 같은 보조 기구를 통해 웹을 인식하기 때문에 웹 접근성은 신경써야 할 요소 중 하나다. 간단하게 <img> 태그의 alt 요소에 이미지를 파악할 수 있는 텍스트를 작성하는 것만으로도 웹 접근성을 높일 수 있다.

나는 체크박스(<input type="checkbox>)를 커스텀하면서 sr-only 를 접하게 되었다. 아마 사수가 아니었으면 웹 접근성을 신경쓰지도 않았을 텐데 덕분에 팁을 얻었다. 작업에 대해 자세히 말하자면 체크박스를 슬라이드 토글 형태로 커스텀하는 것이었다. 작업 순서는 아래와 같다. 체크 박스에 sr-only 클래스를 적용하여 체크 박스를 사라지게 만들기 → <label><div class="circle"></label> 로 style 만들기 → 체크박스 :checked 일 때 토글 효과 주기

부트스트랩의 sr-only 는 다음과 같이 작성되어있다. 이를 이용하여 체크박스를 화면에서 지우면 된다.

.sr-only {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0,0,0,0);
}

clip 속성은 요소의 일부분만 보이게 하고 싶을 때 사용한다. 단, 요소의 position이 absolute 또는 fixed로 적용되어 있어야 작동된다. sr-only 에서 clip 요소는 rect(0,0,0,0) 으로 선언되어있는 데 이는 요소를 노출 시키지 않겠다는 의미다.