ir / is 기법

1. ir기법 (image replacement)

ir 기법이란?

• 이미지 대체텍스트 제공 기법으로, 텍스트를 숨길 수 있는 컨텐츠 생성 후 공통 클래스로 처리하여 스크린 리더기가 인식할 수 있게 한다.

display: none 과 visibility: hidden 둘 다 콘텐츠를 숨길 수 있지만, 스크린 리더로는 읽을 수 없기 때문에 접근성에 문제가 있다.

화면에는 보이지 않으며, 스크린 리더가 읽는 데에는 문제가 없는 clip 속성을 사용한다. clip 속성을 사용한다고 무조건 스크린 리더가 읽을 수 있는 것은 아니다.

스크린 리더는 width, height 사이즈가 0인 엘리먼트의 콘텐츠를 읽을 수 없으니, 엘리먼트의 사이즈는 최소 1px 이상으로 적용해야 한다.

• HTML
  

<span class="blind">숨김 텍스트</span>

• CSS

    /* 레이아웃에 영향을 끼치지 않도록 */
    
    position: absolute;
    
    /* 스크린 리더가 읽을 수 있도록 */
    
    width: 1px;
    
    height: 1px;
    
    clip: rect(0 0 0 0); // 네개의 좌표로 지정한 직사각형 모양대로 요소를 잘라내는 속성이다.
    
    margin: -1px;
    
    overflow: hidden; // position 속성 값이 absolute 혹은 fixed인 요소여야하고, 만약 overflow 속성 값이 visible일 경우에는 적용이 되지 않는다

2. is기법

이미지 스프라이팅 기법이란?

• 여러 개의 이미지 파일들을 하나의 파일로 병합해서 배경으로 처리하는 기법.

웹페이지에 이미지가 많을 경우, 서버에서는 해당 이미지 수 만큼의 요청을 해야하므로 웹페이지의 로딩 시간이 오래 걸리는데, 이미지 스프라이팅 기법을 사용할 경우 대응이 가능하다.