SVG 소스 VoiceOver 버그가 있는 이미지

원래 게시됨https://dear-dia11y.com/image-with-svg-source-voiceover-bug.html

dia11y 님,

나는 최근에 SVG 소스가 있는 일부 장식 그림<img /> 요소가 macOS Safari에서 VoiceOver를 사용할 때 "이미지"라는 단어를 내레이션하여 모든 <g>(그룹) 요소를 알리는 문제를 문서화했습니다. HTML이 본질적으로 무엇인지는 다음과 같습니다.

<img
  alt=""
  class="foo"
  src="path/to/file.svg"
/>

alt=""는 스크린 리더에게 이것이 decorative image이라고 경고했어야 했지만 상관없이 aria-hidden="true"를 추가해 보겠습니다.

이 문제와 가능한 수정 사항을 동료에게 추천했지만 잊어버렸습니다.

이 동료는 role="presentation" 대 aria-hidden="true" 및 기타 사항을 읽고 결국 둘 다 문제를 해결하지 못했다는 것을 발견했습니다! 무슨 미스터리.

이 사람은 몇 가지 조사를 했고 role="img"로 표시되지 않은 SVG 소스가 있는 이미지 요소가 VoiceOver가 SVG 문서로 점프하여 읽기 시작할 수 있다는 것을 발견했습니다.

수정?

<img
  alt=""
  class="foo"
  role="img"
  src="path/to/file.svg"
/>

그게 다야! HTML과 a11y 린터는 반복적인 것에 대해 불평할 것이지만 role, 우리는 우리가 해야 할 일을 합니다.

이것은 또한 장식이 아닌 이미지의 문제인 것으로 밝혀졌습니다. 이미지 대체 텍스트는 SVG 소스의 내부(심지어 <text> 요소!)와 함께 읽혀지고 있었습니다.

다음은 문제에 대해 잘 문서화된 몇 가지 테스트 사례입니다.

http://pauljadam.com/demos/svg-role-img.html

http://a11yideas.com/testcode/mwp/iOSsvg.html

당신 것,
로버트 W. 피어스