Descriptive Alt text

Accessibility

Descriptive Alt-text

We have committed to providing alt-text for all figure images, plots and graphs included in our lessons.

Alt-text is integrated into the liquid syntax we use to include images. The required format is:
{% include figure.html filename="file-name.png" alt="Visual description of figure image" caption="Caption text to display" %}

There are (lots of) guidance notes about how to write good alt-text around online, but we haven't developed something PH-specific yet.

We have found Amy Cesal's guide to Writing Alt Text for Data Visualization useful. This guide advises that alt-text for graphs and data visualisations should consist of the following:

alt="Chart type of data type where reason for including chart"

What Amy Cesal's guide achieves which we think is important, is prompting an author to reflect on their reasons for including the graph or visualisation. What idea does this support? What can a reader learn or understand from this visual?

The Graphs section of Diagram Center's guidance is also useful. Some key points (relevant to all graph types) we can take away from it are:

• Briefly describe the graph and give a summary if one is immediately apparent
• Provide any titles and axis labels
• It is not necessary to describe the visual attributes of the graph (colour, shading, line-style etc.) unless there is an explicit need
• Often, data shown in a graph can be converted into accessible tables