아이콘 버튼의 accessible name을 점검하는 실제 순서

텍스트 없이 SVG 아이콘만 포함된 버튼에서 SVG에 aria-hidden='true'를 지정하고 버튼 자체에 대체 텍스트(aria-label 또는 .sr-only)를 제공하지 않으면 접근 가능한 이름이 빈 문자열(empty string)로 산출됩니다. 텍스트 없는 대화형 요소의 이름 계산 원리와 SVG 숨김·대체 텍스트 부여 방식을 분석합니다.

Accessible Name 산출 알고리즘과 SVG 아이콘의 문제

접근 가능한 이름은 보조기술이 컨트롤을 식별하는 데 사용되는 중요한 정보입니다.

버튼 내부의 <svg> 태그에 <title>이 지정되어 있더라도 브라우저와 스크린리더 조합에 따라 SVG의 이름 전파 동작이 다를 수 있으므로, 버튼 자체에 접근 가능한 이름을 제공하는 구현을 우선 검토하세요. 상위 button 요소에 명시적인 aria-label 또는 sr-only 텍스트를 제공하는 방법을 사용할 수 있으며, 지원 대상 환경에서 별도 확인이 필요합니다.

SVG 태그의 aria-hidden='true' 지정 필요성

<button aria-label='검색'><svg>...</svg></button> 구조를 작성할 때 내부 <svg> 요소에 aria-hidden='true' 속성을 주지 않으면, 일부 보조기술이 SVG 내부 경로(path)나 g 태그를 별도 그래픽 요소로 인지하여 자식 요소를 중복 탐색할 수 있습니다.

따라서 장식용 SVG 아이콘은 aria-hidden='true'로 브라우저 접근성 트리에서 숨기고, 버튼 상위 태그에 aria-label을 부여하는 것은 일반적으로 사용할 수 있는 구현 패턴 중 하나입니다.

아이콘 버튼 접근명 보완 구현 코드 모음

아이콘 버튼의 접근명을 보완하는 HTML/JSX 패턴 예시입니다.

• aria-label 권장 패턴: <button type='button' aria-label='검색'><svg aria-hidden='true'>...</svg></button>
• sr-only 권장 패턴: <button type='button'><svg aria-hidden='true'>...</svg><span class='sr-only'>검색</span></button>
• 주의 패턴: <button type='button'><svg>...</svg></button> (접근명 누락)