[HTML,CSS] 웹 접근성 이미지 표현, IR기법

jsg_ko·2020년 12월 1일
8

웹 접근성

목록 보기
1/1

이미지를 표현하는방법

  • html- img 태그로 표현 (이미지가 의미가 있을 때)

    <a href="#" class="icon1"><img src="이미지경로" alt="아이콘1"></a>

    alt 태그
    이미지가 없을때 출력할 대체 문자 표현 (웹접근성조건)

  • css- background 속성으로 표현 (이미지가 의미가 없을 때) / 대체문자x

    a { background: url(../img/icon.png) repeat-x}


요즘 사이트는 이미지를 모두 background 속성으로 표현

왜? 백그라운드로 만들면 편하다

  • 이미지 스프라이트 기법(다수의 이미지를 하나의 이미지에 포함시키고 좌표와 크기지정을 통해 추출하여 사용하는 방식) 으로 이미지를 한번에 정렬하여 작업하면 수정하기 편하고 이미지용량이 더 줄어든다.
    대신 가상으로 대체 문자를 만들어주기 위해 IR기법 사용 (웹 표준을 준수하기위해)

웹표준을 준수하기 위한 가상 대체문자 기법

IR 기법(Image Replacement)은 무엇인가?

  • IR 기법은 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다.

  • 여러 가지 기법 중에서 Phark Method와WA IR, Screen out 기법을 주로 사용하여 대체텍스트를 제공할수있다.

Phark Method

  • 의미있는 이미지의 대체 텍스트를 제공하는 경우
  • 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으 로 (-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하 는 방법

    .ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;}

WA IR

  • 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용

  • 이미지로 대체 할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 화면에 보이지 않게 처리

    .ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;}

Screen Out

  • 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공 할 떄

    .ir_so {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;}

profile
디버깅에서 재미를 추구하면 안되는 걸까

0개의 댓글