1) IR 기법 ?

IR : Image Replacement
이미지를 볼 수 없는 사용자에게 대체 텍스트를 제공하는것.

대체 텍스트는 보통 이미지의 alt 속성으로 작성합니다.
하지만 이미지의 alt 속성값으로 담기에는 대체 텍스트의 내용이 너무 길거나,
의미 있는 이미지를 CSS의 Background-image 속성으로 구현했을 때는 어떻게 처리할까요?

바로 이럴때 사용하는 기법이 IR 기법입니다.

---

2) 어떻게 처리할까요?

IR기법을 사용하는 과정을 크게 3단계로 나눠보겠습니다.

① 우선 시멘틱 태그로 의미 있는 마크업을 해 주어야 하구요.
② 대체 텍스트를 화면상에 나타나지 않게 하면서도
③ 스크린리더에 대체텍스트가 완벽하게 읽히도록 처리해야합니다.

---

3) 그렇다면 숨김처리는 어떻게?

① 글자는 숨겨지지만 스크린리더에 안읽혀요😡😡

display: none; 
opacity: 0;
visibility: hidden;
width: 0;
height: 0;

위 코드들은 스크린리더가 인식하지 못하기 때문에 IR기법을 위해 사용하기에 적합하지 않습니다.

② 잘 숨겨지고 스크린리더 인식도 되는데.. 음.. 🤔

position: absolute; 
top: -9999px; 
left: -9999px; 
text-indent: -9999px; 

이 코드들을 사용해서 처리하면 화면상에서 텍스트가 보이지 않고, 스크린리더에도 문제 없이 읽힙니다.
하지만 성능저하 이슈가 있죠.

③ PERFECT !👏

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

위 코드가 현재 대체 텍스트를 처리할때 사용하기에 가장 완벽한 코드입니다.
보통 blind 클래스를 만들어서 사용하는게 편합니다.

---