[CSS] 웹접근성, IR 기법

IR기법이란?

웹 접근성을 준수하여 이미지에 대체 텍스트를 제공해야한다.
이렇게 작성한 대체 텍스트는 스크린리더기, 검색엔진의 내용 수집에 이용될 수 있다.

이미지에 의미가 있을 경우

: 로고이미지, 배너 슬라이드 이미지등 이미지에 의미가 담겨있는 경우.

alt

가장 보편적으로 사용되는 방법이다.
<img src="../image.jpg" alt="대체 텍스트"> 이처럼 alt에 대체할 텍스트를 넣으면된다.

IR기법

광고 이미지나 이미지에 텍스트가 많이 들어간 경우

• Phark Method : 대체 텍스트 제공 (덜 추천)
  추가적인 태그가 필요 없어서 편하지만,
  이미지가 없을경우 스크린 리더기에서만 읽히고 일반 사용자는 텍스트를 확인할 수 없다.

  <button class='add'>추가</button>
  <style>
    .add{
      text-indent: -9999px;
    }
  </style>
  

• WA IR : 이미지가 없어도 대체 텍스트를 보여줄 수있다. (추천👍)

  <button class='add'>
    <span>추가</span>
  </button>
  <style>
    .add{
      background-image: url('') ;
    }
    .add span{ 
      position: relative; 
      z-index: -1; 
    }
  </style>
  

• HTML5 BoilerPlate 이나 부트스트랩에서 사용하는 방법

  span{
    position: absolute; /* position: absolute/fixed 에서만 clip 속성 작동 */
    margin: -1px; /* 부트스트랩에선 안씀 */
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    overflow: hidden; /* overflow: visible 이면 clip 속성 작동 안됨 */
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%); /* H5BP에선 안씀 */
  }
  

✔ 구지 저런 방식으로 하는 이유는 다음과 같은 경우 스크린 리더기가 읽어주지 않기 때문이다.

• display:none
• visibility: hidden;
• 아래와같이 사이즈가 0일 경우

  div{
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
  }
  

이미지에 의미가 없을 경우

: 예를 들면 background에 들어가는 배경 이미지 같은경우, 혹은 icon인데 바로 옆에 icon에 대한 설명이 있어 icon에대한 설명이 따로 필요가 없는 경우가 될 수있을 것 같다. img태그를 사용하지 않고 background로 처리해준다. background를위해 따로 태그를 만들어야하는 상황이라면 ::before,::after를 통해 html에 무의미한 태그 생성을 막을 수 있다.

< Refer to >
The Image Replacement Museum 스크린리더 사용자를 위한 IR(Image Replacement)기법과 추가 설명 제공하기