TIL(04.19)

🟣IR기법

디자인적으로는 보이지 않지만 스크린 리더나 브라우저를 위해 정보를 전달하는 텍스트를 HTML 곳곳에 숨겨두는 기법

방법

1. 카카오

• PC용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때
  text-indent : -9999px 를 이용하여 화면 밖으로 보내버린다.

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

• Mobile용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때
  color : transparent는 IE9부터 사용가능하기 때문에 pc버전에선 쓰지 않는다.
  transparent : 투명한 색

.ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent; 
}

• 스크린리더가 읽을 필요는 없지만  마크업 구조상 필요한 경우

.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

• 중요한 이미지 대체텍스트로 이미지 off시에도 대체 텍스트를 보여주고자 할 때

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

2. 네이버

.blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}