3.2 Making Accessible Figures

Some students have difficulty differentiating colour. As such, colour should not be the [only] way of communicating information on a figure. Consider supplementing colour with other ways to distinguish items. This could be making lines/arrows dotted or dashed, or it could be labelling items on your figures. If the only information communicsted by colour is that two things are different, this is acceptable provided that the colours have enough contrast.

In a figure, adjacent colours should have a contrast of 3:1 or more. See this website to determine contrast between colours.

Lecture notes produced with BookML allow students to view the lecture notes in three different colour-pallets (see 4.2). Unless otherwise specified, this automatically changes the colour of figures. While this behaviour is good for most figures, it is not always useful.

To preserve colours for students using night mode, we write the code as follows:

\begin{figure}[H]
    \centering
    \includegraphics[width=0.5\linewidth, alt = {}]{Image.png}\bmlPlusClass{bml_no_invert}
    \caption{A figure where inverted colours are unideal}
\end{figure}

Note: The command \bmlPlusClass is not exclusive to \includegraphics.

Alt Text is information associated with images in HTML. This information is not seen by most users, but is how a screen reader will interpret an image. Alt-text should be written in full sentences — starting with capital letters and ending with full stops (exceptions for images of text – see 3.2.6). Alt text should [not] repeat what is written in the figure caption or the body text.

When including a figure with BookML, you [must] always include an alt-text attribute. In the following figure, one of the images has alt-text, while the other does not. To see how this works, try using a screen reader on this page.

[Audio: When using a screen reader, the first image reads the file name, while the second image reads nothing]

When no alt text attribute is given, most screen-readers will read out the file name. To use alt text with \includegraphics in LaTeX, use the following code:

\includegraphics[width=0.5\linewidth, alt={Your Alt Text Here}]{imagefile.png}

To use alt text with a different source of image in LaTeX, insert the following after the image:

\bmlDescription{text}

The web accessibility initiative classifies images as

• •
  ​

  Informative Images (3.2.3);

• •
  ​

  Decorative images (3.2.4);

• •
  ​

  Functional Images (3.2.5);

• •
  ​

  Images of Text (3.2.6);

• •
  ​

  Complex Images (3.2.7);

• •
  ​

  Groups of Images (3.2.8); and

• •
  ​

  Image Maps (3.2.9).

Here, I give a short description of each. For types of image which are likely to appear in lecture notes, I have given guidance for alt-text and deeper explanation. For more information, I refer you to this guidance.

Informative images are used to convey specific information which is [not] contained in the body text. An example could be a graph of a function, with the turning points circles. Alt text could read "The function x sqaured has one turning point. It is a minimum at the point zero, zero".

Here, the alt text should explain the same thing that the graphic is trying to explain, but using plain English.

Decorative images are images that are used for decoration, or images that repeat the same information that is said in the body text. An example could be a force diagram for an example described in the body text, the plotting of a function or horizontal bars used for visual formatting.

Here, the alt text should be empty. In BookML, we create an empty alt text like this:

\includegraphics[width=0.5\linewidth, alt={}]{imagefile.pdf}

Functional images are images that the user of a website can click.

Images of text are discouraged, but sometimes necessary. An example of an image of text would be the University of Liverpool logo. Here, the alt text would read "University of Liverpool".

Complex images are images which convey information that cannot be explained in a short sentence. Examples of complex images include:

• •
  ​

  graphs and charts;

• •
  ​

  diagrams where the body text requires the user to understand the diagram;

• •
  ​

  maps of locations.

When using complex images, you should provide a two-part alt text. Here, a short alt-text would be associated with the graphic, and a long alt-text explaining the image would be accessible elsewhere. The short alt-text should guide the user on where the long alt-text is located.

An example could be a graph or network (in the context of graph theory), a statistical graph or the plot of a function where the information the figure demonstrates is hard to explain in a short format. Here, the body text should explain what the figure shows.

For statistics, see this online tool for creating accessible graphs. Students will also be able to use R to access statistics in a screen-reader friendly format.

Groups of images are multiple image files (i.e. instances of /includegraphics) next to each other which share a function. Here, you would include alt-text on the first image, and have empty alt-text on following images.

An image map is a single image with several hyperlinks.