sr-only가 뭐지?

챙·2026년 1월 11일

기존에 있던 코드를 보거나, 레퍼런스 코드를 볼때면 한번씩 만났던 sr-only 라는 클래스를 종종 본적이 있다.
그때마다 별 생각 없이 넘어가곤 했는데, 이번 프로젝트에서 웹접근성 개선을 진행하다가 sr-only에 대해 알게되었다!

까먹기전에 블로그에 정리해보려고 한다.

sr-only란 무엇인가?

sr-only는 "Screen Reader Only"의 약자이다.
말 그대로 시각적으로는 화면에서 보이지 않지만, 스크린 리더(화면 읽기 프로그램)는 해당 내용을 인식하여 읽어줄 수 있도록 처리하는 CSS 기법이다.

실제로 웹접근성을 측정하는 방법 중 하나인 lighthouse의 Accessibility에 항목에 sr-only가 포함된다고 한다.

언제 사용하는데?

아이콘 버튼을 만들다 보면 아래와 같이 만들곤 한다.

<button>
  <MenuIcon />
</button>

이렇게 버튼을 만들면 화면에서는 문제가 없지만,
스크린리더가 만나게 되면

읽는 내용: "버튼" (끝)
사용자 반응: "이게 무슨 버튼이지? 뭘 하는 버튼이야?"

이렇게 되어 버린다.

그렇기 때문에 스크린리더로 접근하는 사용자를 위해

<button>
  <span class="sr-only">전체 메뉴 보기</span>
  <MenuIcon />
</button>

화면에는 노출되지는 않지만, 스크린리더가 읽을 수 있는 텍스트를 제공하는 것이다.

왜 display: none은 안 되는데?

가장 흔히 하는 실수 중 하나가 display: none이나 visibility: hidden을 사용하는 것이라고 한다.

display: none / visibility: hidden: 요소를 화면에서 지울 뿐만 아니라, 접근성 트리(Accessibility Tree)에서도 완전히 제거한다. 즉, 스크린 리더도 이 요소를 완전히 무시하게 된다.
sr-only: 요소를 1px 크기로 아주 작게 만들거나 보이지 않는 영역으로 밀어내어, 눈에는 안 보이지만 리더기는 텍스트를 인식할 수 있는 상태를 유지하는 것이 차이를 가진다.

Tailwind CSS에서 사용하기 (추천)

최근 실무에서 가장 많이 쓰이는 Tailwind CSS는 sr-only를 유틸리티 클래스로 기본 제공한다. 따로 CSS 코드를 짤 필요 없이 클래스명만 추가하면 되어 아주 편리하다!

<button class="p-2">
  <XIcon /> <span class="sr-only">닫기</span>
</button>

Tip: 특정 상황(예: 키보드 포커스 시)에서 다시 보이게 하고 싶다면 not-sr-only 클래스를 조합해서 사용할 수 있다.

직접 CSS로 구현하는 방법

Tailwind를 사용하지 않는 환경이라면 일반적으로 아래의 표준 CSS 코드를 사용한다.
단순히 투명도를 조절하는 것이 아니라, 브라우저가 '내용이 있다'고 판단하게 만드는 속성들의 조합이라고 한다.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0); /* 과거 브라우저 대응 */
  clip-path: inset(50%); /* 현대 브라우저 표준 */
  white-space: nowrap;
  border-width: 0;
}

주요 활용 사례

아이콘 전용 버튼

검색, 메뉴, 닫기 등 아이콘만 노출되는 UI에 필수이다!

<button>
  <span class="sr-only">전체 메뉴 보기</span>
  <MenuIcon />
</button>

폼 레이블(Label) 생략 시

디자인상 레이블을 숨기고 placeholder만 노출하더라도, 접근성을 위해 레이블은 sr-only로 존재해야 합니다.

<label for="search" class="sr-only">검색어 입력</label>
<input type="text" id="search" placeholder="검색어를 입력하세요">

동적 상태 메시지

로딩 스피너나 알림 배지 등 시각적 변화가 일어날 때 구체적인 설명을 텍스트로 제공합니다.

<div class="badge">
  5
  <span class="sr-only">읽지 않은 알림 5개</span>
</div>

끝마치며

웹 접근성은 거창한 기술보다 이런 작은 배려에서 시작된다는걸 깨달았다. . .
여지껏 스킬적인 업그레이드만을 생각하며 실제로 유저가 사용하는 서비스를 만들면서 접근성을 등한시 한게 아쉽다. . . 앞으로 이런 많은 다양한 사용자를 고려하는 포인트를 가져가고 싶다!
만드는 서비스, 앞으로 만드는 서비스에서도 sr-only 꼭 챙겨야지
tailwind에 기본으로 제공하니 사용하기에도 너무 쉬울 것 같다..!