[CSS] ir 기법, is 기법

IR : Image Replacement

✔️ 웹 접근성 준수를 위해 이미지를 사용 시 대체 텍스트를 제공해야 함.

✔️ 단순히 스크린 리더 사용자 뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필수적.

 

 

Bad - 스크린 리더가 읽을 수 없는 방법

img {
display : none;
}

img {
visibility : hidden;
}

img {
width: 0; height:0;
font-size:0; line-height:0;
}

🟦 display : none → 화면에 아예 표시되지 않음

🟦 visibility : hidden → 화면에 표시되지 않으나 영역(width, height)은 차지한다.

🟦 font-size : 0 → 읽을 수 있지만, 폰트가 노출되기도 하며, block 요소의 경우 줄바꿈처리가 되기도 함.

 

❗우리의 목표는 시각적으로 숨기지만 스크린 리더는 읽을 수 있도록 만드는 것이다.

 

 

So so - 스크린 리더가 인식하지만 이슈 발생 가능성이 있는 속성

WA IR 기법

➡️ 추가 태그(span)을 사용하여 이미지 아래로 텍스트를 숨기는 기법.

⚠️ position 속성에 따른 성능 저하 이슈가 있음.

<button>
	<span>검색</span>
</button>

button {
/* 이미지 버튼 속성 정의 */
}

buttton span {
position : relative;
z-index : -1;
}

 

Phark method 기법

➡️ 텍스트를 해상도의 범위 밖으로 날려버리는 방법.

⚠️ 이미지가 정상적으로 로드되지 않은 상황에서 일반 사용자도 대체 텍스트를 확인할 수 없음.

⚠️ text-indent 속성이 적용된 요소가 많을 때 웹페이지 로드시 성능 저하 불러옴.

<button>검색</button>

button {
text-indent: -9999px;
}

 

Best

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

.blind {
/* 레이아웃에 영향을 끼치지 않도록 */
position: absolute;

/* 스크린 리더가 읽을 수 있도록 */
width: 1px;
height: 1px;

/* 눈에 보이는 부분을 제거 */
clip: rect(0 0 0 0);
margin: -1px;
overflow: hidden;
}


/* ----- 다른 방법 ----- */
.blind {display: block; position:absolute;
z-index: -1; width: 0; height: 0; overflow: hidden;}

clip : rect(top right bottom left);

➡️ 네 개의 좌표로 지정한 직사각형의 모양대로 요소를 잘라내는 속성.

➡️ position 속성 값이 absolute 혹은 fixed인 요소여야 하고, 만약 overflow 속성 값이 visible 인 경우에는 적용이 되지 않음

 

---

IS : Image Spriting

➡️ 웹페이지에 이미지가 많을 경우, 서버에서는 해당 이미지 수만큼의 요청을 해야하므로 로드시간이 오래걸려 이를 해결하기 위해 만들어진 기법

➡️ 여러 개의 이미지 파일들을 하나의 파일로 병합해서 배경으로 처리하는 기법

➡️ 공통 클래스에 background-image로 하나의 이미지를 로드하고 멀티 클래스로 background-position, width, height를 이용