IR 효과
IR 효과 (Image Replacement 효과)
IR 효과란?
IR (Image Replacement) 기법은 웹 접근성을 향상시키기 위해 이미지의 대체 텍스트를 제공하는 CSS 기법입니다. 이 기법을 통해 시각적 이미지를 대체할 텍스트를 화면에 보이거나 숨길 수 있으며, 다양한 상황에 맞게 활용할 수 있습니다. IR 기법에는 .ir_pm, .ir_wa, .ir_so 세 가지 주요 클래스가 있습니다.
.ir_pm (Image Replacement for Meaningful Images)
.ir_pm 클래스는 의미 있는 이미지의 대체 텍스트를 제공하는 경우에 사용됩니다. 주로 로고나 중요한 시각적 콘텐츠를 텍스트로 대체하여 접근성을 높이고자 할 때 사용됩니다.
1
2
3
4
5
6
7
8
.ir_pm {
display: block;
overflow: hidden;
text-indent: -9999px;
width: 0;
height: 0;
background: url("path/to/image.jpg") no-repeat;
}
이 클래스는 텍스트를 화면 밖으로 밀어내고, 대신 배경 이미지를 사용하여 시각적인 콘텐츠를 제공합니다.
.ir_wa (Image Replacement with Accessibility)
.ir_wa 클래스는 의미 있는 이미지의 대체 텍스트로, 이미지가 없어도 대체 텍스트를 화면에 보여주고자 할 때 사용됩니다. 이는 이미지가 로드되지 않거나 이미지를 비활성화한 사용자에게 대체 텍스트를 제공하는 데 유용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
.ir_wa {
display: inline-block;
overflow: hidden;
position: relative;
z-index: -1;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0, 0, 0, 0);
}
이 클래스는 대체 텍스트를 시각적으로 숨기지만, 스크린 리더와 같은 보조 기술에서는 접근할 수 있도록 합니다.
.ir_so (Screen Reader Only)
.ir_so 클래스는 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 사용됩니다. 이 클래스는 화면에는 보이지 않지만, 스크린 리더를 사용하는 사용자에게는 읽히는 텍스트를 제공하는 데 유용합니다.
1
2
3
4
5
6
7
8
9
10
.ir_so {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
이 클래스는 텍스트를 화면에서 완전히 숨기지만, HTML 문서 내에 텍스트가 존재하므로 스크린 리더에서 인식할 수 있습니다.
각 기법의 사용 예시
.ir_pm 사용 예시
로고 이미지가 중요한 사이트에서 로고 이미지를 텍스트로 대체하는 방법입니다.
1
<h1 class="ir_pm">My Website</h1>
1
2
3
4
5
6
7
8
.ir_pm {
display: block;
overflow: hidden;
text-indent: -9999px;
width: 150px;
height: 50px;
background: url("logo.png") no-repeat;
}
이 코드는 “My Website”라는 텍스트를 로고 이미지로 대체하여 시각적으로 보여줍니다.
.ir_wa 사용 예시
이미지가 로드되지 않았을 때 대체 텍스트를 제공하는 방법입니다.
1
<div class="ir_wa">This is an important image description</div>
1
2
3
4
5
6
7
8
9
10
11
12
.ir_wa {
display: inline-block;
overflow: hidden;
position: relative;
z-index: -1;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0, 0, 0, 0);
}
이 코드는 이미지가 로드되지 않거나 비활성화된 경우 대체 텍스트를 제공하여 접근성을 유지합니다.
.ir_so 사용 예시
스크린 리더만 접근할 수 있는 텍스트를 제공하는 방법입니다.
1
<span class="ir_so">Screen reader only text</span>
1
2
3
4
5
6
7
8
9
10
.ir_so {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
이 코드는 시각적으로는 숨겨지지만, 스크린 리더를 사용하는 사용자에게만 읽히는 텍스트를 제공합니다.
결론
IR 기법은 웹 접근성을 향상시키기 위해 이미지 대체 텍스트를 제공하는 유용한 방법입니다. .ir_pm, .ir_wa, .ir_so 클래스를 적절히 사용하여 다양한 상황에서 접근성을 개선할 수 있습니다. 이를 통해 모든 사용자가 웹 콘텐츠에 접근할 수 있도록 도울 수 있습니다.