TIL 07 | IR 기법
IR 기법
IR(Image Replacement)기법은 이미지의 대체 텍스트를 제공하기 위한 CSS기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있다. 즉, 눈에 보이는 디자인만 이쁘게 해서 설계하는 것이 아니라, 스크린리더기 사용자에게도 편리하게 이용할 수 있게 해야되기 때문에 적절히 IR기법을 사용해야 된다.
Phark Method
- 의미 있는 이미지의 대체 텍스트를 제공하는 경우 사용한다.
- 이미지로 대체할 요소에 배경 이미지를 설정하고
text-indent
를 이용하여 화면 바깥으로 -9999px만큼 빼내에 보이지 않게 하는 방법. - ex. 로고, 아이콘의 대체 텍스트
.ir_pm {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
WE IR
- 의미 있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고 할 때 사용한다.
- 이미지로 대체할 요소의 배경 이미지를 설정하고 글자는
<span>
요소로 감싼 후z-index: -1;
를 속성을 이용하여 화면에 보이지 않게 처리한다.
ir_wa{
position: relative;
display: block;
overflow: hidden;
z-index: -1;
width: 100%;
height: 100%;
}
Screen Out
- 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때
- ex. HTML에서 시멘틱 태그 또는 박스별로 영역을 나눌 때 어떠한 영역 이미지인지 타이틀을 제공해야 한다. 그럴 때 제목 요소에 적용할 수 있다.
.ir_su{
position: absolute;
overflow: hidden;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
}
a11y-hidden
- 접근성을 고려한 텍스트 감춤 클래스
- ex.
<label>
을 사용할 때 설명하기 위한 텍스트도 사용해야 되고 디자인도 해야되는 경우, 내가 가장 종종 쓰는 CSS Class이다.
.a11y-hidden {
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0); /* IE 6,7 */
clip: rect(0,0,0,0);
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
}
caption.a11y-hidden {
position: static;
}
.a11y-hidden.focusable:focus {
overflow: visible;
position: static;
clip: auto;
width: auto;
height: auto;
margin: 0;
}
Author And Source
이 문제에 관하여(TIL 07 | IR 기법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@vi2920va/TIL-07-IR-기법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)