IR기법 어떤걸 사용해야하나

삼콩·2022년 4월 10일

CSS

목록 보기

3/5

❗ 해당 문서는 지속적으로 업데이트 될 예정입니다.
❗ 잘못된 정보나 오류가 있으면 댓글로 편하게 남겨주세요!🥰

👉 웹접근성과 IR기법

The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.

- Tim Berners - Lee , W3C Director and inventor of the World Wide Web

월드 와이드 웹의 창시자 팀 버너스 리의 말처럼, 웹의 힘은 모두가 어떠한 제약도 없이 평등하게 사용할 수 있을 때 발휘된다. 모든 사용자 신체적,환경적 조건에 관계없이 웹에 접근할 수 있도록 디자인하고 개발하는 것을 웹 접근성이라고 한다.

IR(image replacement)기법은 웹접근성을 준수하기 위한 방법 중 하나로서, 이미지를 볼 수 없는 사용자에게 대체 텍스트를 제공하는 방법이다. 보통 이를 위해 img태그의 alt 속성에 이미지에 대한 대체 텍스트를 입력한다.

그러나, 성능을 위해서 이미지 스프라이트 기법을 사용할 때가 많아, img태그를 사용하지 않을 때도 있다. 또한 img태그 alt 속성에 작성하기에는 내용이 너무 길 경우 텍스트 태그를 따로 분리해야할 때가 있다. 이런 경우 주의해야할 점은, 화면에서 해당 대체 텍스트를 숨기면서도, 스크린리더에 인식되어야한다는 점이다. 이 조건이 지켜지지 않으면 의미 없는 요소가 되어버린다.

보통 어떤 요소를 시각적으로 숨김처리하기 위해서 쓰는 방법으로는
visibility:hidden,display:none,overflow:hidden
대표적으로 이 세가지 방법을 사용한다.

display:none은 브라우저가 해당 요소를 아예 인식하지 않고 보조 기기도 정보를 전달하지 않기 때문에, IR기법으로 사용되는데는 적절치 않다.

visibility:hidden은 가시성만 hidden이고 해당 영역은 자리를 차지하고 있다. 이 또한 스크린리더가 해당 정보를 사용자에게 전달하지 않는다.

따라서 IR기법을 사용하기 위해선 이 세가지의 방법 중 overflow:hidden이 가장 적절하다고 할 수 있다.
각각 회사별로 overflow: hidden의 사용법을 알아보자.

▶ 네이버 : .blind
참고로 blind라는 클래스 명은 공격적일 수 있기 때문에 지양하는 것이 좋다.
   position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
✔ clip은 MDN에서 다음과 같이 clip-path로 대체하라고 권고하고 있다.

Note: Where possible, authors are encouraged to use the newer clip-path property instead

clip은 position: absolute, fixed 요소에만 적용되므로 사용하려는 요소에 position을 줘야한다는 단점이 있다. 또한, 사각 형태로 적용할 수 밖에 없다는 점에서 clip-path를 사용하는 것이 여러모로 좋지만, 브라우저 호환성에 자유롭지 않기 때문에 사용할 시 주의가 필요하다.
clip 사용시 참고!
rect( <top>, <right>, <bottom>, <left> )
<top> : 위를 기준으로 시작하는 위치
<right> : 왼쪽을 기준으로 끝나는 위치
<bottom> : 위를 기준으로 끝나는 위치
<left> : 왼쪽을 기준으로 시작하는 위치
▶ 카카오 ①: .screen_out
스크린리더가 읽을 필요는 없지만 마크업 구조상 필요한 경우에 사용한다.
 overflow: hidden; 
 position: absolute; 
 width: 0; 
 height: 0; 
 line-height: 0; 
 text-indent: -9999px;
▶ 카카오 ➁ : .ir_pm
PC용 사용된 이미지 내 의미있는 텍스트의 대체텍스트를 제공할때
.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
}
▶ 카카오 ③ : .ir_pm
Mobile용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때
.ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent; 
}
모바일에서는 text-indent:-9999px;대신 color transparent;를 사용한다. 컬러에 transparent속성은 ie9부터 사용가능하기 때문이다.

▶ 카카오 ④ : .ir_wa
중요한 이미지 대체텍스트로 이미지 off 시 에도 대체 텍스트를 보여주고자 할때
.ir_wa{
	display:block;
	overflow:hidden;
	position:relative;
	z-index:-1;
	width:100%;
	height:100%
}
▶ 쿠팡(따로 클래스를 지정하고 있지 않다.)
.product-search a.search {
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 50px;
    height: 39px;
    background-position: -112px -71px;
    text-indent: -9em;
}

많은 기업에서 웹 접근성을 위해 꼭 스크린리더가 읽어야하는 필요한 정보나 구조상 필요하지만, 보일 필요가 없는 곳에는 클래스명을 지정해 IR기법을 사용하고 있다. overflow:hidden 속성은 스크린 리더도 읽을 수 있고 성능에도 문제를 일으키지 않아 많은 곳에서 채택하는 방법이다. 하지만 해당 방법이 조건에 따라 부작용이 있을 수 있다고 하니 참고 글을 읽어보면 좋을 것 같다.

깨달은 점

👉 overflow:hidden만 사용하는 방법이 진리라고 생각했는데, 이 방법도 최선은 아니라는 것이라는 걸 깨달았다. 또한 웹접근성과 IR기법에 대해 직접 찾아보며, 많은 개발자들이 더 나은 웹 환경 제공과 검색엔진을 위해 갖가지 방법들을 연구한다는 것을 깨달았다. 나도 웹의 보편성과 성능을 위한 부분들을 고려하며 문제들을 접근해나가는 개발자로 성장하고 싶다.

👉 웹을 배우면 배울 수록, 프론트는 시각적인 것을 고려하는 것에 그치는 것이 아니라는 것을 깨닫는다. 물론 지금 당장은 디테일적인 것을 고려하는 것이 중요하지만, 더 성장하게 된다면 건설적이고 구조적인 시각을 갖는 프론트엔드 개발자가 되는 것이 참 중요할 것 같다.