SVG의 접근성 개선 방법: 간단한 가이드

카테고리

디자인

서브카테고리

UX 디자인

대상자

웹 개발자, 디자이너, 접근성 전문가

• 중급~고급 난이도: SVG 기본 지식과 접근성 원칙 이해 필요

핵심 요약

• SVG는 XML 기반 텍스트 파일로, aria-hidden="true"를 통해 장식용 요소를 숨길 수 있음
• 정보성 SVG는 , , aria-labelledby를 통해 스크린 리더에 설명 제공
• 인터랙티브 SVG 요소는 role="button", tabindex="0"로 접근성 처리해야 함
• 접근성 테스트 시 적절한 대체 텍스트와 라벨링이 필수적

섹션별 세부 요약

1. SVG 접근성의 중요성

• SVG는 텍스트와 동일하게 사용자에게 의미를 전달하는 요소로, 접근성 처리가 필수
• 장식용 SVG와 정보성 SVG를 구분하여 다른 접근성 처리 방식 적용
• 스크린 리더 사용자에게 의미 없는 SVG는 혼란을 유발할 수 있음

2. 장식용 SVG 처리 방법

• aria-hidden="true" 속성으로 스크린 리더에서 숨김
• 태그 사용 시 alt 속성을 빈 문자열로 설정
• HTML에 직접 삽입 시 / 대신 무시하도록 처리

3. 정보성 SVG 처리 방법

• 태그로 간단한 설명 제공
• 태그로 상세한 설명 추가
• aria-labelledby 속성으로 텍스트 라벨링 연결

4. 인터랙티브 SVG 요소 처리

• role="button" 또는 role="link"로 기능 설명
• tabindex="0"으로 포커스 가능하게 설정
• aria-label 또는 으로 명확한 라벨링 제공

결론

• SVG 접근성은 작은 수정으로 큰 차이를 만듦
• 기존 SVG 요소를 점검 후 aria-hidden, role, aria-label 등으로 수정
• 장식용/정보성 SVG 구분 후 적절한 접근성 속성 적용이 핵심