오늘은 웹접근성과 관련된 주제를 조금 다루어보려고 한다.
웹접근성을 위한 IR기법이다.

아마 IR기법에 대해서는 전 게시물에 한번 언급을 했었던 걸로 기억하고 있다. 하지만 단독으로 다루지 않았기 때문에 이번에 정리해보도록 하겠다.

IR기법이란?

IR은 Image Replacement의 약자로, 이미지의 대체 텍스트를 제공하기 위한 CSS 기법이다.

이미지의 대체 텍스트는 아래처럼 <img>태그의 alt속성을 이용하여 적용한다.

<img src="images/image1.png" alt="이미지 대체 텍스트">

만약 이미지 파일의 경로가 잘못되었거나 파일이 손상 또는 삭제되었다고 하면 이미지를 출력하지 못하고 아래처럼 alt 속성의 값을 출력해준다.

<img src="images/image1.png" alt="건물"/>

하지만, 우리가 앞의 게시물에서 다룬 "Image Sprite 기법"처럼 CSS에서 background 속성을 사용하여 삽입하는 이미지는 대체 텍스트를 넣을 수 있는 방법이 없다.

그럴 때, IR기법을 이용하여 대체 텍스트를 적용시키면 어떤 이미지인지 정보를 제공할 수 있다.

이 기법은 "웹 접근성"과 관련이 있는 이유이다. 비장애인 같은 경우 이미지를 보고 아이콘이나 이미지가 어떤 이미지인지 이해가 가능하다. 그래서 굳이 대체 텍스트는 필요가 없다.

하지만 시각장애인의 경우 background 속성으로 삽입된 이미지가 어떤 의미인지 알 수 있는 방법이 스크린 리더기를 이용하는 방법밖에 없다.
그래서 IR기법은 비장애인에게는 대체 텍스트를 보여주지 않게 숨겨주며 시각장애인의 경우엔 텍스트는 화면 안에 없지만 스크린 리더기가 읽을 수 있게 하는 방법이다.

이 IR기법을 사용할 때 조건은 "비장애인이 웹을 이용할때 스크린 리더기가 대체 텍스트를 인식하고 읽어주는 것"으로 기준을 잡으면 된다.

우선 사용하지 말아야하는 방법 먼저 정리하겠다.

BAD 👎 - 스크린 리더기가 읽을 수 없는 방식

diplay:none의 사용

<style>
	.hidden {
		display:hidden
	}
</style>

display:none은 화면 내에도 자리를 차지하지 않고 출력을 하지않으며(DOM트리에서 제외) 스크린 리더기도 인식하지 못해 읽어주지 않는다.

사이즈의 값을 "0"으로 사용

<style>
	.hidden {
		width: 0;
		height: 0;
		font-size: 0;
		line-height: 0;
	}
</style>

위처럼 크기와 관련된 속성의 값을 0으로 처리하게 된다면 위의 결과와 동일하다.

visibility: hidden을 사용

<style>
	.hidden {
    	visibility: hidden;
    }
</style>

가시성을 의미하는 visibility 속성의 값을 hidden으로 주면 화면에 출력되지 않고 스크린 리더기 또한 읽지 못한다.

그래서 위에서 말했던 것처럼 "비장애인이 웹을 이용할때 스크린 리더기가 대체 텍스트를 인식하고 읽어주는 것"을 목표로 잡는데 아래의 방법을 사용하면 된다.

SOSO 🤔 - 스크린 리더기가 읽을 수 있지만 고려해야하는 부분이 있는 방식

opacity:0을 사용

<style>
	.hidden{
		opacity: 0;
	}
</style>

opacity 속성을 통해 요소에 투명도를 주면 자리를 차지하면서 단독으로는 사용이 불가능하다.
position을 함께 사용해서 normal-flow에서 벗어나게 하면 되지 않을까 싶다.

text-indent: -9999px을 사용

<style>
	.hidden{
		text-indent: -9999px;
	}
</style>

text-intent를 음수로 큰 수로 주면 화면밖으로 텍스트가 나가게 된다. 하지만 이럴 경우 전체적인 레이아웃 크기가 늘어나기 때문에 성능적으로 이슈가 있을 수 있다.

💡 성능적으로 이슈가 있다고 하지만 강사님께서는 그렇게 많이 성능 이슈가 있다곤 하지 않으셨다.

이 방식은 '다음'에서 .screen_out이라는 클래스로 사용 중이다.

z-index: -1을 사용

<style>
	.hidden{
    	position:relative;
        z-index: -1;
    }
</style>

텍스트를 z-index의 값을 -1를 사용하여 이미지의 뒷편으로 보내는 방법이지만, 사용할 때마다 position을 같이 사용해야하기 때문에 성능적인 이슈가 발생한다.

Good 👍 - 스크린 리더기가 읽을 수 있고 성능면으로도 좋은 방법

H5BP 방법

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

추가적인 태그가 있지만 이것만 입력해도 충분히 스크린 리더가 읽을 수 있다.
왜냐하면 width와 height가 0이 아닌 1이기 때문에 스크린 리더가 인식할 수 있고,
position으로 인해 normal flow에서 벗어나서 레이아웃에 영향을 주지 않는다.
clip과 overflow:hidden을 통해 콘텐츠가 안보이게 가려줄 수 있다.
여기서 margin:-1px의 경우 구버전 브라우저(IE)와의 호환성을 위해 넣어준 속성이다.

이 속성은 주로 '네이버'에서 사용하는 IR기법이다. ".blind"라는 클래스명으로 적용하고 있다.

---

정리를 마치며 ⛳️

예전에 배웠지만 이건 웹접근성을 위해 꼭 알아야할 것 같아서 정리를 해보았다.

여러모로 내가 아는 웹에서는 아직 모르는 것이 많은 것 같다. 물론 내가 시각장애인의 시선으로 웹을 보지 않아서 인 것도 있을 것이다.

하지만 정보는 누구에게나 공평하게 제공되어야 한다고 생각하는 마인드를 가지고 있기에 나로서는 꼭 알아둬야한다고 생각한다.

앞으로 마크업이나 CSS를 할 때는 꼭 한번 더 시각장애인의 입장에서 한번 더 생각하는 학습을 목표로 공부를 하도록 해야겠다.