sr-only 클래스 사용법

웹 접근성을 위한 숨김 텍스트 처리 방법

웹 퍼블리싱을 하다 보면 화면에는 보이지 않지만 스크린리더에는 읽히도록 해야 하는 텍스트가 필요할 때가 있다.

대표적인 예가 바로 다음과 같은 경우다.

• 아이콘 버튼 설명
• 추가 설명 텍스트
• 접근성 보조 문구
• 스킵 네비게이션

이럴 때 사용하는 것이 바로 sr-only 클래스다.

 

sr-only란 무엇인가?

sr-only는 screen reader only의 약자다.

즉,

 

화면에서는 보이지 않지만
스크린리더에서는 읽히는 텍스트

 

 

를 만들기 위한 CSS 패턴이다.

예를 들어 이런 버튼이 있다고 하자.

<!-- HTML -->

<button>
  <span class="icon-search"></span>
</button>

 

이 경우 스크린리더는 버튼의 의미를 알 수 없다.

그래서 보조 텍스트를 추가해야 한다.

<!-- HTML -->

<button>
  <span class="icon-search"></span>
  <span class="sr-only">검색</span>
</button>

 

이렇게 하면

• 화면에는 아이콘만 보이고
• 스크린리더는 검색 버튼으로 읽는다.

---

sr-only CSS 코드

웹 접근성에서 많이 사용하는 기본 코드다.

/* 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;
}

 

이 코드는

• 화면에서 보이지 않게 하고
• 스크린리더에는 읽히도록 유지한다.

---

sr-only 사용 예시

1. 아이콘 버튼 접근성

<!-- HTML -->

<button class="btn_search">
  <span class="icon-search"></span>
  <span class="sr-only">검색</span>
</button>

 

아이콘만 있는 버튼은
스크린리더에서 의미를 알 수 없기 때문에
보조 텍스트를 반드시 제공해야 한다.

 

2. 추가 설명 제공

<!-- HTML -->

<p>
  회원가입
  <span class="sr-only">필수 입력 항목</span>
</p>

 

화면에는 보이지 않지만
스크린리더 사용자에게 추가 정보를 제공할 수 있다.

 

3. 스킵 네비게이션

웹 접근성에서 중요한 패턴이다.

<!-- HTML -->

<a href="#content" class="sr-only focusable">
  본문 바로가기
</a>

 

키보드 사용자는
페이지 시작 시 바로 콘텐츠로 이동할 수 있다.

---

sr-only 사용 시 주의할 점

1. display:none 사용하면 안 된다

/* CSS */

display:none;

 

이렇게 하면

• 화면에서도 안 보이고
• 스크린리더에서도 읽히지 않는다.

즉 접근성 기능이 사라진다.

 

2. visibility:hidden도 사용하지 않는다

이 역시 스크린리더에서 읽히지 않는다.

접근성 텍스트는 반드시
sr-only 패턴을 사용해야 한다.

 

3. 의미 없는 텍스트는 넣지 않는다

다음처럼 의미 없는 텍스트는 좋지 않다.

<!-- HTML -->

<span class="sr-only">버튼</span>

 

대신

 

<!-- HTML -->

<span class="sr-only">검색</span>

 

처럼 명확한 역할을 설명해야 한다.

---

sr-only 대신 aria-label을 써도 될까?

아이콘 버튼 같은 경우
aria-label을 사용하는 방법도 있다.

 

<!-- HTML -->

<button aria-label="검색">
  <span class="icon-search"></span>
</button>

 

차이는 다음과 같다.

방법	특징
aria-label	속성으로 설명 제공
sr-only	실제 텍스트 존재

 

둘 다 접근성에 사용할 수 있지만
텍스트가 있는 것이 더 안정적인 경우가 많다.

 

---

정리

sr-only는

화면에는 보이지 않지만
스크린리더에게 정보를 전달하기 위한 CSS 패턴이다.

 

주로 다음 상황에서 사용한다.

• 아이콘 버튼 설명
• 접근성 보조 텍스트
• 스킵 네비게이션
• 추가 설명 제공

웹 접근성을 고려한 퍼블리싱에서는
자주 사용하는 필수 패턴 중 하나다.