프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[CSS] ir 기법

2022.03.24
북마크 [출처 이동]    작성자 정보

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;
	}

이 포스트 공유하기

전체목록