sr-only 활용으로 웹 접근성을 고려해 콘텐츠 숨기기

웹 접근성은 웹사이트가 모든 사용자에게 동등하게 접근 가능하도록 만드는 것을 목표로 합니다. sr-only 기법은 스크린리더에선 읽히지만 시각적으로 보이지 않게 하는 방법으로 주로 Bootstrap의 클래스명으로 사용됩니다.

sr-only

sr-only(Screen Reader Only) 클래스는 요소의 내용을 시각적으로 숨기되 스크린 리더에게는 노출되도록 하는 기능으로 화면에 표시되지 않아도 되지만 스크린 리더 사용자에게 필요한 정보를 제공할 때 유용합니다.

예를 들어, 다음과 같이 로그인 폼의 각 입력 필드에 대응하는 <label> 요소를 추가할 수 있습니다

<label htmlFor="email" class="sr-only">이메일</label>
<input type="email" id="email" name="email" />

위 코드에서 class="sr-only"가 적용된 <label> 요소는 시각적으로 보이지 않지만, 스크린 리더를 사용하는 사람들은 "이메일" 이라는 설명을 듣고 해당 입력 필드가 어떤 정보를 입력받는지 알 수 있습니다.

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	clip: rect(0 0 0 0);
}

스크린 리더를 위해 숨겨진 요소를 만들 때 width와 height를 0px로 설정하면 스크린 리더에 의해 무시될 수 있으므로 1px로 설정해 해당 요소를 감지하게 만듭니다. 위 속성들로 실제로 보여질 영역을 없애 시각적으로 완전히 숨김니다. 하지만 이러한 방식으로 숨겨진 요소는 스크린 리더에 의해 여전히 접근 가능하므로, 스크린 리더 사용자에게 필요한 정보를 제공하는 데 사용할 수 있습니다.

CSS의 sr-only 클래스를 활용하여 시각적으로는 보이지 않지만 스크린 리더 사용자에게 필요한 정보를 제공함으로써 웹사이트의 접근성을 높일 수 있습니다.