[css-real] 웹접근성을 고려한 .blind(hidden) 처리

스크린리더와 브라우저별, 그리고 매해 업데이트되는 내용들 때문에 여간 웹 접근성을 지키며 블라인드 처리하기가 쉽지 않다. 그래서 '이 방법으로 해결될 수 있습니다~'라는 방법은 아직 없다고 봐야 한다. 이 글에서는 잘못 쓰이고 있는 blind 처리 방법들과, 해외의 훌륭하신 분들이 다수의 리딩 테스트를 거쳐 공개한 코드들을 소개하려고 한다.

 

우선, 기본으로, display:none과, visibility:hidden, font-size:0, line-height:0, width:0; height:0과 같이 화면상 영역을 지니지 않게 하는 속성들은, 스크린 리딩 시 화면에 없는 영역으로 판단해 스킵한다. 따라서 blind 처리 시 위 요소 중 단 한 개라도 들어가서는 안된다.

 

한 줄 안에 들어가는 내용은 text-indent:-9999px로 처리하기도 하는데, link나 form의 경우 :focus 될 때 보이는 화면에 위치하지 않기 때문에 정확한 위치 판단이 되지 않고, 한글과 달리 오른쪽에서 왼쪽으로 적는 언어(RTL)의 경우 문제가 된다(예: 아랍어). 또한 보이는 화면상에 위치하지 않기 때문에, 없는 영역으로 판단하여 스킵하는 리더기도 있다.

 

position:absolute; top:-9999px로 처리하는 방법도 있으나, 위의 text-indent와 동일한 문제를 가졌다. 

 

다음은, 다수의 리딩테스트를 거쳐 살아남은 코드이다.

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%); 
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
}

 

macOS - VoiceOver / Chrome announcing visually hidden text out of order · Issue #12 · h5bp/main.css