[웹 UI 개발] IR 기법

IR은 Image Replacement의 약자이며, 이미지를 볼 수 없는 사용자에게 적절한 텍스트를 제공하는 것을 의미한다.

<img> 태그의 alt 속성 값이 너무 길거나 CSS background 속성을 사용하여 처리한 의미있는 이미지인 경우 마크업으로 대체 텍스트를 제공한다.

 

대체 텍스트를 제공하되, 비장애인들이 화면을 볼 때에는 제공한 텍스트가 보이지 않아야 한다.

즉, 요소를 숨김 처리해야 한다.

 

요소를 숨김 처리하는데는 여러가지 방법이 있다.

 

/*방법1*/
visibility: hidden;

/*방법2*/
display: none;

/*방법3*/
width: 0;
height: 0;
font-size: 0;
line-height: 0;

위 세가지 방법은 사용하면 안되는 방법이다.

'visibility: hidden' 속성은 'opacity: 0'과 같은 동작으로 요소를 화면에서 사라지게 하지만, 스크린리더기가 요소를 읽지 않는다.

'display: none' 속성은 요소가 아예 없는 것으로 인식한다.

마지막으로 요소의 사이즈를 0으로 만들면 마찬가지로 스크린리더기가 인식하지 못해 읽어주지 않는다.

 

 

/*방법1*/
opacity: 0;

/*방법2*/
text-indent: -9999px;

/*방법3*/
z-index: -1;

위 세가지 방법은 사용해도 되지만 약간 아쉬운 방법이다. 스크린리더기가 인식하지만 레이아웃의 크기 변화, 성능 이슈 등의 문제가 있다.

'opacity: 0' 속성은 요소가 투명해진 것일 뿐, 위치는 그대로여서 이 속성 단독으로 사용할 수 없다.

'text-indent: -9999px' 속성은 전체 레이어의 크기가 지나치게 크게 잡혀 성능에 영향을 끼친다. 'text-indent: 100%' 속성을 사용하면 성능 문제는 없어지지만, 'text-indent' 속성의 한계점으로 텍스트가 여러 줄일 경우에 첫번째 줄만 이동시키는 점이 있다.

'z-index: -1' 속성은 텍스트를 요소들 가장 아래로 숨기는 방법으로 position 속성을 추가해야 하기 때문에 성능에 문제가 발생한다.

 

 

.blind {
	/*레이아웃에 영향을 끼치지 않도록 함*/
	position: absolute;
    
    /*스크린리더기가 인식할 수 있도록 함*/
    width: 1px;
    height: 1px;
    
    /*눈에 보이는 부분을 제거. 화면에 보이지 않도록 함*/
    clip: rect(0 0 0 0);
    margin: -1px;
    overflow: hidden;
}

스크린리더기가 인식하면서 레이아웃이나 성능에 영향을 주지 않는 방법으로, 위 속성들을 조합해서 사용한다.

여기서 'clip: rect(top right bottom left)' 속성은 네 개의 좌표로 지정한 직사각형 모양대로 요소를 잘라내는 속성이다.

position 속성 값이 absolute 혹은 fixed일 때만 사용할 수 있고 overflow 속성 값이 visible일 경우 적용되지 않는다.

 

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web344

웹 UI 개발