Context

One of the biggest changes that accessibility brings to the production of ebooks is the writing of alternative descriptions to images.

For any image that is semantically relevant to the reader, an alternative description must be produced, otherwise a visually impaired person will simply not have access to that content.

This is also the description that replaces the image if it cannot be displayed.

So how do you write clear alternative descriptions that are relevant to the reader? The aim of the present article is to answer this question by providing clear and easy-to-apply guidelines for writing such descriptions, as well as external resources to consult.

Guidelines

Here are some tips to follow when writing alternative descriptions:

  • Cover: first provide the book's title, the author(s)' name, other relevant textual information about the image and, if the cover image is otherwise significant (i.e. not purely decorative), provide a short description. You can use one of these suggested templates as a basis for constructing your alternative text (see below for an example of application):
    • Cover: [title] [author(s)/edition/publishr(s)]. [Additional text on the image]. [brief description of the cover image if important].
      Cover: [title] by [authors].
      Cover: [title], [edition] by [authors].
      Cover: [title], edited by [name/s of publishers].
      Cover: [title], [edition], edited by [name/s of publishers].
      Cover: [title], [edition], edited by [name/s of publishers]. [additional texts on the image]. [brief description of the cover image if important].
  • Decorative images: purely decorative images (for example, a symbol to mark the transition between two paragraphs) should not have an alternative description. You can leave the alt attribute of such images blank and use the ARIA role "presentation" to tell assistive technologies that the image should be ignored.
  • Logos: the various logos included in the credits must have an alternative description. If several logos are together in the same image, describe the logos in the same alternative text.
  • Figures/schematics: figures and schematics must be captured in images and therefore require alternative descriptions. The whole figure or diagram must therefore be interpreted for a visually impaired person.
  • Simple tables: simple tables can be reproduced in CSS, so there is no need to include alternative texts for these tables.
  • Complex tables: depending on their degree of complexity, some tables cannot be reproduced in CSS (e.g. an image table on PDF because it cannot be produced in InDesign/Acrobat). It is therefore important to identify tables that cannot be reproduced in CSS and give them an alternative description. If the table is long, it may be necessary to produce what we call a long alternative description, i.e. to describe the table cell by cell.
  • Action/external link icons: for images that are intended to direct the reader to an external page, describe the action that is to take place rather than the content of the image. For example, "go to our Facebook page" rather than "Facebook company logo".
  • Text included in an image: if you capture an image that contains text, this text must be included in the alternative description (note that it is advisable to always capture the text as text and not as an image).
  • Writing:
    • Avoir terms such as "image of" or "photo by". These are redundant because the image is already identified as such through the HTML <img> tag.
    • Keep the description clear and concise.
  • Semantics: think about what information you want to get out of this image. What is the most important information to communicate to the reader through this image?

Communicate alternative descriptions to your EPUB file producer

  • If you outsource the production of your EPUB files to an external company, you can provide them with a file in Excel format that includes:

    • The location of the image in the source text (e.g. page number)

    • The position of the image

    • The alternative text that corresponds to it


Here is a sample file you can use.

Examples

Cover

Texte alternatif: "Couverture: Daisy Jones and The Six, par Taylor Jenkins Reid. Livre phénomène enfin en français! En fond, un 33 tours avec, en son centre, l'image d'une jeune femme."

Logo et texte capturés en image

Texte alternatif: "Logo: Financé par le gouvernement du Canada."

Icône qui renvoie vers une page externe

Texte alternatif: "Suivez-nous sur Instagram."

Tableaux, figures et schémas

Ces contenus étant généralement les plus complexes à transposer en texte alternatif, nous avons centralisé quelques bonnes pratiques à retenir lorsque vous vous apprêtez à faire produire votre livre numérique:

  • Certains tableaux ne nécessitent pas de texte alternatif car il est possible de les capturer en texte et non en image directement dans le contenu du livre. C'est le cas notamment des tableaux simples à une seule ou à double entrée.
  • Certains tableaux ne peuvent être gardés en HTML. Dans ce cas, nous allons effectivement garder le tableau en image dans le contenu, et fournir une description alternative qui reprend l'intégralité des données incluses dans le tableau. Il s'agit d'un cas restreint de tableaux; la plupart peuvent être gardés en texte dans le contenu du livre.
  • Les figures sont le plus souvent gardées en image et nécessitent un texte alternatif. Dans ce cas-ci, nous vous demandons de nous fournir ce texte et que celui-ci reflète l'information la plus pertinente à transmettre au lecteur. Par exemple, si une partie de la figure ou du schéma est déjà explicitement décrite dans le contenu du livre, vous pouvez concentrer le texte alternatif sur l'information qui n'a pas encore été transmise.

Figure ou schéma capturé en image

Texte alternatif: "Pictogramme d'un travailleur autonome (imposé personnellement) qui s'incorpore dans une société incorporée (imposée sur les revenus d'entreprise après la déduction des dépenses) où il devient un actionnaire imposé personnellement en fonction des dividendes ou du salaire qu'il se verse."

Tableaux complexes capturés en image

Dans un cas comme celui-ci, vous pouvez simplement indiquer dans le fichier des textes alternatifs que le tableau doit être capturé en image, et nous retranscrirons les données telles quelles sous forme de tableau HTML dans le champ du texte alternatif.

Si vous travaillez avec un producteur externe ou produisez vous-même vos fichiers, voici comment se transcrit cet exemple de tableau (via un texte alternatif long sous forme déroulante):
<details id="nutritable">
<summary>Agrandir/Diminuer</summary>
<div>
<p>Valeur Nutritive</p>
<p>par 1 boulette égouttée</p>
<p>calories 150</p>
<table>
<tbody><tr>
<th>Nutriments</th>
<th>% valeur quotidienne*</th>
</tr>
<tr>
<td>Lipides 9g</td>
<td>14%</td>
</tr>
<tr>
<td>satures 1.5g</td>
<td>8%</td>
</tr>
<tr>
<td>&#160;</td>
<td>+trans 0g</td>
</tr>
<tr>
<td>&#160;</td>
<td>Glucides 3g</td>
</tr>
<tr>
<td>Fibres 0g</td>
<td>0%</td>
</tr>
<tr>
<td>Sucres 0g</td>
<td>0%</td>
</tr>
<tr>
<td>&#160;</td>
<td>Protéines 13g</td>
</tr>
<tr>
<td>&#160;</td>
<td>Cholestérol 35mg</td>
</tr>
<tr>
<td>Sodium 300mg</td>
<td>13%</td>
</tr>
<tr>
<td>Potassium</td>
<td>N/D</td>
</tr>
<tr>
<td>Calcium</td>
<td>4%</td>
</tr>
<tr>
<td>Fer</td>
<td>50%</td>
</tr>
</tbody>
</table>
<p>*5% ou moins c'est peu, 15% ou plus c'est beaucoup</p>
</div>
</details>
</div>

Exemples de tableaux n'ayant pas besoin de textes alternatifs

Tableaux simples (en format texte dans le fichier source)

Tableaux complexes (en format texte dans le fichier source)

Ressources complémentaires