올바른 IR 기법

썸네일

🚀  IR (Image Replacement) 기법

---

IR 기법은 이제 시각장애인 분들을 위해 이미지 대신 적절한 대체 텍스트를 제공하는 것이다.

 

웹 접근성이란 단어가 있다. 웹 접근성이 무슨 뜻이냐면 어떠한 사용자더라도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 하는 것을 말한다.

 

주로 IR 기법을 쓰는 곳에는

1. img 태그의 alt 속성 값으로 표현하기에는 너무 too much 하게 길 때 예를 들면 '부뚜막에 올라앉은 고양이를 쳐다보면서 뒤통수를 긁는 원숭이를 바라보는 긴 머리를 찰랑 거리...' 이런 식이라면 따로 p태그로 빼서 이미지를 소개한다.
2. css로 background-img 속성을 사용해서 처리한 의미 있는 이미지일 때 사용하는데(의미 있는 이미지라면 img 태그 alt 값 꼭 사용하자잉)

대체로 클래스명을 하나 정해서 숨김 처리를 하는데 blind는 좋지 못한 것 같다. 더 괜찮은 숨김 요소의 클래스명을 찾아서 사용하기를 바란다.

 

🚀 overflow : hidden vs visibility : hidden  vs display : none

---

IR 기법을 쓸 때 숨김 처리를 위한 방법으로 위의 3가지가 대표적이다. 대표적인 3가지 말고 다른 것도 다룰 예정이다.

 

숨김 처리의 대표적인 3가지 방법이라 했는데 가장 좋은 방법은 뭘까? 결론부터 말하자면 overflow : hidden 이 가장 좋은 방법이다. 왜 그런지 araboja.

 

1. overflow: hidden

.hide{
    height: 1px;
    width: 1px;
    position: absolute;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    margin : 0;
}

 

 

overflow: hidden을 쓰는 이유는 스크린 리더가 인식을 하면서, 레이아웃 변경도 없고 성능 이슈도 없기 때문이다.

위의 코드는 overflow: hidden으로 숨김 처리를 하는 방법인데 하나하나 따져보자!

• height: 1px, width: 1px을 주는 이유는 스크린 리더가 읽을 수 있도록 높이와 넓이를 주는 것이다.
• position: absolute를 주는 이유는 전체적이 레이아웃에 영향을 주지 않도록 하기 위함이다.
• overflow: hidden 눈에 보이는 부분을 제거한다.
• 네 개의 좌표로 지정한 직사각형 모양대로 요소를 잘라내는 속성, postion은 fixed 또는 absolute 여야만 하고, overflow 속성이 visible일 경우에는 적용이 되지 않는다.
• margin 값을 -1로 할 경우는 순서가 꼬인다.

.hide{
    position: absolute;
    clip: rect(0,0,0,0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow:hidden;
}

 

좋은 방법이 overflow: hidden인건 알겠는데 왜 나머지는 좋지 않은가?? 궁금하지 않으신가요? 좋지 않은 방법들을 한 번 모아봤습니다.

 

스크린 리더가 인식하지 못함

1. visibility: hidden
   • 투명도를 0으로 주는 것과 동일하게 화면에서 사라지지만, 스크린 리더 인식 x
2. display: none
   • 요소가 아예 없는 것으로 인식
3. width: 0, height: 0, font-size: 0, line-height:0;
   • 사이즈가 0이 되면 스크린 리더 인식 x

스크린 리더는 인식, 하지만 레이아웃이나 성능 등에 이슈 발생 가능

1. opacity: 0;
   • 투명해진 것뿐, 위치는 그대로 차지 레이아웃이 망가짐
2. text-indent: -9999px;
   • 레이어에 크기가 지나치게 잡혀서 성능 이슈가 발생할 가능성 있음
   • 100%로 처리하면 성능 이슈는 피할 수 있음
3. z-index: -1;
   • position 속성을 추가해야 해서 성능 이슈 발생 가능

 

아니 그러면 아예 쓰지 않는 건가요?? 또 그건 아니랍니다 ㅎㅎ

 

display: none은 주로 팝업창이나, 보이지 않아도 상관이 없는 요소에 주로 사용한다. 네이버 홈페이지에서는 팝업창에 주로 들어가 있었고, 다음 홈페이지에서는 날씨 창, 검색창 밑에 검색어에 display:none을 사용하고 있었다.

 

overflow: hidden 은 두 홈페이지 다 공통적으로 필수 정보들에 사용했다. naver 로고에 설명과 같은 중요한 정보들에 사용하는 것이 overflow: hidden이다.

 

 

참고 블로그 : https://snupi.tistory.com/109

 

🚀  기업에서 사용하는 IR 기법들

---

1. 카카오가 사용하는 방법들

 

• PC용 사용된 이미지 내 의미 있는 텍스트의 대체 텍스트를 제공할 때

.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
}

 

• Mobile용 사용된 이미지내 의미있는 텍스트의 대체 텍스트를 제공할 때

.ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent; 
  /* transparent 키워드는 IE9부터 사용 가능하기 때문에 PC에서는 빠져있습니다.
 https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#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%
}

 

여기서 1번과 4번은 background-image의 alt값이라고 생각하면 편하다 보통 img 태그에는 alt값이 있어서 img를 설명을 할 수 있는데, background-image는 alt 값이 없기 때문에 따로 설명을 해줘야 한다. 1번과 4번의 차이는 4번은 이미지 뒤에 텍스트를 숨겨놓는 것이라고 생각하면 된다. 반면에 1번은 text-indent로 저 멀리 우주로 보 내벌 임.

 

2. 네이버가 사용하는 방법

 

.blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

 

다소 공격적인 blind를 사용하긴 하지만.. 주로 hide나 hidden 등등 다른 단어들이 많다는 사실!! 네이버에선 특이한 점이 margin: -1px 부분인데 이는 IE 구버전에서 인식을 못하는 경우가 종종 있어서 사용한다고 한다.(IE 또 너야?) clip 속성을 통해 요소를 잘라내는 것도 가능하다.

 

3. 쿠팡이 사용하는 방법

 

.product-search a.search {
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 50px;
    height: 39px;
    background-position: -112px -71px;
    text-indent: -9em;
}

 

쿠팡은 위 두 회사와는 달리 text-indent로 우주까지 보내진 않는다 성층권 정도??

 

개인적인 입장은 음.. 다음이 가장 클래스 명도 그렇고, 코드도 그렇고 접근성 부분에 신경을 많이 쓰는 것 같다.