[Tailwind CSS] sr-only 클래스

sr-only 클래스

들어가며

• 테일윈드(Tailwind) CSS에서 사용할 수 있는 @sr-only@ 클래스에 대해 정리해본다.

 

sr-only 클래스

개념

• 시각장애인을 위한 스크린 리더(Screen Reader) 전용 클래스
• 이 클래스를 사용하면 해당 요소가 화면에는 보이지 않지만, 스크린 리더를 사용하는 사용자에게는 읽힐 수 있도록 설정된다.
• 시각장애인이 페이지를 탐색할 때 추가적인 정보를 제공할 수 있다.

 

사용하는 경우

• 의미를 명확히 하기 위해 보조 텍스트를 추가할 때
  • 예를 들어, 아이콘 버튼에 추가 설명을 덧붙일 때
• 접근성을 개선하기 위해 추가적인 텍스트가 필요하지만, 일반 사용자에게는 불필요한 정보를 숨기고 싶을 때

 

사용 예제

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

 

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

 

⇒ 요소를 화면에서 완전히 숨기지만, 시각적으로만 숨기는 것이므로 스크린 리더는 요소를 인식하고 읽을 수 있게 된다.

 

 

참고 사이트

Screen Readers - Tailwind CSS