작성일/수정일
2022-03-24 15:11:34 / 2022-03-24 15:11:34
IR
Image Relpacement
<img>, <background> 속성으로 들어간 이미지가 의미가 있는 경우 사용
스크린리더 인식
레이아웃 성능에 이슈 발생, text-indent값을 100%, -9999px 처리
/* 투명해진 것 뿐, 위치를 그대로 잡고 있기 때문에 단독으로 사용 불가능 */
opacity: 0;
/* 전체 레이어의 크기가 지나치게 크게 잡힘: 성능 이슈 */
text-indent: -9999px;
/* position 속성 추가해야 함: 성능 이슈 */
z-index: -1;
스크린 리더가 인식, 레이아웃, 성능에 영향이 없음
<style>
.blind {
/* 레이아웃에 영향을 끼치지 않도록 */
position: absolute;
/* 스크린 리더가 읽을 수 있도록 */
width: 1px;
height: 1px;
/* 눈에 보이는 부분을 제거 */
clip: rect(0 0 0 0);
margin: -1px;
overflow: hidden;
}
</style>
<span class="blind">숨김 텍스트</span>
.image-replace {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.blind_ir {
/* 레이아웃에 영향을 끼치지 않도록 */
position: absolute;
/* 스크린 리더가 읽을 수 있도록 */
width: 1px;
height: 1px;
/* 눈에 보이는 부분을 제거 */
clip: rect(0 0 0 0);
margin: -1px;
overflow: hidden;
}