1. IR 기법 소개

• Image Replacement

• 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것

• img 태그의 alt 속성 값으로 표현하기에 대체 텍스트가 너무 길거나, CSS background 속성을 사용하여 처리한 의미 있는 이미지일 경우, 마크업으로 대체 텍스트를 제공한다.

2. 요소 숨김 처리

CSS로 대체 텍스트를 화면에서 숨기기

1) BAD 🤬

• 스크린 리더가 인식하지 못하기 때문에, 다음 중 어느 속성이라도 사용하지 말것!

/* 투명도를 0으로 주는 것과 동일하게 화면에서 사라지지만, 스크린 리더 인식 안함 */
visibility: hidden;

/* 요소가 아예 없는 것으로 인식 */
display: none;

/* 요소의 사이즈를 0으로 만들면 스크린 리더 인식 안함 */
width: 0;
height: 0;
font-size: 0;
line-height: 0;

2) So so 😑

• 스크린 리더가 인식하지만 레이아웃이나 성능 등에 이슈가 발생할 수 있음

/* 투명해진 것 뿐, 위치를 그대로 잡고 있기 때문에 단독으로 사용 불가능 */
opacity: 0;

/* 전체 레이어의 크기가 지나치게 크게 잡힘: 성능 이슈  */
text-indent: -9999px;

/* position 속성 추가해야 함: 성능 이슈  */
z-index: -1;

3) Best 😁

• 스크린 리더가 인식하면서 레이아웃이나 성능 등에 영향을 미치지 않음

<span class=" visually-hidden">숨김 텍스트</span>

. visually-hidden {
    /* 레이아웃에 영향을 끼치지 않도록 */
    position: absolute;

    /* 스크린 리더가 읽을 수 있도록 */
    width: 1px;
    height: 1px;

    /* 눈에 보이는 부분을 제거 */
    clip: rect(0 0 0 0);
    margin: -1px;
    overflow: hidden;
}

※ 클래스명으로 blind를 쓰면 스크린 리더 사용자들에게 공격적으로 느껴질 수 있다. 가능하면 visually-hidden나, vh등의 대체 클래스명을 사용하자.

4. 프로모션 페이지 제작

주요 태그 및 속성

• HTML
  h1, ol, ul, p, strong, a, div
• CSS
  position, width, height, background, margin

1) before

2) after

• css

.wrap {
    position: relative;
    width: 1020px;
    height: 650px;
    margin: 0 auto;
    background: url("./img.png") no-repeat 0 0;
}

ol {
    list-style: none;
}

body, ol {
    margin: 0;
    padding: 0;
}

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

.link_point {
    position: absolute;
    left: 100px;
    bottom: 130px;
    width: 133px;
    height: 22px;
}

.link_join {
    position: absolute;
    bottom: 32px;
    left: 340px;
    width: 340px;
    height: 70px;
}

ol {
    list-style: none;
}

body, ol {
    margin: 0;
    padding: 0;
}

.wrap {
    position: relative;
    width: 1020px;
    height: 650px;
    margin: 0 auto;
    background: url("./img.png") no-repeat 0 0;
}

5. 요약 정리

• 언제 사용할까?
  img 태그 사용 시, 대체 텍스트가 너무 긴 경우
  background-image 속성으로 처리한 의미 있는 이미지

• 어떻게 사용할까?
  시멘틱 마크업 유지
  스크린 리더 인식 가능하고, 레이아웃과 성능에 영향이 없는 CSS 속성 사용
  .vh 클래스 활용 (아직 bilnd로 많이 쓰는듯하다)