접근성을 고려한 대체 텍스트 CSS 표현 blind / hidden / sr-only / a11y

접근성을 고려해 대체 텍스트 CSS가 필요한 경우가 있습니다.

 

IR 기법으로 표현
1. <img> 태그의 alt 속성 값으로 표현하기에 대체 텍스트가 너무 길 때
2. CSS background 속성을 사용하여 처리한 의미 있는 이미지 일 때 마크업으로 대체 텍스트 제공

 

IR (Image Replacement) 기법은
이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말합니다.

 

 

text-indent: -9999px; ❌

: 들여쓰기 기능, form 또는 link와같은 요소에 포커싱 되었을때 정확한 위치를 표시 할 수 없음

opacity: 0; ❌

: position을 이용하여 영역을 없애도, 일부 스크린리더의 경우 해당 요소를 무시할 수 있음 

display: none; ❌

: 화면에 보이지 않고, 스크린 리더도 읽어주지 않음

visibility: hidden; ❌

: 화면에 보이지 않고, 스크린 리더도 읽어주지 않음

width|height: 0; ❌

: 일부 스크린리더의 경우 해당 요소를 무시할 수 있음

font-size: 0; ❌  

: 일부 스크린리더의 경우 해당 요소를 무시할 수 있음

 top: -9999px; ❌  

: position을 이용하여 top: -9999px;속성을 주는 것, 적용된 영역을 읽을 때 top: -9999px;속성값이 적용되면서 화면 스크롤이 갑자기 상단으로 이동

 

 

➡️ 결론 CSS

.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

저는 이 코드를 공통 CSS로 설정하여 사용합니다.

 

 

실제 reddit에서 사용하는 코드을 엿봤습니다.💻

실제 코드 캡쳐 이미지

 

 

}