[🥸HTML/CSS]📝웹 접근성 스크린리더 관련 클래스명➰(sr-only)

✅`visually-hidden`
◾ 시각적으로 숨기면서 스크린 리더 사용자에게는 접근할 수 있도록 해줍니다.
◾ 시각적으로는 보이지 않아야 하지만 보조 기술에는 제공되어야 하는 텍스트나 정보에 사용됩니다.

 

✅ `sr-only`
◾  스크린 리더에서만 보이는 텍스트를 생성합니다.
◾  스크린 리더 사용자에게만 읽히는 보조 텍스트나 설명을 제공할 때 사용됩니다.

 

✅ `off-screen`
◾  화면에서 숨기지만 스크린 리더에는 접근할 수 있도록 합니다.
◾  페이지의 시각적 디자인에는 영향을 주지 않으면서 스크린 리더 사용자에게만 정보를 제공할 때 사용됩니다.

 

✅ `a11y-hidden`
◾  스크린 리더에서 접근을 허용하면서 시각적으로는 숨깁니다.
◾  보조 기술을 통해 정보가 제공되어야 하며, 시각적 디자인에는 영향을 미치지 않아야 할 때 사용됩니다.

 

✅ `hidden`
◾  시각적으로 숨기며 스크린 리더 사용자에게도 숨깁니다.
◾  페이지에서 특정 요소를 완전히 제거하고 싶을 때 사용됩니다.

 

 ✅ `focusable`
◾  포커스를 받을 수 있게 하는 클래스
◾  포커스 가능한 요소를 시각적으로 구분하여, 키보드 탐색이 용이하도록 돕습니다.