HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🚀
개발 노트
/
📐
웹 접근성을 고려한 텍스트 숨김
📐

웹 접근성을 고려한 텍스트 숨김

 

비추천

  • display: none
  • visibility: hidden
  • 요소의 크기를 0으로 만들기
  • opacity: 0
  • text-indent: -9999px
  • position을 이용해서 화면에서 밀어내기

추천

clip-path를 이용해서 숨기기
clip-path: 지정된 클리핑 범위의 바깥 부분을 숨겨주는 속성이다.
이 방법은 화면에서 요소를 숨기고, 스크린 리더가 해당 요소의 텍스트를 읽을 수 있으며,
보조기기가 접근했을 때 화면 스크롤의 움직임을 막을 수 있다.
 

참고 자료

웹 접근성을 고려하여 텍스트 숨기기
이전에 작성한 글에서 콘텐츠의 영역마다 제목을 지정함으로써 스크린 리더 등 보조기기 사용자가 웹페이지를 이용하면서 콘텐츠를 이해하는데 도움을 받을 수 있다고 했다. 이렇게 heading태그를 이용하여 각 영역에 제목을 입력하면 시각장애인의 사이트 탐색이 용이하고, 사이트의 컨텐츠에 대한 이해를 높일수 있기 때문에 텍스트를 넣어주는데 디자인상으로는 필요없으므로 숨김처리를 해야한다. 텍스트를 화면에 표시하지 않게 하는 방법에는 여러가지가 있다.
웹 접근성을 고려하여 텍스트 숨기기
https://velog.io/@ursr0706/%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%84-%EA%B3%A0%EB%A0%A4%ED%95%98%EC%97%AC-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%88%A8%EA%B8%B0%EA%B8%B0
웹 접근성을 고려하여 텍스트 숨기기
 
width: 0; height: 0; font-size: 0; line-height: 0;
.offscreen { position: absolute; top: -9999px; overflow: hidden; }
.a11y-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }