HTML IR효과

IR효과

IR (Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말합니다. 웹 접근성 준수를 위해 이미지 사용 시 대체 텍스트를 제공해야 합니다. 단순히 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필수적입니다.

pm(Phark Method)

의미있는 이미지의 대체 텍스트를 제공하는 경우 사용합니다.

.ir_pm {
    display: block; 
    overflow: hidden; 
    font-size: 0; 
    line-height: 0; 
    text-indent: -9999px;
}

wa

의미있는 이미지의 대체 텍스트로 이미지가 없어도 텍스트를 보여주고자 할 때 사용합니다.

.ir_wa {
    display: block;
    overflow: hidden;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
}

so(Screen Out)

대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 사용합니다.

.ir_so {
    /* ir_screen out 약자로 임의 사용 */
    overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    text-indent: -9999px;
}