IR(Image Replacement)

IR(image replacement) 란?

웹 접근성 준수를 위해 이미지 사용 시 대체 텍스트를 제공해야 하며,
단순히 스크린리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필수적입니다.

 

* 의미있는 이미지를 배경으로 처리하고 그에 상응하는 내용을 text로 기입하는 방법입니다.

 

간단하게는 아래와 같이 img 태그 내 alt 속성을 넣는 방법이지만 background-image 를 사용하는 경우도 많기 때문에

IR 방법을 알고 계시면 좋을 것 같습니다.

<img src="/img/image.jpg" alt="대체 텍스트">

 

IR 작성 방법
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;}

 

주의

IR기법으로 콘텐츠를 숨김처리 할 때 visibility: hidden으로 구현하는 경우 특정 센스리더에서 내용을 읽지 못하는 경우가 있으니 overflow:hidden으로 구현을 해야 합니다.

 

 

참고자료

https://nuli.navercorp.com/community/article/1132804?email=true