aria-label vs sr-only 차이

웹 접근성에서 언제 사용해야 할까?

웹 접근성을 고려한 퍼블리싱을 하다 보면 자주 등장하는 두 가지 방법이 있다.

• aria-label
• sr-only

둘 다 스크린리더 사용자에게 정보를 전달하기 위한 방법이지만
사용 목적과 상황은 조금 다르다.

실무에서 헷갈리기 쉬운 aria-label vs sr-only 차이를 정리해보자.

 

 

aria-label이란?

aria-label은 ARIA 속성 중 하나로
요소의 이름(라벨)을 스크린리더에게 제공하는 역할을 한다.

예를 들어 아이콘 버튼이 있다고 가정해보자.

 

<!-- HTML -->

<button aria-label="검색">
  <span class="icon-search"></span>
</button>

 

화면에는 아이콘만 보이지만
스크린리더는 다음처럼 읽는다.

"검색 버튼"

 

즉 aria-label은

✔ 화면에 텍스트가 없어도
✔ 스크린리더에 설명을 제공한다.

---

sr-only란?

sr-only는 CSS 패턴으로
화면에서는 보이지 않지만 스크린리더에서는 읽히는 텍스트를 만든다.

 

<!-- HTML -->

<button>
  <span class="icon-search"></span>
  <span class="sr-only">검색</span>
</button>

 

여기서

• 화면에는 아이콘만 보이고
• 스크린리더는 "검색 버튼"을 읽는다.

즉 sr-only는

숨겨진 텍스트를 통해 접근성 정보를 제공하는 방식이다.

---

aria-label vs sr-only 차이

구분	aria-label	sr-only
방식	ARIA 속성	숨김 텍스트
실제 텍스트 존재	없음	있음
CSS 필요	없음	필요
SEO 텍스트	없음	있음
접근성 안정성	상황에 따라 다름	일반적으로 안정적

 

언제 aria-label을 사용해야 할까?

다음 상황에서는 aria-label을 사용하는 것이 좋다.

 

1. 아이콘 버튼

<!-- HTML -->

<button aria-label="검색">
  <svg>...</svg>
</button>

 

아이콘만 있는 경우
간단하게 접근성을 추가할 수 있다.

 

2. 추가 설명이 필요할 때

<!-- HTML -->

<button aria-label="메뉴 열기">
  ☰
</button>

 

화면에 텍스트를 추가하지 않고
설명을 제공할 수 있다.

---

언제 sr-only를 사용해야 할까?

다음 상황에서는 sr-only가 더 좋다.

 

1. 실제 텍스트가 필요한 경우

<!-- HTML -->

<button>
  <span class="icon-search"></span>
  <span class="sr-only">검색</span>
</button>

 

텍스트가 실제 DOM에 존재하기 때문에
접근성 도구에서도 더 안정적으로 인식된다.

 

2. 스킵 네비게이션

<!-- HTML -->

<a href="#content" class="sr-only">
  본문 바로가기
</a>

 

웹 접근성에서 중요한 패턴이다.

 

3. 추가 설명 제공

<!-- HTML -->

<label>
  이메일
  <span class="sr-only">필수 입력 항목</span>
</label>

 

스크린리더 사용자에게
추가 정보를 전달할 수 있다.

---

실무에서는 무엇을 더 많이 사용할까?

퍼블리싱 실무에서는 보통 다음 기준으로 사용한다.

✔ 아이콘 버튼 → aria-label
✔ 숨겨진 설명 텍스트 → sr-only
✔ 접근성 추가 설명 → sr-only

즉

aria-label은 속성 기반 설명
sr-only는 숨겨진 텍스트 기반 설명

 

이라고 보면 이해하기 쉽다.

---

두 방법을 같이 써도 될까?

일반적으로는 둘 중 하나만 사용하는 것이 좋다.

예를 들어 다음 코드는 좋지 않다.

 

<!-- HTML -->

<button aria-label="검색">
  <span class="icon-search"></span>
  <span class="sr-only">검색</span>
</button>

 

스크린리더가 중복으로 읽을 가능성이 있기 때문이다.

 

---

정리

웹 접근성에서 aria-label과 sr-only는
같은 목적이지만 방식이 다르다.

상황	추천방법
아이콘 버튼	aria-label
숨겨진 설명	sr-only
접근성 추가 정보	sr-only
간단한 라벨 제공	aria-label

퍼블리싱 실무에서는
두 방법을 상황에 맞게 사용하는 것이 중요하다.