Contexte

L'un des plus grands changements qu'amène l'accessibilité dans la production de livres numériques est la rédaction de descriptions alternatives aux images.
Pour toute image pertinente sémantiquement pour le lecteur, une description alternative doit être produite, sans quoi une personne malvoyante n'aura tout simplement pas accès à ce contenu.
C'est également cette description qui remplace votre image dans le cas où celle-ci ne peut être affichée.

Dès lors, comment rédiger des descriptions alternatives claires et pertinentes pour le lecteur? L'objectif de cet article est de répondre à cette question en fournissant des lignes directrices claires et faciles à appliquer lorsque l'on se lance dans la rédaction de ces descriptions, ainsi que des ressources externes à consulter.

Lignes directrices

Voici quelques conseils à suivre lorsque l'on rédige des descriptions alternatives:

  • Couverture: indiquer en premier le titre du livre, le ou les auteurs, d'autres informations textuelles pertinentes sur l'image et, si l'image de couverture a une signification ou une importance (donc qu'elle n'a pas de fonction purement décorative), donner une description aussi courte et concise que possible. Vous pouvez vous baser sur l'une de ces suggestions de modèles pour la construction de votre texte alternatif (voir plus bas pour un exemple d'application):
    • Couverture: [titre] [auteur(s)/édition/éditeur(s)]. [textes additionnels sur l'image]. [brève description de l'image de couverture si elle est importante].
    • Couverture: [titre] par [auteurs].
    • Couverture: [titre], [édition du titre] par [auteurs].
    • Couverture: [titre], édité par [nom/s des éditeurs].
    • Couverture: [titre], [édition du titre], édité par [nom/s des éditeurs].
    • Couverture: [titre], [édition du titre], édité par [nom/s des éditeurs]. [textes additionnels sur l'image]. [brève description de l'image de couverture si elle est importante].
  • Images décoratives: les images purement décoratives (par exemple, un symbole qui marquerait la transition entre deux paragraphes) ne doivent pas avoir de description alternative. Vous pouvez laisser vide l'attribut alt des ces images et utiliser le rôle ARIA "presentation" pour indiquer aux technologies d'assistance que l'image doit être ignorée.
  • Logos: les différents logos inclus dans les crédits doivent avoir une description alternative (le logo de l'ANEL, par exemple, ou du Fonds du Livre, etc.). Commencer la description avec la mention "Logo: ". Si plusieurs logos sont ensemble dans la même image, décrire les logos dans le même texte alternatif.
  • Figures/schémas: les figures et les schémas doivent être capturés en image et, par conséquent, requièrent des descriptions alternatives. On doit donc interpréter la totalité de la figure ou du schéma pour une personne malvoyante.
  • Tableaux simples: les tableaux simples peuvent être reproduits en CSS, il n'y a donc pas lieu d'inclure des textes alternatifs pour ces tableaux.
  • Tableaux complexes: selon leur degré de complexité, certains tableaux ne peuvent pas être reproduits en CSS (par exemple un tableau en image sur PDF car impossible à produire dans InDesign/Acrobat). Il est donc important d'identifier les tableaux impossibles à reproduire en CSS et leur donner une description alternative. Si le tableau est long, il pourrait être nécessaire de produire ce que nous appelons une description alternative longue, c'est-à-dire de décrire le tableau cellule par cellule.
  • Icônes d'action/renvoi vers un lien externe: dans le cas d'images dont l'objectif est de renvoyer le lecteur vers une page externe, décrire l'action qui va se dérouler plutôt que le contenu de l'image. Par exemple, "se rendre sur notre page Facebook" plutôt que "logo de l'entreprise Facebook".
  • Texte inclus dans une image: si vous capturez une image qui contient du texte, ce texte doit se retrouver dans la description alternative (à noter qu'il est conseillé, autant que possible, de toujours capturer le texte en texte et non en image).
  • Rédaction:
    • Éviter les termes "image de" ou "photo de". Ceux-ci sont redondants car l'image est déjà identifiée comme telle grâce à la balise HTML <img>.
    • Garder la description claire et concise.
  • Sémantique: penser à l'information que l'on veut faire ressortir de cette image. Quelle est l'information la plus importante à communiquer au lecteur à travers cette image?

Communiquer les descriptions alternatives à votre producteur de fichiers EPUB

Si vous confiez la production de vos fichiers EPUB à une entreprise externe, vous pouvez lui communiquer un fichier au format Excel qui reprend:

  • L'endroit où se trouve l'image dans le texte source (le numéro de page, par exemple)
  • La position de l'image
  • Le texte alternatif qui lui correspond

Voici un fichier modèle à utiliser: Textes_alternatifs_modèle.xlsx

Exemples

Couverture

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