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 패턴이다.
주로 다음 상황에서 사용한다.
- 아이콘 버튼 설명
- 접근성 보조 텍스트
- 스킵 네비게이션
- 추가 설명 제공
웹 접근성을 고려한 퍼블리싱에서는
자주 사용하는 필수 패턴 중 하나다.