웹접근성을 위한 IR기법

| 웹접근성이란?

: 고령자 또는 장애인분들이 웹 사이트를 이용함에 있어서 비장애인과 차별없이 동등한 정보에 접근하고 이용할 수 있도록 보장하는 법적의무사항이다.

• 참고 사이트 ( http://www.wa.or.kr/m1/sub1.asp )

| IR( Image Replacement ) ?

: 이미지를 볼 수 없는 사용자에게 일반 사용자와 동등한 정보를 습득할 수 있게끔 적절한 대체 텍스트를 제공해주는 기법이다.

|| img tag ( HTML5 )

• 구성

  <img src="" alt="">

• 이미지 대체 텍스트 작성

  <img src="이미지 경로 작성" alt="대체할 텍스트 작성">

  : 이미지 파일의 경로오류, 파일 깨짐, 삭제로 인해 로딩하지 못함의 문제가 있을때, alt 속성에 써놓은 텍스트가 출력이 된다.

|| Background img ( CSS )

: CSS 이미지 스프라이트(Image Sprite)* 작업시에는 css파일에서 background-img(또는 background)로 작업하기 때문에 alt속성을 사용하여 대체 텍스트를 제공할 수 없기 때문에, IR기법을 사용해주면 된다.

• Image Sprite 설명 ( http://www.tcpschool.com/css/css_basic_imageSprites )

|| IR 기법 사용하기

: 비장애인이 보는 웹사이트 화면에서는 대체 텍스트 대신 작성한 텍스트가 보이지 않게 숨기고, 작성되었으나 숨겨져있는 텍스트는 스크린리더 사용자가 스크린리더에서 읽을 수 있게끔 작업해주면 된다.

• 스크린리더가 읽을 수 없는 방식
  • display : none 사용
    : 화면에서 사라지고 스크린리더가 해당 요소가 없는것으로 인식하여 읽을 수 없음
  • visibility : hidden 사용
    : 화면에서 사라지고 스크린리더에서 인식하지 못하여 읽을 수 없음
  • 사이즈 값을 전부 0으로 사용
    : width, height, font-size, line-height > 0으로 처리한다면 화면에서 사라지고 스크린리더도 인식하지 못하여 읽을 수 없음.

  ---

• 스크린리더가 인식하지만 이슈 발생 가능성이 있는 방식
  • opacity : 0 사용
    : 투명도가 0이 된 것 뿐, 요소의 크기는 그대로 갖고 있기 때문에 단독으로 사용할 수 없다.
  • text-indent : -9999px 사용
    : 전체 레이어가 지나치게 크게 잡혀 성능적인 이슈가 생길 수 있다. - 그렇게 크게 문제가 되지 않는다.
    ( * 100%로 처리하면 성능적인 이슈를 피할 수 있다. )
  • z-index : -1
    : 이미지의 뒷편으로 보내는 것이지만 사용할 때마다 position 속성을 사용해줘야 해서 성능적인 이슈가 발생한다.

  ---

• 스크린리더에서 인식되고 화면에서도 보이지 않으며 성능적인 이슈가 없는 방식
  • sr-only ( bootstrap에도 있어서 class만 추가하면 적용이 된다고 한다. )
    • 구성

     position: absolute; // 레이아웃에 영향을 끼치지 않게
      
      overflow: hidden; // 지정된 영역을 벗어난 부분을 보이지 않게
      
      width: 1px;   // 스크린 리더가 읽을 수 있게
      height: 1px;
      
      margin: -1px; // 구버전(IE) 호환성을 위해
      
      clip: rect(0, 0, 0, 0); // 네개의 좌표로 지정한 직사각형 모양대로 요소를 잘라내는 속성
      clip-path: polygon(0 0, 0 0, 0 0);
      
      white-space: nowrap; // 요소의 공백을 처리 (줄바꿈을 하지 않는다)