[CSS] IR(Image Replacement) 기법, .blind & .screen_out

IR(Image Replacement) 기법

이미지를 볼 수 없는 사용자를 고려하여 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법이다.

 

모든 곳이 동일하게 했으면 좋겠지만 여러 방법이 있는 이유는 브라우저도 다양하고 스크린리더 종류마다 다르기때문인것같다. 

 

네이버와 다음 두 사이트에서 IR 기법을 어떻게 처리하는지 비교해보았다.

 

1. 다음

.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

-> width나 height이 0으로 되면 안 읽는 경우가 있다. 

SEO를 위한거지 스크린 리더를 위한것이 아니다. 

overflow: hidden가 있지만, text-indent를 이용해 글씨를 저 멀리 보낸것이다.

 

네이버라던가 다음에서 overflow:hidden요소가 눈에 보이진 않지만 스크린리더가 읽는다는걸 보여주는걸로 .blind랑 .screen_out의 css를 조작하면 눈에 확 들어오더라구요ㅎㅎ 혹시 참고하실분 있음 참고참고 전 background color 적용하고 position 해제해서 이해했어용

 

2. 네이버

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

- margin을 넣지 않으면 구 IE에서 스크린 리더가 읽지 못하는 경우가 있기 때문에 margin 값을 선언해주어야한다.

- 1px 쓰는 이유 : 스크린 리더는 width, height 사이즈가 0인 엘리먼트의 콘텐츠를 읽을 수 없으니, 엘리먼트의 사이즈는 최소 1px 이상으로 적용한다. 

- position : absolute가 bfc로 변경시키기 때문에 문제가 발생한다, ifc로 전달되어야하는 정보에 해당 스타일을 적용하게되면 bfc로 변경되어 분리가 일어나게 된다