[HTML/CSS] 웹접근성을 위한 마크업
웹접근성을 위한 마크업
패션몰이나 쿠팡과 같은 웹페이지를 확인하다보면 할인율이라던가 구매 평점이 들어가 있는 경우를 더러 볼 수 있을 것입니다.
보통은 웹페이지를 확인하면 아 구매평점이구나 라고 생각을 할 수 있지만, 스크린리더를 사용하는 사용자들의 경우 스크린리더를 통해 읽은 내용만으로 이 내용을 확인하는데는 어려움이 있습니다.
이러한 스크린 리더사용자들도 이해할 수 있도록 화면에 보이는 요소 앞에 따로 설명을 위한 태그를 추가해 배송유형, 평점, 구매리뷰 등의 설명을 달 수 있습니다.
(만약, 태그를 직접적으로 추가하기가 어렵다면 웹페이지상에 보이는 태그에 ::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속성을 이용해 화면에 보이는 영역을 잘라냈는지를 더 쉽게 이해할 수 있습니다.😊
Author And Source
이 문제에 관하여([HTML/CSS] 웹접근성을 위한 마크업), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@0seo8/HTMLCSS-웹접근성을-위한-마크업저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)