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

비추천

• display: none

• visibility: hidden

• 요소의 크기를 0으로 만들기

 width: 0;
 height: 0;
 font-size: 0;
 line-height: 0;

• opacity: 0

• text-indent: -9999px

• position을 이용해서 화면에서 밀어내기

.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);
}

참고 자료

웹 접근성을 고려하여 텍스트 숨기기

이전에 작성한 글에서 콘텐츠의 영역마다 제목을 지정함으로써 스크린 리더 등 보조기기 사용자가 웹페이지를 이용하면서 콘텐츠를 이해하는데 도움을 받을 수 있다고 했다. 이렇게 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