CSS IR 기법
IR 기법(Image Replacement)
- IR 기법은 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다.
- 여러가지 기법 중에서 Phark Method와 WA IR, Screen out 기법을 주로 사용하여 대체텍스트를 제공할 수 있습니다.
Phark Method
- 의미있는 이미지의 대체 텍스트를 제공하는 경우
- 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법
.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;}
WA IR
- 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용
- 이미지로 대체 할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 화면에 보이지 않게 처리
.ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;}
Screen Out
- 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공 할 때 사용
.ir_so {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;}
최신 방법
.sr-only {
position: absolute; /* position: absolute/fixed 에서만 clip 속성 작동 */
margin: -1px; /* 부트스트랩에선 안씀 */
width: 1px;
height: 1px;
padding: 0;
border: 0;
white-space: nowrap;
overflow: hidden; /* overflow: visible 이면 clip 속성 작동 안됨 */
clip: rect(0, 0, 0, 0);
clip-path: inset(50%); /* H5BP에선 안씀 */
}
margin: -1px; /* 부트스트랩에선 안씀 */
width: 1px;
height: 1px;
padding: 0;
border: 0;
white-space: nowrap;
overflow: hidden; /* overflow: visible 이면 clip 속성 작동 안됨 */
clip: rect(0, 0, 0, 0);
clip-path: inset(50%); /* H5BP에선 안씀 */
}
margin과 clip-path속성을 제외하고 H5BP나 부트스트랩이나 나머지는 동일합니다.
0 사이즈를 피하고자 width와 height를 1px을 줍니다. 하지만 1px의 공간으로는 텍스트의 공백과 줄바꿈의 계산되지 않기 때문에(공백은 1개만 표시하고 줄바꿈은 되지 않습니다.)
white-space:nowrap으로 정의합니다.(스크린 리더가 줄바꿈은 공백으로 해석하지 않아 띄어쓰기가 되지 않은 하나의 긴 단어처럼 읽어준다고 합니다.)