검색 엔진과 스크린 리더를 위한 숨김 텍스트 정보
CSS 검색 엔진과 스크린 리더를 위한 숨김 텍스트본문
퍼블리싱을 하다 보면 디자인상 텍스트가 없어야 하지만, 검색 엔진 최적화(SEO)나 시각 장애인을 위한 스크린 리더에는 해당 정보를 알려줘야 하는 경우가 많습니다. 이때 흔히 사용하는 display: none이나 visibility: hidden은 치명적인 실수가 될 수 있습니다.
잘못된 숨김 처리 (안티 패턴)
/* 1. 스크린 리더조차 읽지 못함 */
.hidden { display: none; }
/* 2. 공간은 차지하는데 내용은 안 보임 */
.invisible { visibility: hidden; }
/* 3. 검색 엔진이 스팸으로 오인할 가능성 있음 */
.text-indent { text-indent: -9999px; }
문제점: display: none은 브라우저의 렌더링 트리에서 제외되므로 보조공학기기(스크린 리더)가 인지할 수 없습니다. 또한 과도한 text-indent는 성능 저하 및 SEO 패널티 위험이 있습니다.
올바른 숨김 처리 (IR 기법 / SR-Only)
SIR 및 글로벌 표준에서 권장하는 '시각적으로만 숨기는' CSS 클래스입니다.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
예를들어서
쇼핑몰이나 게시판의 "닫기" 버튼이 텍스트 없이 X 아이콘만 있을 때 사용합니다.
<button type="button" class="btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
<span class="sr-only">팝업 닫기</span>
</button>
1
댓글 1개
도움이 됐습니다 : )
