by 야무(yamoo9)

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 속성 값 이름을 참조하여 보다 구체적인 정보를 제공할 수 있습니다.

presentation 역할

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

[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>

SVG 2.0 접근성 지원

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

참고

PreviousSVG 필터NextSVG 아이콘 접근성

Last updated