Images - describing charts

Question

We were wondering which approach to go with for charts. We have a couple of options, e.g. longdesc that we use currently, figcaption, or aria-describedby to reference the text explaining the chart. Following this, I’m thinking we could put the data table in an accordion.

Answer

Let’s assume that long descriptions will go in accordions (using details/summary implementation). If, in addition to a long description, the image also has a caption, then let’s also use figure/figcaption:

<figure>

<img…alt=“short description” longdesc=“fig1-desc”>

<figcaption>Figure 1. Caption text</figcaption>

</figure>

<details>

<summary id=“fig1-desc”>Raw data for Figure 1.</summary>

<table>…</table>

</details>

See the second and third graphics at https://webtoolkit.govt.nz/blog/2017/05/analytics-in-government-where-were-at/ for other examples.

If the image has no caption, then just an image with details/summary:

<img…alt=“Jason’s great big smile” longdesc=“fig2-desc”>

<details>

<summary id=“fig1-desc”>Text description of Jason’s smile</summary>

<table>…</table>

</details>