접근성 관점에서 aria-label과 visually hidden text는 언제 사용하나요?

아이콘 버튼처럼 시각적으로는 의미가 분명하지만 텍스트가 없는 UI는 스크린 리더 사용자에게 불친절할 수 있습니다. 이때 접근 가능한 이름(accessible name)을 제공해야 합니다.

aria-label은 요소에 직접 읽힐 이름을 부여합니다.

<button aria-label="검색">
  <SearchIcon />
</button>

짧고 고정된 이름에는 적합하지만, 화면에 보이는 텍스트와 다르면 사용자 경험이 어긋날 수 있습니다. 번역 관리도 놓치기 쉽습니다.

visually hidden text는 화면에는 보이지 않지만 보조 기술에는 읽히는 텍스트를 DOM에 넣는 방식입니다.

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

이 방식은 실제 텍스트 노드가 있어 번역, 테스트, 콘텐츠 관리가 비교적 자연스럽습니다. 상태가 바뀌는 버튼이라면 “메뉴 열기/닫기”처럼 현재 동작을 명확히 전달해야 합니다.

주의할 점은 ARIA로 잘못된 의미를 덮어쓰기보다 먼저 semantic HTML을 쓰는 것입니다. 버튼이면 div role="button"보다 button을 쓰는 것이 기본입니다. ARIA는 부족한 의미를 보완하는 도구이지, HTML 의미론을 대체하는 만능키가 아닙니다.