IR기법

mil·2023년 2월 27일

IR (Image Replacement) 기법

이미지 대체 텍스트 제공을 위한 CSS 기법

이미지를 볼 수 없는 상황에도 해당 정보에 접근할 수 있도록 적절한 텍스트를 제공하는 기법으로, 웹 접근성 뿐만 아니라 검색 엔진의 효과적인 내용 수집을 돕는 기법이다.
스크린 리더 사용자에게 적절한 대체 텍스트를 제공하여 웹 접근성을 준수하게 되며 SEO 검색 엔진 최적화에 효과적이다.

👎 권장하지 않는 방식

//투명도 0과 동일
visibility: hidden;

//엘리먼트가 아예 없어진 것으로 인식
display: none;

// 엘리먼트의 크기가 0이 되어 스크린 리더 인식 불가
width: 0;
height: 0;
font-size: 0;
line-height: 0;

🤷 why?
화면에 보이지 않지만, 스크린 리더가 읽을 수 없다.

🙌 일반적인 방식

Phark Method

text-indent: -9999px;

text-indent를 활용하여 텍스트를 화면 바깥으로 밀어내 보이지 않게하는 방식

❗️단점

수정 시 화면상 확인할 수 있는 방법이 없다.
text-indent 속성이 많이 사용된 경우 웹페이지 로드 시 그만큼의 값을 계산해야 하여 성능 저하를 일으킬 수 있다.

Dwyer Method

display: block;
overflow: hidden;
width: 0px;
height: 0px;

텍스트를 span으로 감싸고 width/height 값을 0으로 지정하여 숨기는 방식

❗️단점

이미지를 로드하지 않으면 텍스트도 보이지 않는다.

WA IR

position: relative;
z-index: -1;

텍스트를 span으로 감싸고 z-index 값을 음수 값으로 주어, 뒤쪽에 배치되게 순서를 변경해 화면에 보이지 않도록 하는 기법

❗️단점

position 속성 사용 (성능 이슈)

👍 제일 좋은 방식

html

<span class="blind">숨길 텍스트</span>

css

.blind {
    position: absolute;  //레이아웃 간섭 X
    width: 1px;  //스크린 리더 인식 가능하도록
    height: 1px;
    overflow: hidden;  //눈에 보이지 않도록
    clip: rect(0,0,0,0);
    margin: -1px;
}

🤷 why?
공통 클래스 처리로