9/4 - h1 내용 숨기기

h1 텍스트 숨기기

웹 접근성을 고려하여 텍스트 숨기기 (velog.io)

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

웹 사이트의 제목을 h1으로 주고 싶은데, 텍스트 명은 숨기고 로고 이미지로 대체하고 싶어서

텍스트를 숨기는 방법을 찾아보았다.

 

윗 글을 정리하면 다음과 같다.

display: none;	영역에서 아에 사라지며, 검색엔진이 접근할 수 없고, 스크린리더가 읽을 수 없다.
width: 0;  height: 0; font-size: 0; line-height: 0;	일부 스크린리더가 해당 요소를 무시할 수 있다.
opacity: 0;	일부 스크린리더가 해당 요소를 무시할 수 있다.
text-indent: -9999px;	포커싱 되었을 때 제대로된 위치를 확인할 수 없다.
position: absolute; top: -9999px; overflow: hidden;	스크린리더가 읽을 때, 화면이 갑자기 튈 수 있어 사용성이 떨어진다.
position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0);	레이아웃에 영향을 주지 않으며, 스크린리더가 인식할 수 있다.