이 포스팅은 css 중급, 스크린리더 사용자를 위한 기법과 추가 설명 제공하기 사이트를 참고하여 작성하였습니다.
IR(Image Replacement) 기법은 이미지 대체텍스트 제공을 위한 CSS 기법으로
다양한 CSS기법을 사용하여 이미지의 대체텍스트를 제공할 수가 있다.
의미가 포함되어 있는 image를 배경으로 표현하고, 그에 상응하는 내용을 text로 전경에 기입하는 방법으로,
시각이 있는 사용자는 이미지로 처리된 화면을 볼 수 있지만 "화면 낭독기를 사용하는 시각 장애인, CSS제거 및 인쇄"시에는 문자에 접근하거나 문자를 볼 수 있는 형태로 설계 하는 기법을 말한다.
1. 스프라이트 이미지를 이용한 IR 기법
지난번 포스팅하면서 배운 이미지스프라이트와 함께 사용을 많이 한다.
이미지 스프라이트 기법은 css의 background-position 속성으로 제어하는데,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 스프라이트 기법 사용하기</title>
</head>
<style>
a { display: inline-block; }
a::after {
content: "";
display: block;
width: 28px;
height: 28px;
background-image: url(./css_sprites.png);
}
.css::after {
width: 120px; height: 170px;
background: url('css_sprites.png') -10px -10px;
}
.js::after {
width: 120px; height: 170px;
background: url('css_sprites.png') -290px -10px;
}
.html::after {
width: 120px; height: 170px;
background: url('css_sprites.png') -150px -10px;
}
</style>
<body>
<a href="#" class="css">CSS</a>
<a href="#" class="js">JS</a>
<a href="#" class="html">HTML</a>
</body>
</html>
이미지 스프라이트 포스팅에서 봤던것과 같이 background-position 속성으로 이미지의 위치값을 설정하여 이미지의 일부만 표시하게 할 수 있다.
2. text-indent
css 에서 text-indent는 IR기법을 가장 손쉽게 사용할 수 있는 방법이자,
Phark Method 권장사항으로 이미지로 대체할 요소에 배경이미지를 설정하고,
글자는 text-indent를 이용하여 화면 바깥으로 보이지 않게 하는 방법이다.
(-9999px만큼)
- 스크린 리더기 읽어줌
- 추가적인 요소를 사용 안함
사용하기 간편하지만 사용자의 디바이스에 따라 이미지가 제대로 로드 되지 않았을때
스크린리더 사용자가 아니라 하더라도 이미지를 설명하는 텍스트를 보고 콘텐츠 내용을
확인해야하는 단범이 있으며, 웹페이지 로드 시 위치값을 계산해야하기 때문에 성능저하를
불러올 수 있다.
Daum CSS Convention 에서 명시한 방법을 살펴보겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type="button">검색</button>
<a href="#">검색</a>
<style>
button {
display:block; width:49px; height:36px; margin:0; padding:0;
text-indent:-9999px; /* 들여쓰기를 -9999px만큼 지정하여 글자를 버튼 밖으로 숨김 처리 , overflow:hidden을 통해 밖으로 내보낸것 히든처리 */
background:url('btn_search.gif') no-repeat;
border:none;
}
a {
display:block; overflow:hidden; float:left; width:49px; height:36px;
text-indent:-9999px; /* 들여쓰기를 -9999px만큼 지정하여 글자를 버튼 밖으로 숨김 처리
, overflow:hidden을 통해 밖으로 내보낸것 히든처리*/
background:url('btn_search.gif') no-repeat;
}
</style>
</body>
</html>3. position: relative, z-index: -1
해당 기법을 사용할 경우, 스크린 리더기가 읽을 수 있다.
이미지로 대체할 요소에 배경이미지로 설정 한 후 글자는 <span> 으로 감싸고,
position:relative,z-index:-1을 이용하여 (음수 값) 안보이게 처리한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
button {
width:71px; height:71px; margin:0; padding:0;
background:url(./ico02.png) no-repeat;
border:none;
}
a {
display:block; width:49px; height:36px;
text-decoration:none;
background:url(./ico02.png) no-repeat;
}
span {
position:relative; z-index:-1;
}
</style>
<body>
<button type="button"><span>검색</span></button>
<a href="#"><span>검색</span></a>
</body>
</html>
아이콘 뒤에는 대체 텍스트인 검색 이란 글자가 z-index 설정으로 가려져 있는 것을 알 수 있다.
4. width:0; height: 0;
이 방법은 대체 텍스트 글자가 들어가는 등의 요소의 width 와 height 값을 0으로 지정하는 방법이다. 대체할 텍스트 요소에 BackGround 이미지를 설정한 다음 대체 텍스트가 포함되는 요소의 높이와 너비를 0으로 지정하여 글자를 숨길 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
button {
width:71px; height:71px; margin:0; padding:0;
background:url('./ico02.png') no-repeat;
border:none;
}
a {
display:block; width:71px; height:71px;
text-decoration:none;
background:url('./ico02.png') no-repeat;
}
span {
display:block; overflow:hidden;
width:0; height:0;
}
</style>
<body>
<button type="button"><span>버튼</span></button>
<a href="#"><span>a태그</span></a>
</body>
</html>
+추가 내용을 다시 기록하도록 하겠다..
