웹접근성을 위한 마크업

패션몰이나 쿠팡과 같은 웹페이지를 확인하다보면 할인율이라던가 구매 평점이 들어가 있는 경우를 더러 볼 수 있을 것입니다.

보통은 웹페이지를 확인하면 아 구매평점이구나 라고 생각을 할 수 있지만, 스크린리더를 사용하는 사용자들의 경우 스크린리더를 통해 읽은 내용만으로 이 내용을 확인하는데는 어려움이 있습니다.

이러한 스크린 리더사용자들도 이해할 수 있도록 화면에 보이는 요소 앞에 따로 설명을 위한 태그를 추가해 배송유형, 평점, 구매리뷰 등의 설명을 달 수 있습니다.

(만약, 태그를 직접적으로 추가하기가 어렵다면 웹페이지상에 보이는 태그에 ::before나 ::after요소를 추가해 설명을 붙일 수도 있습니다.)

1. 설명을 위한 태그를 추가한 경우

<div class="product__delivery">
  <span class="sr-only">배송유형</span>
  <img src="./assets/icon/badge-rocket.svg" alt="로켓배송">
</div>
<div class="product__ratingStar">
  <span class="sr-only">구매자 평점</span>
  <span class="ratingStar score4-5" aria-label="5점 만점에 4.5점"></span>
</div>
<div class="product__review">
  <span class="sr-only">리뷰 수</span>
  <span class="review">(1,807)</span>
</div>

이렇게 설명을 위한 태그를 추가한 경우에는 화면에서 보이지 않도록 처리를 해주어야 합니다.

위 코드의 경우 스크린리더 사용자들을 위해 작성한 태그의 경우 class="sr-only"를 부여했습니다.

물론 display:none속성을 이용해 화면에서의 보이는 부분을 지울 수도 있지만 이 경우 스크린리더 역시 접근을 할 수가 없기에 다른 방안을 찾아봐야합니다.

따라서 스크린 리더도 접근할 수 있도록 clip속성을 이용해 화면에서 보이지 않도록 처리를 해보도록 하겠습니다.
( ▶[CSS] 웹접근성 측면에서의 텍스트 숨김 처리에서 다양한 방법을 확인할 수 있습니다. )

/* Hidden Content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: polygon(0 0,0 0,0 0);
  white-space: nowrap;
}

※width와 height의 크기를 0으로 하지 않고 1px를 남겨두는 이유는 스크린리더와 같은 보조기기가 가상커서를 사용해 화면을 선택하기 때문에 최소한의 focus영역을 남긴 것입니다.

clip-path: polygon(0 0,0 0,0 0);을 통해 실제로 화면에서 보이지 않는 영역을 잘라냈기 때문에 실제로 숨겨진 것과 같은 트릭을 만들어낼 수 있습니다.

▶clippy사이트홈페이지를 이용한다면 clip속성을 이용해 화면에 보이는 영역을 잘라냈는지를 더 쉽게 이해할 수 있습니다.😊