IR(image replacement) 기법이란
의미있는 이미지를 배경으로 처리하고 그에 상응하는 내용을 text로 기입하는 방법입니다.
방법
1. display:none 2.visibility:hidden 3. overflow:hidden
1. display:none는 센스리더, Jaws, NVDA에서 모두 내용을 읽지 못함
2. visibility: hidden는 센스리더에서는 내용을 읽을 수 있었으나 Jaws, NVDA는 모두 내용을 읽지 못함
3. overflow:hidden의 경우 센스, Jaws, NVDA 모두 내용을 읽을 수 있음
display:none은 화면에서 아주 없애 버리는 것으로 공간을 차지 하지 아니하며,
visibility:hidden은 화면에는 안보이나 공간은 차지하고 있습니다.
접근성 있게 숨김 콘텐츠를 제공하는 방법으로 overflow:hidden을 사용한
포지셔닝 기법을 많이 사용하므로 참고하시기 바랍니다.
(포지셔닝 예)
.hidden {position：absolute; left:-10000px; top:auto; height:1px; overflow:hidden; }
.hidden {display: block; width: 0; text-indent: -9000px; overflow: hidden;}
장점 :
접근성을 떨어뜨리지 않으면서도 검색엔진으로부터 높은 가중치를 받을 수 있다는 점 입니다
(출처: 웹접근성연구소)
IS(Image Sprite) 기법이란
조각난 이미지 파일들을 하나의 파일로 병합 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법 입니다.
이 때 의미가 있는 이미지는 전경에 상응하는 텍스트를 포함시켜서 접근성을 확보해야 하기 때문에 IR(Image Replacement) 기법이 함께 사용 됩니다.