인라인 SVG 그래픽과 아이콘의 접근성: role="img", <title>, <desc>의 올바른 활용법

웹 디자인과 프론트엔드 개발에서 SVG(Scalable Vector Graphics)는 해상도에 구애받지 않는 선명한 화질과 작은 파일 용량, CSS 및 JavaScript를 통한 자유로운 스타일링 능력 덕분에 사실상 모든 아이콘과 그래픽의 표준 포맷으로 등극했습니다. 그러나 많은 퍼블리셔가 피그마나 일러스트레이터에서 내보낸 복잡한 <svg><path d='...'/></svg> 코드를 HTML 문서에 그대로 복사해 붙여넣으면서, 보조공학 사용자에게 끔찍한 접근성 소음을 유발하고 있습니다. 스크린리더 엔진에 따라 수천 자에 달하는 무의미한 벡터 패스 좌표 문자열을 낭독해 버리거나, 반대로 중요한 통계 차트 그래픽을 아무런 설명 없이 통째로 무시해 버리는 극단적인 결함이 발생합니다. W3C SVG Accessibility API Mappings(SVG-AAM) 규격은 SVG가 전달하는 정보의 성격에 따라 장식용과 의미 전달용을 엄격히 구분하여 마크업할 것을 권고합니다. 이 글에서는 인라인 SVG의 접근 가능한 그래픽 설계 표준을 체계적으로 다룹니다.

장식용(Decorative) SVG와 정보 전달용(Informative) SVG의 이분법

SVG 마크업의 첫 단추는 해당 그래픽이 사용자에게 '독립적인 의미나 정보를 전달하는가' 아니면 '단순한 시각적 미사여구에 불과한가'를 판별하는 것입니다.

만약 텍스트 링크 바로 옆에 붙어 있는 단순 화살표 아이콘이나, 카드 배경에 깔린 기하학적 무늬 패턴이라면 이는 순수한 장식용 그래픽입니다. 장식용 그래픽은 보조공학 기기가 낭독하지 않고 깔끔하게 지나쳐야 하므로, 반드시 <svg aria-hidden='true' focusable='false'> 속성을 부여하여 접근성 트리에서 완전히 소거해야 합니다. focusable='false'는 구형 브라우저에서 인라인 SVG가 불필요하게 탭 키 초점을 낚아채는 버그를 원천 차단하는 필수 방어 속성입니다.

반면 웹사이트의 회사 로고, 매출 통계 인포그래픽, 텍스트 레이블이 없는 단독 상태 표시 아이콘(예: 성공 체크, 오류 느낌표)은 사용자에게 핵심 정보를 전달하는 의미적 그래픽입니다. 이러한 그래픽에는 반드시 보조공학이 이해할 수 있는 접근 가능한 이름과 상세 설명이 결합되어야 합니다.

W3C SVG-AAM 표준: role="img"와 <title>, <desc> 결합 패턴

정보를 전달하는 독립적인 SVG를 마크업할 때 적용해야 하는 W3C 공식 표준 패턴은 다음과 같습니다.

• 1. role='img' 속성 선언: 기본적으로 브라우저는 SVG를 일반 그래픽 컨테이너로 취급하기 때문에, <svg role='img'>를 명시하여 스크린리더에게 '이 요소는 하나의 완전한 이미지(Image)'임을 선언합니다.
• 2. <title> 요소를 통한 간결한 이름 부여: SVG 내부 최상단에 <title id='svg-title'>2026년 2분기 웹 접근성 준수율 현황</title>을 삽입합니다. 마우스 호버 시 브라우저 기본 툴팁으로도 노출되는 핵심 식별자입니다.
• 3. <desc> 요소를 통한 상세 대체 텍스트 제공: 복잡한 차트나 그래프의 경우 <desc id='svg-desc'>공공 부문 92%, 민간 이커머스 부문 68%로 전년 동기 대비 14% 상승함</desc>과 같이 시각적 정보를 글자로 온전히 풀어낸 상세 설명을 삽입합니다.
• 4. aria-labelledby 속성으로 ID 매핑: <svg role='img' aria-labelledby='svg-title svg-desc'> 형태로 title과 desc의 ID를 바인딩하여 모든 보조공학 엔진에서 오차 없이 낭독되도록 연결합니다.

버튼 내부 SVG 아이콘과 독립 SVG 그래픽의 차이점

실무에서 가장 혼란스러워하는 부분은 <button> 태그 내부에 들어가는 SVG 아이콘의 처리입니다.

버튼 내부에 들어가는 SVG는 자체적으로 role='img'나 <title>을 가질 필요가 없습니다. 오히려 부모인 <button> 요소에 이미 aria-label='검색창 열기'가 선언되어 있다면, 내부 SVG에 또다시 <title>검색</title>을 넣었을 때 스크린리더가 '검색창 열기, 검색, 버튼'처럼 이름을 두 번 중복 낭독하는 혼선이 생깁니다. 따라서 버튼 내부의 아이콘 SVG는 무조건 aria-hidden='true'로 숨기고, 접근 가능한 이름의 책임은 부모 버튼에게 전적으로 위임하는 것이 가장 깔끔한 마크업 원칙입니다.

Chrome 개발자 도구를 활용한 SVG 접근성 트리 검증

작성된 SVG의 유효성을 검증하려면 Chrome DevTools의 Elements 패널에서 SVG 노드를 선택하고 우측 Accessibility 탭을 확인해야 합니다.

Role 항목이 'image'로 명확하게 매핑되어 있는지, Computed Properties의 Name 항목에 <title>의 텍스트가 정확히 들어가 있는지, Description 항목에 <desc>의 내용이 바인딩되어 있는지 점검합니다. 만약 Role이 'GenericContainer'로 뜨거나 내부 <path> 태그들이 트리 아래에 줄줄이 노출되고 있다면 마크업 표준화가 덜 되었다는 증거이므로 즉시 속성을 보완해야 합니다.