sr-only(Screen Reader Only)

화면에는 보이지 않지만 스크린리더에서는 읽을 수 있도록 하는 css클래스로, 주로 웹 접근성을 높이기 위해 사용됩니다.

form 요소를 사용하면서 라벨을 숨기고 버튼을 눌렀을 때도 radio 버튼이 선택될 수 있도록 구현해야 했습니다.
하지만 라벨을 완전히 제거하면 접근성이 낮아지고, radio 버튼을 클릭하지 않는 이상 선택할 수 없는 문제가 발생합니다.
이를 해결하기 위해 라벨을 화면에서는 숨기지만, 스크린 리더가 읽을 수 있도록 sr-only를 적용하는 것이 적당해보였습니다.

별도의 스타일을 정의하지 않고 className="sr-only"만 추가했는데, 자동으로 적용되었습니다.

⚠️ 하지만!
해당 기능은 Tailwind CSS와 Bootstrap에서만 기본 적용되는 기능이며 제가 사용 중인 SCSS환경에서는 제공되지 않아 직접 정의해야한다고 합니다...?

개발자도구에서 어디서 적용되었는지 확인해보니

이와 같이 적용되어 있습니다.

.fa-sr-only와 같이 적혀있는 것으로 봐서 사용중인 Font Awesome 라이브러리에 적용되어 있어서 별도의 정의없이도 적용되었던 것 같습니다.

---

결론

• Tailwind CSS와 Bootstrap에서는 기본 제공되는 요소이다.
  - Tailwind CSS에서는 class="sr-only" 만 적으면 자동으로 스타일 적용됨
  - Bootstrap에서는 Bootstrap4까지는 class="sr-only", Bootstrap5부터는 class="visually-hidden"을 적으면 된다.

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

  를 따로 정의하면 된다!