IR 기법

• Image Replacement

사용 배경

• 웹에서 image를 표현하는 방법
  1. HTML - img태그를 이용한 표현
  

<img src = “이미지 경로” alt = “이미지 설명”>

2. CSS – background 속성을 이용한 표현

Img {background: url(./img/icon.png)}

HTML img 태그를 사용하는 경우

1. 프린트가 필요한 경우 - CSS background 이미지의 경우에는 출력시에 포함되지 않는다.
2. 이미지에 문구가 포함되어 의미를 전달할 때 -> alt 태그를 이용하여 어떤 의미인지 알려줄 수 있다.
3. 이미지가 웹 컨텐츠 상에서 중요한 의미를 담고 있는 경우

CSS background 속성을 사용하는 경우

• 그 외의 모든 디자인 적인 기능이 들어간 경우

HTML img 태그 alt 속성의 사용 목적

• <img>태그의 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시한다
• 스크린 리더로 웹을 이용하시는 분들을 위한 해당 이미지를 대체할 수 있는 텍스트를 해석해서 음성으로 출력

alt 속성 작성 법

• 이미지 정보를 대체하는 텍스트를 명시함
• <a>태그 내에 위치하고 있다면, 링크가 어디로 연결되는지 설명해아함
• 이미지가 단순한 장식이라면 screen reader가 건너띌 수 있도록 null (alt = “”)를 제공한다.
• 이미지가 단순한 장식이라면 alt 속성을 작성하고 aria-hidden = “true”로 작성하여 screen reader가 읽지 않고 넘어가도록 한다.

그러나 CSS background를 이용하여 image를 표현할 때는 alt를 이용하여 대체 텍스트를 표현할 수가 없다.
대신에 가상의 대체 문자를 만들어주기 위해 IR 기법을 사용한다.

IR 기법 정의

• Screen Reader로 웹 서비스를 이용하는 이용자에게 이미지의 대체 텍스트를 제공하기 위한 CSS 기법

IR 기법의 특징

• Screen Reader 사용자에게는 이미지의 대체 텍스트 정보를 받을 수 있지만, 실제 화면에서 해당 텍스트는 렌더링 되지 않으며 image만 화면에 보이도록 구현
• IR 대체 텍스트를 작성할 때는 Screen Reader가 구조에 맞춰서 읽을 수 있도록 시멘틱 구조를 생각하여 작성해야한다.

IR 기법의 종류

Fahrner Image Replacement

• image로 대체할 엘리먼트에 배경이미지를 설정, span 태그를 이용하여 대체 텍스트를 작성, span 태그의 css 속성에서 display : none을 이용하여 화면에서 보이지 않도록 처리하는 IR 기법
  -Screen Reader가 읽지 못함
• image가 로드되지 못하면 텍스트가 보이지 않음
• display : none visibility : hidden 은 스크린리더에서 읽어주지 않기 때문에 올바른 IR 기법이 아님

Phark Method

• image를 대체할 element에 배경 이미지를 설정하고 글자는 text-indent를 이요하여 화면 바깥으로 (-9999px만큼 내어 쓰기)빼내어 보이지 않게 하는 방법
• 의미있는 이미지의 대체 텍스트를 제공하는 경우 사용

WA IR

• image로 대체할 element에 배경 이미지를 설정하고 글자는 span태그 안에 작성하고, z-index : -1을 이용하여 화면에서 보이지 않게 처리
• 의미 있는 image의 대체 텍스트로 image가 없어도 대체 텍스트를 보여주고자 할 때 사용

Screen Out

• 웹 접근성을 위해 대체 텍스트가 아닌 숨김 텍스트를 제공할 때 사용