[css] ir 기법(대체 텍스트 처리 기법)

ir 기법이란?

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

설정 방법

display: none;, visibility: none; 또는 opacity: 0;을 사용하면 스크린 리더기가 읽을 수 없기 때문에 아래와 같이 설정한다.

.blind {
  position: absolute; /* 위치 고정 */
  width: 1px; /* 0px은 스크린 리더기가 읽을 수 없음 */
  height: 1px;
  overflow: hidden; /* 넘치는 것을 숨김 그러나 특수문자의 경우 일부분이 보일 수 있음 */
  clip: rect(0, 0, 0, 0); /* 일부분이 보이는 현상을 방지하기 위해 좌표를 모두 0으로 설정*/
  margin: -1px; /* 화면 밖 영역으로 나감 */
}