SVG 접근성 검사기

SVG 접근성 검사기 사용 가이드

SVG 아이콘과 차트는 img의 alt 같은 단일 속성이 없어서 접근성 처리 방법이 헷갈리기 쉽습니다. 이 검사기는 붙여 넣은 HTML의 인라인 <svg>를 하나씩 보고 장식용(aria-hidden="true" 또는 role="presentation")인지 의미 있는 그림인지 구분한 뒤, 각각에 필요한 처리를 했는지 확인합니다.

의미 있는 SVG는 첫 번째 자식 <title>, aria-label, aria-labelledby 가운데 하나로 이름이 있어야 하고, role="img"를 주면 일부 화면 낭독기가 안쪽 도형을 하나씩 읽지 않습니다. <desc>가 있으면 함께 표시합니다. 장식용인데 이름이 있거나 안에 포커스 요소가 있으면 알려 줍니다.

버튼·링크 안의 아이콘 SVG는 부모의 이름을 함께 봅니다. 부모와 SVG 모두 이름이 없으면 '이름 없는 아이콘 버튼'으로 ✕ 표시하고, 부모에 aria-label을 주고 SVG는 aria-hidden="true"로 처리하라고 안내합니다.

사용 방법

1. 1'검사할 HTML' 칸에 인라인 SVG가 든 HTML을 붙여 넣습니다.
2. 2'실행'을 누르면 SVG별 구분(장식·의미), 이름, 설명 여부가 나옵니다.
3. 3✕ 항목에 title·aria-label을 넣거나 장식이면 aria-hidden="true"를 줍니다.
4. 4△ 항목(role="img" 누락, title 위치)을 보완하고 다시 실행합니다.

<svg role="img" viewBox="0 0 100 100"><title>월별 매출 차트</title><desc>막대로 월별 매출을 비교합니다.</desc>…</svg>
<button><svg viewBox="0 0 10 10"><path d="M0 0h10v10"/></svg></button>

인라인 SVG 2개 · 장식 0개

✕ SVG 2: 아이콘 버튼·링크(button)에 이름이 없습니다 — 부모에 aria-label을 주고 SVG는 aria-hidden="true"로

SVG	구분	이름	설명	위치
SVG 1	의미 있음	"월별 매출 차트" (svg title)	desc ✓

이럴 때 쓰면 좋아요

• 아이콘 폰트를 SVG 아이콘으로 바꾼 뒤 점검할 때
• 차트 라이브러리가 만든 SVG에 이름이 있는지 볼 때
• 디자인 시스템의 아이콘 버튼 마크업을 검수할 때
• 로고 SVG의 대체 텍스트를 확인할 때

문제가 생겼을 때

활용 팁

• 같은 페이지에 같은 아이콘이 여러 번 쓰이면 title에 id를 붙여 aria-labelledby로 연결하는 편이 안정적입니다.
• 복잡한 차트는 이름 외에 표나 본문으로 데이터를 함께 제공하는 것이 좋습니다.
• SVG 코드 자체를 줄이려면 SVG 최적화기를 쓰되 title·desc를 지우지 않게 설정하세요.

자주 묻는 질문