IR 기법에 대한 설명

IR 기법

Imgae Replacement (이미지 리플레이스먼트)
이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말한다. 

웹접근성으로 이미지 태그에 alt 속성에는 대체텍스트를 입력 해 주어야 한다.
 
하지만, 배경 이미지로 처리한 의미 있는 아이콘, 로고 또는 대체 텍스트가 너무 긴 이벤트 페이지는 어떻게 처리해야 할까 ?

일단 작은 이미지를 많이 사용하는 것 보다는 스프라이트 이미지라고 해서 큰 이미지에 여러 버튼들을 정리해 두고, 그 버튼들을 포지션으로 불러오는 경우가 많고 그 때문에 백그라운드 이미지를 사용하는 경우가 많다.

예시 : https://s.pstatic.net/static/www/img/uit/2020/sp_main_b46ce0.png

네이버 기준으로 보면 백그라운드를 가진 태그 밑에 span으로 해당하는 텍스트를 적어놓았다.
position , clip 등의 css태그를 활용하여 사라지게만 표시한 것이다.

만약 전체 이미지를 사용하여서 대체텍스트가 너무 긴, 복잡한 경우에는 사진 영역을 표시한 태그 아래에 전체 텍스트를 작성한 후 그것을 숨김처림한다 .


IR 기법 사용법

시멘틱 마크업 + css 요소로 화면에서 숨기면서 스크린리더가 인식이 되어야한다.

나쁜 방법 아

    1. visibility: hidden;
    2. display: none;
    3. width: 0; height: 0; font-size: 0; line-height: 0;

    요소를 숨길 수는 있으나 스크린 리더가 인식하지 못함.

상황에 따라서 사용

    1. opacity: 0;
        투명해진 것 뿐이고 위치는 그대로 잡고 있다. 따라서 단독사용이 불가능하다. 레이아웃에 영향을 주면 사용불가
    2. text-indent: -9999px;
        전체 레이어의 크기가 지나치게 크게 잡혀 성능에 이슈가 생긴다.
    3. z-index: -1;
        position 속성을 추가해야 함 : 성능이슈 발생

무난한 방법
    1. 
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;

    clip는 탑/라이트/바텀/레프트 네개의 좌표로 지정한 직사각형 모양대로 요소를 잘라내는 태그 / mask효과 / position이 absolute 혹은 fixed인 요소에 사용 / overflow visible 경우 적용불가
    주로 클래스로 따로 지정해서 사용하는게 편하다.

전체 이미지의 a태그의 경우는 이미지 부분의 링크가 살아있어야 하기 때문에 전체 숨김처리를 하지않고 영역을 살려서 이미지에 대응한다.
자세한 사항은 다음 예제를 참조하자.

 

 

 

* 부스트코스 UI 교육을 듣고 개인적으로 정리한 내용입니다.