`, `<desc>` 요소를 제공합니다. 설정된 `<title>`, `<desc>` 요소는 브라우저 접근성 API에 **접근 가능한 이름과 설명으로 각각 매핑**(Mapping) 됩니다. ```markup <svg width="96" height="96" viewBox="0 0 96 96"> <title>파이 차트(Pie Chart)

> For the complete documentation index, see [llms.txt](https://a11y.gitbook.io/graphics-aria/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-a11y.md). # SVG 접근성 [SVG1.1](http://www.w3.org/TR/SVG11/) 접근성 지원은 브라우저와 스크린 리더에서 제한적 입니다. [SVG2](https://svgwg.org/svg2-draft/toc.html) 로 상황이 개선 될 예정 이지만 [ARIA](http://www.w3.org/TR/wai-aria/) 를 사용하여 간단한 SVG의 접근성을 향상시킬 수 있습니다. ### SVG 1.1 접근성 SVG 그래픽에 접근성을 제공할 수 있는 ``, `<desc>` 요소를 제공합니다. 설정된 `<title>`, `<desc>` 요소는 브라우저 접근성 API에 **접근 가능한 이름과 설명으로 각각 매핑**(Mapping) 됩니다. ```markup <svg width="96" height="96" viewBox="0 0 96 96"> <title>파이 차트(Pie Chart) 전체 자료가 여러 개의 카테고리로 분류되어지는 경우, 개개의 카테고리를 전체에 대한 비율에 따라 원 내부의 면적을 분할한 파이(pie)모양의 도표를 말합니다. ``` ### SVG 접근성 브라우저 지원 ``, `<desc>` 요소 브라우저 접근성 API 매핑 테스트 결과 | | IE 10 (Windows) | FF25 (Windows) | Chrome 30 (Windows) | Chrome 30 (Mac/iOS) | Safari 6 (Mac/iOS) | Chrome 30 (Android) | | --------- | --------------- | -------------- | ------------------- | ------------------- | ------------------ | ------------------- | | `<title>` | OK | NO | NO | NO | NO | N/A | | `<desc>` | OK | NO | NO | NO | NO | N/A | | SVG 역할 | OK | OK | NO | NO | NO | N/A | ### ARIA + SVG 접근성 향상 SVG 역할(role)을 명확히 제공해야 스크린리더는 이를 정확하게 식별 할 수 있습니다. WAI-ARIA의 [`role`](https://www.w3.org/TR/wai-aria-1.1/#img), [`aria-labelledby`](https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby) 속성을 사용하여 브라우저 접근성 API에 보다 명확한 정보를 제공할 수 있습니다. ```markup <svg role="img" aria-labelledby="title desc" width="96" height="96" viewBox="0 0 96 96"> <title id="title">파이 차트(Pie Chart) 전체 자료가 여러 개의 카테고리로 분류되어지는 경우, 개개의 카테고리를 전체에 대한 비율에 따라 원 내부의 면적을 분할한 파이(pie)모양의 도표를 말합니다. ... ... ``` #### img 역할 인라인 `