웹접근성을 고려한 요소 숨김처리 방법

display: none은 화면에서 보이지 않지만 스크린리더가 읽어들이지 못하는 문제점이 있다.

그렇다면 비슷한 visible: hidden을 사용해야되는 것인가? 라고 생각할 수 있지만 hidden 또한 사용자에게 보이지 않게하는 의도를 가진 태그이기 때문에 읽지 못하는 스크린리더가 마찬가지로 존재한다고 한다. (국내는 읽을 수 있다는것 같다?... overflow: hidden은 국내외 모든 스크린 리더가 읽어들일 수 있다고 한다.)

따라서 위치를 화면 밖으로 보내버리는 등의 꼼수를 사용하면 된다.

.hidden{
    position: absolute;
    top: -9999px;
    opacity: 0;
}

.blind {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}​