IR(Image Replacement)기법

의미가 있는 이미지를 사용할 때는 이미지의 대체 텍스트를 반드시 작성해주어야 한다
웹 접근성 측면에서 개발자는 이미지를 볼 수 없는 환경 혹은 시각장애를 가진 사용자를 고려해야 하기 때문

 

 

image 태그 사용시 alt="" 값에 이미지에 대한 설명을 써주지만

background에 이미지를 삽입하는 상황에서는 어떻게 대체 텍스트를 작성할 수 있을까?

 

또 image 태그의 alt 속성에 작성해야 할 텍스트가 너무 길어지는 상황에서는 더 시맨틱하게 의미를 전달할 방법은 없을까?

 

 

IR기법이란? 

Image Replacement 의 약자로, 이미지를 볼 수 없는 사용자에게 이미지에 대한 설명을 제공해야 할 때

사용자에게 대체된 텍스트를 제공하는 기법.

 

 

방법 1) text-indent 활용

text-indent : 문자의 들여쓰기를 적용하는 css 속성으로, inline 요소가 아닌 요소에 적용 가능

 

<적용방법>

1. inline 요소가 아닌 대체 텍스트 부분에 white-space: nowrap 을 적용해 글자가 넘치지 않게 한 줄 정렬해준다.

2. 대체 텍스트의 text-indent를 width값 이상으로 준다.

3. overflow: hidden 처리하여 넘쳐 흐른 것을 숨긴다.

 

이렇게 하면 텍스트가 화면에서는 보이지 않지만 시각 보조 기기에서는 읽힐 수 있음!

 

 

 

방법 2) aria-label 활용

aria-label 은 html 요소에 라벨링을 해 사용자에게 의미를 전달할 수 있게 해주는 속성

 

:

로고 이미지를 예로 들어보면

a태그로 감싸져 있는 로고이미지를 image 태그 혹은 background-image로 삽입한 로고 이미지를 클릭시

시각 장애가 있는 사용자는 해당 링크로 이동한다는 것을 알 수 없다.

 

이럴 때, aria-label 속성을 통해 "@@홈페이지로 이동"이라고 넣어주면 디자인을 위해 생략된 정보를 대신 전달할 수 있는 것

 

 

방법 3) position: absolute 활용

 

: offset 조절

position: absolute 는 부모 요소를 기준으로 자신의 위치를 지정할 수 있는 속성으로

대체 텍스트 요소의 position 을 absolute 로 주고 top과 left 값을 -9999px; 이런식으로 적용해 멀리 보내버리는(?) 방법이다.

 

: 부트스트랩의 .visually-hidden

sr-only로 정의되 클래스들은 부트스트랩이 visually-hidden으로 클래스명을 변경하기 전 사용하던 숨김스타일 클래스명인데,

sr-only(screen reader only : 스크린리더기에만 보여준다)에서 다른 보조기기들을 고려해 시각적으로 숨기겠다는 

visually-hidden으로 클래스명을 변경했다고 한다.

 

/* SCSS를 이용하여 정의된 부트스트랩의 숨김 스타일 */
@mixin visually-hidden() {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

 

 

:IFC / BFC 

(IFC와 BFC에 대해서는 이 글 참고해서 개념 정리해보기)

https://velog.io/@eenaree/Block-Formatting-Context

Block Formatting Context (BFC)

 

formatting 종류에 따라 나누는 이유는 position: absolute 는 BFC를 생성하는데 IFC와 함께 사용되면

하나의 섹션이 아닌 분리된 콘텐츠처럼 따로 읽음.

 

 

BFC(Block Formatting Context)

.hidden-text {
  position: absolute;
  z-index: -1;
  width: 1px;
  height: 1px;
  border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
}

 

 

IFC(Inline Formatting Context)

.hidden-text {
  overflow: hidden;
  display: inline-block;
  position: relative;
  z-index: -1;
  border: 0;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
}

 

 

.hidden-text { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; }