반응형

2026/03/05 2

aria-label vs sr-only 차이

웹 접근성에서 언제 사용해야 할까?웹 접근성을 고려한 퍼블리싱을 하다 보면 자주 등장하는 두 가지 방법이 있다.aria-labelsr-only둘 다 스크린리더 사용자에게 정보를 전달하기 위한 방법이지만사용 목적과 상황은 조금 다르다.실무에서 헷갈리기 쉬운 aria-label vs sr-only 차이를 정리해보자. aria-label이란?aria-label은 ARIA 속성 중 하나로요소의 이름(라벨)을 스크린리더에게 제공하는 역할을 한다.예를 들어 아이콘 버튼이 있다고 가정해보자. 화면에는 아이콘만 보이지만스크린리더는 다음처럼 읽는다."검색 버튼" 즉 aria-label은✔ 화면에 텍스트가 없어도✔ 스크린리더에 설명을 제공한다.sr-only란?sr-only는 CSS 패턴으로화면에서는 보이지 않지만 ..

sr-only 클래스 사용법

웹 접근성을 위한 숨김 텍스트 처리 방법웹 퍼블리싱을 하다 보면 화면에는 보이지 않지만 스크린리더에는 읽히도록 해야 하는 텍스트가 필요할 때가 있다.대표적인 예가 바로 다음과 같은 경우다.아이콘 버튼 설명추가 설명 텍스트접근성 보조 문구스킵 네비게이션이럴 때 사용하는 것이 바로 sr-only 클래스다. sr-only란 무엇인가?sr-only는 screen reader only의 약자다.즉, 화면에서는 보이지 않지만스크린리더에서는 읽히는 텍스트 를 만들기 위한 CSS 패턴이다.예를 들어 이런 버튼이 있다고 하자. 이 경우 스크린리더는 버튼의 의미를 알 수 없다.그래서 보조 텍스트를 추가해야 한다. 검색 이렇게 하면화면에는 아이콘만 보이고스크린리더는 검색 버튼으로 읽는다.sr-only CSS 코드..

반응형