[CSS] 대체 택스트 기법(ir 기법)

1. FIR 기법
Todd Fahrner가 만든 이미지 대체 기법의 시초이다.

<style type="text/css">
div.aoiyuki{
 background:url('./images/aoiyuki.jpg') no-repeat left top;
 width:264px;
 height:254px;
}
div.aoiyuki span{display:none;}
</style>

<div class="aoiyuki"><span>AOIYUKI の Amuse Life</span></div>

☆ 이 방법은 display:none때문에 스크린리더 프로그렘에서 읽은 수가 없습니다.
그래서 접근성이 문제가 됩니다.

2. 파크방법

<style type="text/css">
div.aoiyuki{
 background:url('./images/aoiyuki.jpg') no-repeat left top;
 width:264px;
 height:254px;
text-indent:-5000px;
}
div.aoiyuki span{display:none;}
</style>
<div class="aoiyuki">AOIYUKI の Amuse Life</div>

☆ 이 방법은 스크린리더에서도 잘 작동하지만 이미지를 표시하지 않고 CSS만 활성화 시킨 경우에는 텍스트를 확인 할 수가 없습니다.

3. 길더/레빈 방법

<style type="text/css">
div.aoiyuki{
 width:264px;
 height:254px;
 position:relative;
}
div.aoiyuki span{
 background:url('./images/aoiyuki.jpg') no-repeat left top;
 width:100%;
 height:100%;
 position:absolute;
 top:0px;
 left:0px;
}
</style>

<div class="aoiyuki"><span></span>AOIYUKI の Amuse Life</div>

☆ 이 방법은 스크린리더나 이미지, CSS를 제거 하여도 잘 보이나 span같은 의미없는 태그가 들어간다는 단점이 있습니다.

4. IFR, sIFR

네번째 방법은 텍스트를 스크립트가 가져가서 플래시로 만들어서 뿌려주는 방법입니다.
해본적이 업기 때문에 쓰지는 않겠습니다.

☆IFR
http://shauninman.com/archive/2004/04/
☆sIFR
http://www.mikeindustries.com/blog/sifr/

제 생각으로는 3번과 4번이 아직까진 무난하게 많이 사용하고 적당한 것 같습니다.
1번을 많이 사용했었는데 스크린리더기 때문에 못써서 안습...ㅠ_ㅠ)

☆위 내용들은 CSS 마스터 전략에서 확인하실 수 있습니다. p100 ☆