부록 C: 접근성 지원

이 부록은 정보 제공용이며, 규범적인 내용이 아닙니다.

C.1. SVG 접근성 기능

이 부록은 SVG의 접근성 기능과 SVG 및 관련 현행 표준(W3C 웹 콘텐츠 접근성 가이드라인(WCAG) 2.0 [WCAG2])을 지원하기 위해 설계된 접근성 관련 명세들을 강조합니다.

[WCAG2] 정보를 잃거나 구조가 사라지지 않도록 다양한 방식(예: 더 단순한 레이아웃)으로 콘텐츠를 제공: 정보 및 관계.

aria-labelledby를 통한 레이블 관계 지원
aria-describedby를 통한 설명 관계 지원
aria-owns를 통한 구조적 관계 지원
aria-controls를 통한 제어 관계 지원(요소가 다른 요소의 콘텐츠나 동작을 제어하는 경우)
‘g’를 통한 그룹화 정의
WAI-ARIA group 및 radiogroup 역할 지원

[WCAG2] 시간 기반 미디어: 시간 기반 미디어에 대한 대체 제공.

‘audio’ 및 ‘video’ 요소가 HTML ‘track’ 요소를 지원하여 시간 기반 미디어의 대체를 제공합니다

[WCAG2] 키보드 접근성: 모든 기능이 키보드에서 사용할 수 있도록 합니다.

포커스 지원 및 ‘tabindex’ 속성을 통한 HTML과 일치하는 순차적 포커스 탐색
키보드 이벤트 속성 및 마우스 이벤트 지원 (스크립트 작성자용)
키보드 이벤트 지원 (스크립트 작성자용)
DOM의 각 SVG 요소에 포커스를 설정하는 스크립트 지원
DOM의 각 SVG 요소에서 ‘tabindex’ 속성을 가져오는 스크립트 지원
Document 인터페이스의 HTML activeElement 속성에 대한 스크립트 지원

[WCAG2] 탐색 가능: 사용자가 탐색하고 콘텐츠를 찾으며 위치를 파악할 수 있도록 지원합니다.

콘텐츠 블록을 건너뛸 수 있도록 SVG는 WAI-ARIA 랜드마크 역할을 지원합니다.
‘title’을 사용하여 페이지 제목을 제공합니다.
‘tabindex’를 통해 순차적 포커스 탐색 순서를 제공합니다.
‘a’ 요소를 지원하여 작성자가 콘텐츠로부터 링크 목적을 제공할 수 있게 합니다.
heading 역할과 aria-level, aria-labelledby, aria-label을 이용해 제목과 레이블을 지원합니다.
탭 순서 내의 포커스된 요소에 대해 시각적 포커스를 렌더링하여 가시적 포커스 지원

[WCAG2] 읽기 가능: 텍스트 콘텐츠를 읽기 쉽고 이해할 수 있도록 합니다.

‘lang’ 속성을 통해 페이지 및 일부의 언어를 지원합니다.

[WCAG2] 호환성: 현재 및 미래의 사용자 에이전트와 보조 기술과의 호환성을 극대화합니다.

WAI-ARIA 속성과 ‘title’ 요소를 통해 이름, 역할, 값을 지원합니다.

WAI-ARIA 지원 및 텍스트 대체

C.2. SVG 접근성 명세 및 가이드라인 지원

이 섹션에서는 SVG 접근성과 관련된 명세 및 작성 가이드라인을 나열합니다.

사용자 에이전트용 관련 SVG 접근성 명세

콘텐츠 작성자를 위한 관련 명세