search

SVG 접근성

SVG1.1arrow-up-right 접근성 지원은 브라우저와 스크린 리더에서 제한적 입니다. SVG2arrow-up-right 로 상황이 개선 될 예정 이지만 ARIAarrow-up-right 를 사용하여 간단한 SVG의 접근성을 향상시킬 수 있습니다.

hashtag
SVG 1.1 접근성

SVG 그래픽에 접근성을 제공할 수 있는 <title>, <desc> 요소를 제공합니다. 설정된 <title>, <desc> 요소는 브라우저 접근성 API에 접근 가능한 이름과 설명으로 각각 매핑(Mapping) 됩니다.

<svg width="96" height="96" viewBox="0 0 96 96">

  <title>파이 차트(Pie Chart)</title>
  <desc>
    전체 자료가 여러 개의 카테고리로 분류되어지는 경우,
    개개의 카테고리를 전체에 대한 비율에 따라 원 내부의 면적을 
    분할한 파이(pie)모양의 도표를 말합니다.
  </desc>

  <defs>
    <style>
      .pie-l { fill:#00bcd4; }
      .pie-tr { fill:#448aff; }
      .pie-mr { fill:#3F51B5; }
    </style>
  </defs>
  
  <g id="pie-chart">
    <path 
      class="pie-l"
      d="M29.098,28.786C27.821,30.146,26.012,31,24,31c-3.866,0-7-3.134-7-7c0-3.866,3.134-7,7-7V4
      C13.002,4,4,13.002,4,24c0,10.998,9.002,20,20,20c5.777,0,10.998-2.444,14.557-6.332L29.098,28.786z" />
    <path 
      class="pie-tr"
      d="M24,4v13c3.866,0,7,3.134,7,7h13C44,13.002,34.998,4,24,4z" />
    <path 
      class="pie-mr"
      d="M31,24c0,2.232-1.048,4.216-2.676,5.497l8.009,10.226C40.995,36.062,44,30.387,44,24H31z" />
  </g>
  
</svg>

hashtag
SVG 접근성 브라우저 지원

<title>, <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

hashtag
ARIA + SVG 접근성 향상

SVG 역할(role)을 명확히 제공해야 스크린리더는 이를 정확하게 식별 할 수 있습니다. WAI-ARIA의 rolearrow-up-right, aria-labelledbyarrow-up-right 속성을 사용하여 브라우저 접근성 API에 보다 명확한 정보를 제공할 수 있습니다.

hashtag
img 역할

인라인 <svg> 요소에 role 속성 값으로 img를 설정하면 그래픽으로 식별됩니다.

hashtag
aria-labelledby 속성

<title>, <desc> 요소에 부여된 id 속성 값 이름을 참조하여 보다 구체적인 정보를 제공할 수 있습니다.

aria-labelledby 속성이 참조하는 title, desc 정보를 구체적으로 제공

hashtag
presentation 역할

presentationarrow-up-right 역할이 부여된 요소는 브라우저 접근성 API에 매핑 되지 않아 정보를 제공하지 않습니다. 의미가 없는 표현(장식)적인 요소에 사용해야 합니다. 그리고 포함된 하위 요소들까지 모두 정보를 제공하지 않습니다.

presentation 역할이 부여된 요소와 자식 요소는 정보를 제공하지 않음
circle-info

[WAI-ARIA 1.1] none 역할에 관한 참고 사항arrow-up-right

ARIA 1.1 워킹 그룹은 그룹원 간에 "presentation" 또는 "presentational" 단어의 의미를 둘러싼 혼란이 야기되어 none을 presentation의 동의어로 도입하였습니다. 많은 사람들이 role="presentation"을 aria-hidden="true"의 동의어로 잘못 생각하고 있습니다. 우리 role="none"이 실제 의미를 보다 명확하게 전달한다고 믿습니다. 웹 제작자는 role="none"에 대한 지원이 충분 해질 때까지 presentation 역할만 사용하거나, role="none presentation"을 사용하길 권합니다.

hashtag
ARIA + SVG 브라우저 지원

role, aria-labelledby 브라우저 접근성 API 매핑 테스트 결과

IE 10 (Windows)

FF25 (Windows)

Chrome 30 (Windows)

Chrome 30 (Mac/iOS)

Safari 6 (Mac/iOS)

Chrome 30 (Android)

role

OK

OK

OK

OK

OK

OK

aria-labelledby

OK

OK

OK

OK

OK

OK

hashtag
SVG 텍스트 접근성

<text>요소의 콘텐츠 접근에 아무런 문제가 없습니다.

hashtag
SVG 포커스 설정

<a> 요소는 포커스 요소라 포커스 접근이 가능하지만, 다른 비 포커스 요소는 포커스 접근이 안됩니다. 하지만 tabindex 속성을 설정하면 비 포커스 요소에도 포커스 접근이 가능해집니다.

tabindex 속성 설정으로 비포커스 요소에 포커싱 적용

hashtag
SVG 2.0 접근성 지원

SVG 2(표준 입후보안 2016.09.15)arrow-up-right부터 접근성을 보다 강력하게 지원합니다. Accessibility Suportarrow-up-right 내용을 살펴보면 다음과 같이 기술하고 있습니다.

hashtag
참고

PreviousSVG 필터NextSVG 아이콘 접근성

Last updated