SVG 접근성

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

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>

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

ARIA + SVG 접근성 향상

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

<svg 
  role="img"
  aria-labelledby="title desc"
  width="96" height="96" viewBox="0 0 96 96">

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

img 역할

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

aria-labelledby 속성

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

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

presentation 역할

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

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

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

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

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

SVG 텍스트 접근성

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

<svg width="620" height="140" viewBox="0 0 620 140">
  <text 
    x="30" y="90" 
    fill="#ED6E46" font-size="100" font-family="'Leckerli One', cursive">
    SVG 내부 텍스트 콘테츠는 스크린리더에서 잘 읽힙니다.
  </text>
</svg>

SVG 포커스 설정

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

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

  <g id="fruit-cherry" tabindex="0">
    <g id="stems-leaf">
      <path class="stems" fill="none" stroke="#7AA20D" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="M54.817,169.848c0,0,77.943-73.477,82.528-104.043c4.585-30.566,46.364,91.186,27.512,121.498" />
      <path class="leaf" fill="#7AA20D" stroke="#7AA20D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M134.747,62.926c-1.342-6.078,0.404-12.924,5.762-19.681c11.179-14.098,23.582-17.539,40.795-17.846 c0.007,0,22.115-0.396,26.714-20.031c-2.859,12.205-5.58,24.168-9.774,36.045c-6.817,19.301-22.399,48.527-47.631,38.028 C141.823,75.784,136.277,69.855,134.747,62.926z" />
    </g>
    <g id="cherrys">
      <path class="r-cherry" fill="#ED6E46" stroke="#ED6E46" stroke-width="12" d="M164.836,193.136 c1.754-0.12,3.609-0.485,5.649-1.148c8.512-2.768,21.185-6.985,28.181,3.152c15.076,21.845,5.764,55.876-18.387,66.523 c-27.61,12.172-58.962-16.947-56.383-45.005c1.266-13.779,8.163-35.95,26.136-27.478   C155.46,191.738,159.715,193.485,164.836,193.136z" />
      <path class="l-cherry" fill="#ED6E46" stroke="#ED6E46" stroke-width="12" d="M55.99,176.859 c1.736,0.273,3.626,0.328,5.763,0.135c8.914-0.809,22.207-2.108,26.778,9.329c9.851,24.647-6.784,55.761-32.696,60.78 c-29.623,5.739-53.728-29.614-44.985-56.399c4.294-13.154,15.94-33.241,31.584-20.99C47.158,173.415,50.919,176.062,55.99,176.859z" />
    </g>
  </g>
  
</svg>

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

SVG 2.0 접근성 지원

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

• <title>, <desc> 텍스트 대체 수단 지원
• <g> 요소 그룹 의미 정의
• <a> 요소 지원
• lang 속성 지원
• z-index 속성 지원
• ARIA 역할/속성 지원

  • aria-labelledby
  • aria-describedby
  • aria-owns
  • aria-controls
  • aria-level
  • heading
  • group
  • radiogroup
  • landmark 역할 지원
  • ......
• 포커스(Focus) 지원
• tabindex 속성 지원
• 스크립트 제작자를 위한 마우스 이벤트 지원 및 키보드 이벤트 속성 지원
• 스크립트 제작자를 위한 키보드 이벤트 지원
• SVG 요소에 포커스를 설정하는 스크립트 지원

• SVG 요소의 tabindex 속성을 얻기 위한 스크립트 지원

• Document Interface의 HTML activeElement 속성을 얻기 위한 스크립트 지원

참고

• Using ARIA to enhance SVG accessibility
• Slides: CSUN 2017: SVG Accessibility