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;
}
Author And Source
이 문제에 관하여(TIL(04.19)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dpdms0109/TIL04.19저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)