CSS - IR 효과

IR 효과

웹 접근성 준수를 위해 이미지 사용 시 대체 텍스트를 제공해야 합니다. 대체 텍스트는 단순히 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집(SEO)을 위해서도 필수적입니다. IR 효과(Image Replacement)는 이미지의 대체 텍스트를 제공하기 위한 CSS 기법으로 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공하는 것을 말합니다. 여러 가지 기법 중에서 Phark Method(ir_pm)와WA IR(ir_wa), Screen out(ir_so) 기법을 주로 사용하여 대체텍스트를 제공 합니다.

Phark Method(ir_pm)

의미있는 이미지의 대체 텍스트를 제공하는 경우에 사용합니다.
이미지로 대체할 요소에 배경 이미지로 설정하고 글자는 text-indent 속성을 이용하여 화면 바깥으로 보내는 방법입니다.

코드

1. HTML 코드
<div class="ir_pm">ir 효과</div>

2. CSS 코드
.ir_pm {
width: 300px;
height: 300px;
background: url(img/umbrella.jpg);
text-indent: -9999px;
}

결과

장점

1.스크린 리더가 읽어줌
2. 추가적인 태그 사용 안함

단점

1.이미지를 로드 하지 않으면 텍스트가 보이지 않음
2. text-indent 속성이 적용된 요소가 많을 때 성능 저하를 불러올 수 있음

WA IR(ir_wm)

의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 제공하는 경우에 사용합니다. 이미지로 대체할 요소에 배경 이미지로 설정하고 글자는 <sapn>태그로 감싸고 z-index 속성을 -1로 설정하여 텍스트를 감추는 방법입니다.

코드

1. HTML 코드
<div class="ir_wm">
<span>
ir 효과 - ir_wm??
</span>
</div>

2. CSS 코드
.ir_pm {
width: 300px;
height: 300px;
background: url(img/umbrella.jpg);
text-indent: -9999px;
}

결과

장점

1.스크린 리더가 읽어줌
2. 이미지가 로드 되지 않아도 텍스트가 보임

단점

1.추가적인 태그를 사용해야함
2. position 속성 사용 해야함(성능 이슈)

Screen out(ir_so)

대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공하는 경우에 사용합니다. 예를들어, HTML에서 시멘틱 태그 또는 박스별로 영역을 나눌 때 어떠한 영역 이미지인지 타이틀을 제공해야 할 경우 제목 요소에 적용할 수 있습니다.

코드

1. HTML 코드
<section>
<h1 class="ir_so">ir_so예제영역</h1>
<div class="umbrella"></div>
</section>

2. CSS 코드
.umbrella {
width: 300px;
height: 300px;
background: url(img/umbrella.jpg);
}

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

결과