DEV Community

loading...

Figure & Figcaption: Supporting IE11, JAWS, NVDA, & VO

Robert Pearce
senior software engineer who likes to help others help themselves!
・2 min read

Originally posted on https://dear-dia11y.com/figure-and-figcaption-supporting-ie11-jaws-nvda-and-vo.html

Dear dia11y,

At work, I must support IE11 along with all the other major browsers, so that means I need to support JAWS & NVDA across these browsers on Windows in addition to VoiceOver on macOS & iOS Safari (I don't do much in the Android world at the moment).

About 1-2 months ago, I did a lot of work fixing up issues around <figure>s and <figcaption>s. For a refresher, here'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>
Enter fullscreen mode Exit fullscreen mode

This is straightforward, but JAWS + IE11 didn't quite recognize this as a figure, and we had issues with the caption because we had a <div> as the parent of the <figcaption>. NVDA + Firefox didn't like this setup, either. Here's what our example was structured like:

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

After going back and forth with different combinations of elements and attributes, here's what was settled on to make this work across all these browsers and screen readers:

<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>
Enter fullscreen mode Exit fullscreen mode

Adding role="figure" to the <figure>, explicitly stating that it was labelled by the <figcaption>, and placing <figcaption> as an immediate child of <figure> resolved all our issues.

This was a helpful table of related compatibility: https://www.powermapper.com/tests/screen-readers/labelling/img-figcaption/

Yours,
Robert W. Pearce

Discussion (0)