퍼블리싱을 하다 보면 디자인상 텍스트가 없어야 하지만, 검색 엔진 최적화(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>