웹 접근성을 고려한 콘텐츠 숨기기 방법

display: none 과 visibility: hidden 둘 다 콘텐츠를 숨길 수 있지만, 스크린 리더로도 읽을 수 없기 때문에 접근성에 문제가 있다. 화면에는 보이지 않으며, 스크린 리더가 읽는 데에는 문제가 없는 clip 속성을 사용해 보자. clip 속성을 사용한다고 무조건 스크린 리더가 읽을 수 있는 것은 아니다. 스크린 리더는 width, height 사이즈가 0인 엘리먼트의 콘텐츠를 읽을 수 없으니, 엘리먼트의 사이즈는 최소 1px 이상으로 적용해야 한다.

예제) http://codepen.io/sogoonii/pen/JKaaRP


<style>
/* 접근성에 문제가 있음 */
.sr-only {
    display: none; /* 화면에 보이지 않고, 스크린 리더도 읽어주지 않음 */
}

.sr-only {
    visibility: hidden; /* 화면에 보이지 않고, 스크린 리더도 읽어주지 않음 */
}

/* 접근성에 문제 없음 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    overflow: hidden;
}
</style>

<div class="sr-only">화면에 보이지 않지만, 스크린 리더로 읽을 수 있습니다.</div>