그림 및 그림 캡션: IE11, JAWS, NVDA 및 VO 지원

원래 게시됨https://dear-dia11y.com/figure-and-figcaption-supporting-ie11-jaws-nvda-and-vo.html

친애하는 dia11y,

직장에서 다른 모든 주요 브라우저와 함께 IE11을 지원해야 하므로 macOS 및 iOS Safari의 VoiceOver 외에도 Windows의 이러한 브라우저에서 JAWS 및 NVDA을 지원해야 합니다. 현재 Android 세계에서).

약 1~2개월 전에 <figure> s 및 <figcaption> s에 대한 문제를 수정하는 데 많은 작업을 수행했습니다. 복습을 위해 다음은 the example that MDN uses입니다.

<figure>
  <img
    alt="Elephant at sunset"
    src="/media/cc0-images/elephant-660-480.jpg"
  />
  <figcaption>
    An elephant at sunset
  </figcaption>
</figure>

이것은 간단하지만 JAWS + IE11은 이것을 그림으로 인식하지 못했고 <div> 의 부모로 <figcaption>가 있었기 때문에 캡션에 문제가 있었습니다. NVDA + Firefox도 이 설정을 좋아하지 않았습니다. 우리의 예는 다음과 같이 구성되었습니다.

<figure>
  <img
    alt="Elephant at sunset"
    src="/media/cc0-images/elephant-660-480.jpg"
  />
  <div>
    <figcaption>
      An elephant at sunset
    </figcaption>
  </div>
</figure>

요소와 속성의 다양한 조합으로 왔다갔다한 후 모든 브라우저와 화면 판독기에서 이 작업을 수행하기 위해 결정된 사항은 다음과 같습니다.

<figure aria-labelledby="caption-id" role="figure">
  <img
    alt="Elephant at sunset"
    src="/media/cc0-images/elephant-660-480.jpg"
  />
  <figcaption id="caption-id">
    An elephant at sunset
  </figcaption>
</figure>

role="figure" 에 <figure> 를 추가하고 <figcaption> 에 의해 레이블이 지정되었음을 명시하고 <figcaption> 를 <figure> 의 직계 자식으로 배치하면 모든 문제가 해결되었습니다.

다음은 유용한 관련 호환성 표였습니다. https://www.powermapper.com/tests/screen-readers/labelling/img-figcaption/

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