TIL(04.19)

🟣IR技術

デザイン上は見えないが画面リーダーやブラウザに情報を伝えるテキストをHTMLで隠す技術.

に道を教える

1.ココア

PCで画像に意味のあるテキストの代替テキストを提供する場合
text-indent:-99999 pxを使用して画面外に送信します.

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

は、画像中の有意義なテキストの代替テキストを提供する.
color:透過性はIE 9から使用できるのでpcバージョンでは使用しません.
透明:透明色

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

は、画像を閉じるときに置換テキストを表示する場合に重要な画像置換テキストです.

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

2.NAVER

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