본문 바로가기
코딩 프로그래밍/Javascript 자바스크립트

네이버에서 사용하는 시각 장애인을 위한 웹접근성

by 프즈 2023. 6. 16.
반응형

네이버에서 아이콘을 사용할 때 한글 표시는 display none을 사용하는 것이 아니라 별도 css를 사용합니다. display none을 사용하면 스크린리더기와 같은 기기에서 인식하지 못하기 때문입니다.

<div><span class="blind">확장 영역</span></div>

확장 영역이라는 것을 알려줄때 blind라는 css를 사용하고 있어요. 

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

네이버에서는 display none 대신 화면에 보이지 않도록 조치하고 있어요. 

반응형

댓글