ATELIER NORMES & STANDARDS JUIN 2018ANNEXE : CRÉER UN EPUB ACCESSIBLE AVEC INDESIGN

A. INTRODUCTION

2

1. Prérequis

• Conception éditoriale

• Etat des fichiers InDesign

2. Outils

INTRODUCTION

Créer un EPUB accessible avec InDesign, c’est en premier lieu créer un EPUB !

Des contraintes et prérequis existent donc :

• du fait du format EPUB lui-même

• du fait d’InDesign, dans une version donnée (paramétrages d’export, fonctionnalités disponibles, etc.)

• et de par la nature même du mode de production (export d’un format numérique depuis un outil

de mise en page)

Anticiper ces contraintes, dans les phases de conception éditoriale puis de production, permet de mieux

les surmonter.

3

PRÉREQUIS POUR CRÉER UN EPUB

Conception éditoriale :

Penser la transition page papier/page écran (par ex. : organisation et densité de l’information)

Penser aux atouts du numérique : liens hypertextes, tables, index, etc.

S’adapter aux contraintes du format et du parc de lecteurs EPUB. Attention :

▪ au sens qui serait porté par des couleurs ou des contrastes de couleur

▪ aux contenus informationnels ou de navigation qui seraient présents dans les en-têtes

et pieds de page

▪ aux mises en page complexe qui seraient essentielle à une bonne lecture du document :

pages en regard, double page, fond perdu, multicolonnage, habillage texte/illustration

4

◼ Contraintes : exemples ◼

• En-tête et pied de page : permis par EPUB 2 et 3, mais non supporté par les liseuses

• Fond perdu : uniquement en fixedlayout

• Multicolonnage : permis par EPUB 2 et 3, mais rendu variable sur les liseuses

Source : CNDP

5

PRÉREQUIS POUR CRÉER UN EPUB AVEC INDESIGN

Les nature des contenus InDesign a un impact sur le travail à réaliser. Dans l’idéal, il faudrait :

➢ des contenus structurés (« stylés »)

➢ sans styles locaux

➢ une feuille de styles explicite (nommage, organisation)

➢ un ordre logique de lecture parfaitement décrit :

— enchaînement linéaire des flots de texte ou des blocs

— ordre déduit de la structure XML ou du mode Articles

— ancrage des objets hors flot principal (illustrations, encarts…) dans le flot principal

➢ des tables (matières, figures…), notes et index générés à l’aide des outils dédiés InDesign

(et non à la main)

➢ pas de mise en forme forcée dans les contenus : saut de ligne forcé, césure non

conditionnelle, ligne blanche, espaces multiples

6

◼ Contraintes : exemples ◼

• En-tête et pied de page non exportés

• Placement des illustrations et des hors-textes non ancrés

• Placement des notes : en fin de chapitre avec EPUB 2, sous forme de pop-up avec EPUB 3

Source : CNDP

7

◼ Contraintes : ordre d’exportation des contenus ◼

L

L’algorithme d’export d’InDesign conduit à un ordre d’apparition erroné des contenus dans l’EPUB.

8

OUTILS

Utiliser une version récente d’InDesign :➢ plus de contenus exportés automatiquement au fil

des versions (par exemple les index)

➢ meilleure qualité de l’export HTML

➢ plus d’options de paramétrage de l’export EPUB

En pratique :➢ InDesign CS6 (2012)

➢ InDesign CC (2014 à 2018)

➢ et un éditeur de code

9

B. POUR CRÉER UN EPUB ACCESSIBLE AVEC INDESIGN

10

1. Ordre logique

2. Structure hiérarchique

3. Balisage HTML

• Notes de bas de page

• Annotations sémantiques

• Langues

• Espaces verticaux

4. Description des images

5. Tables

• des repères

• des folios

6. Métadonnées

Ancrer les objets dans le flot de texte principal (ou utiliser le mode Articles pour une mise en page sans flot)

11

Ordre logique

Beaucoup de manipulations pour

certaines maquettes

Impacts possibles sur la maquette

papier

• Pour les légendes d’illustration, utiliser Objet/Générer une légende

• Découper l’ouvrage en chapitre à l’aide du panneau Modifier toutes les balises d’exportation.

• Dans chaque chapitre, la balise de plus haut niveau doit être <h1>. Elle doit être unique (attention aux titres maquettés sur plusieurs lignes…)

12

Structure hiérarchique

La balise HTML <title> doit être signifiante or InDesign la renseigne avec le nom du fichier :

<title>Monde_fantastique-2</title>

13

Utiliser un balisage HTML sémantique : Modifier toutes les balises d’exportation ou

Options de style de paragraphe/Exportation du balisage

13

Styles de

paragraphes HTML

"montitre1" <h1>

"montitre2" <h2>

"encadré" <aside>

"maliste" <li>

"fig" <figure>

"legende" <figcaption>

…

Balisage HTML

• Les associations créées sont mémorisées dans le gabarit InDesign et peuvent donc être réutilisées

Styles d’objet HTML

"figureChap" <figure>

"maBoite" <aside>

"debut" <bsection>

…

• Idem pour les styles de caractères

14

Styles de

caractères HTML

"monItalique" <i>

"citation« <i>

"gras" <b>

"déclamation" <em>

…

Balisage HTML (suite)

• InDesign propose une liste fixe de balises

HTML, mais elle est éditable

• Idem pour les styles d’objet

• Une bonne pratique consiste à utiliser une feuille de styles CSS pour la

production EPUB (conçue pour une collection, un éditeur, etc.)

• Cela permet de garantir une production homogène, d’utiliser des

polices différentes des polices print, etc.

• InDesign autorise de ne pas exporter sa propre

feuille CSS et d’importer à la place une feuille

CSS externe (onglet HTML et CSS du panneau

d’exportation

15

Gestion des CSS

• Des ruptures de contexte dans le texte doivent être marqués par une balise <hr/>

afin que la synthèse sonore puisse faire une pause.

• Dans InDesign, insérer un style de paragraphe vide et faire correspondre avec une

balise d’export HTML <hr/>

• Styler cette balise avec du CSS dans l’EPUB

(symbole, espace vertical, filet horizontal…)

16

Espaces verticaux

Notes de bas de page

Pour les notes de bas de page,

paramétrer un balisage EPUB 3

17 Ne fonctionne pas sur toutes les liseuses. Le

codage HTML est donc à retoucher pour rendre

compatible avec liseuses EPUB 2 et (certaines)

liseuses EPUB 3

Listes

Pour les listes à puce et les listes numérotées, ne

pas utiliser l’option Convertir en texte,

afin de conserver un balisage

sémantique :

<ol>, <ul>, <li>

18

Cas des notes de fin de chapitre

[InDesign CC 2018

uniquement]

19

Balisage non sémantique

Lecture audio synchronisée

Avec structuration : balisage HTML et annotations sémantiques

Avec balisage anonyme <div> et feuille de styles CSS (orienté mise en page)

20

Annotations sémantiques

Lecture audio synchronisée

21

1Sur les objets, à l’aide de

l’onglet Options d’exportation

d’objet/EPUB et HTML

• Choisir le type epub:type adéquat

dans le vocabulaire.

• L’export HTML est :

<div epub:type="chapter">

…

</div>

Annotations sémantiques

Lecture audio synchronisée

22

Annotations sémantiques : limitations

On ne peut pas utiliser un attribut aria:role

Sur les objets uniquement : blocs, flots de texte. On ne peut

donc pas positionner epub:type sur des styles de

paragraphes ou de caractères.

Il n’est pas possible de créer une

structure logique hiérarchique annotée :

<section epub:type="chapter">

<h1>

<p>

<section epub:type="section">

<h2>

<p>

</section>

…

</section>

Lecture audio synchronisée

23

La ou les langues principales du document sont référencées dans le manifeste OPF et sont donc connues des dispositifs de lecture et d’assistance.

Mais les contenus textuels (mot, ligne, paragraphe…) dans des langues autres doivent être signalés à l’aide des attributs lang et xml:lang

<i lang="FR" xml:lang="FR">J’aime mange de la baguette</i>

<span class="allemand" lang="de-DE" xml:lang="de-DE">Himemberg</span>

Langues

Lecture audio synchronisée

24

Les langues présentes dans le document InDesign sont exportées comme métadonnées dc:language dans le manifeste OPF.

La langue principale du document (définie dans Préférences/Dictionnaire) est exportée dans les fichiers HTML (attributs lang et xml:lang sur la balise <body>)

La langue définie dans les styles de paragraphe et de caractère (Formats de caractères avancés) est exportée :

<span class="anglais" lang="en-EN"

xml:lang="en-EN">New York</span>

Langues (suite)

Les attributs lang devraient être placés sur

la balise <html> de chaque fichier et non sur

<body>

Toutes les langues présentes (même de manière

très ponctuelle) sont exportées

dans le manifeste .opf

Description des imagesAnnoter les contenus non textuels avec Options de style d’objet/Options d’exportation/Texte de

remplacement (pour un style d’objet) ou Options d’exportation d’objet/Texte de remplacement (pour

les objets)

25 • Le texte est placé dans un attribut alt :

alt="texte descriptif"

Description des images

Les textes descriptifs peuvent provenir :

—de la zone de saisie dans InDesign

—de la structure dans InDesign (panneau

Affichage/Structure)

—des annotations alt saisies dans Word

—des champs de métadonnées XMP des

illustrations importées (titre, description,

titraille, ou autre champ XML à spécifier)

NB : les images décoratives doivent avoir

un attribut alt vide : alt=""

26 Exemple Adobe Photoshop

Table des repères (landmarks)

Une table des repères permet d’identifier les principaux éléments présents dans un ouvrage

(préface, début du contenu principal, annexes, etc.) et ses outils de navigation (TdM, table des

figures, index, etc.).

<nav epub:type="landmarks">

<h1>Guide</h1>

<ol>

<li>

<a epub:type="toc" href="tdm.xhtml">Table des matières</a>

</li>

<li>

<a epub:type="bodymatter" href="chap001.xhtml#bodymatter">Chapitre 1</a>

</li>

…

<li>

<a epub:type="index" href="index.xhtml">Index</a>

</li>

</ol>

</nav>

27

Lecture audio synchronisée

28

1

1.Options d’exportation d’objet,

sur un flot de texte, appliquer la

structuration sémantique epub:type

(« Document Partitions ») : cover,

bodymatter. backmatter…

2. Exporter en version EPUB 3.

3. La table des repères est générée

d’après les epub:type.

Ne fonctionne que sur les flots de texte

Il faut ensuite traduire en français

les entrées de la table.

Table des repères avec InDesign

Table des folios (page list)

Liens entre contenu numérique et folios papier

29

les marqueurs insérés dans le contenu

…

<div class="p-indent">Nous allons avoir sous les

yeux les êtres les plus dignes de l’attention du

physicien. Que l’imagination, éclairée par le

flambeau de la science, rassemble en effet tous

les produits organisés de

<span id="page002" epub:type="pagebreak"

title="002"></span>la puissance créatrice…

Table des folios

Gestion de l’affichage des tables par les liseuses

30

les folios papier

<nav epub:type="page-list">

<h1>Pages</h1>

<ol>

<li><a

href="ebpt6k6289050k_tp01.html">3</a></li>

<li><a

href="ebpt6k6289050k_p01.html">5</a></li>

…

</ol>

</nav>

Commutation des folios numériques/papier

31

11. Script InDesign (AppleScript, JavaScript)

pour insérer des ancres de page.

2.Marqueurs exportés automatiquement lors

de l’export EPUB :

<span class="sautPage">{51}</span>

3. Scripts pour :

• Créer les marqueurs dans le

contenu :

<a epub:type="pagebreak" id="p51"</a>

• et générer la table des folios :

<nav epub:type="page-list" hidden="">

<h1>Pages</h1>

<ol>

…

<li><a href="chap1.xhtml#p51">51</a>

</li>

…

Table des folios avec InDesign

Il faut utiliser des scripts*

Il faut spécifier quelle est l’œuvre source dans les

métadonnées (dc:source)

* PageStaker + EPUBOgrify

Métadonnées

Ajouter les métadonnées d’accessibilité dans le manifeste .opf

<meta property="schema:accessMode">textual</meta>

<meta property="schema:accessMode">visual</meta>

<meta property="schema:accessModeSufficient">textual,visual</meta>

<meta property="schema:accessModeSufficient">textual</meta>

<meta property="schema:accessibilityFeature">transcript</meta>

<meta property="schema:accessibilityFeature">MathML</meta>

<meta property="schema:accessibilityFeature">alternativeText</meta>

<meta property="schema:accessibilityHazard">flashing</meta>

…

32 Il n’est pas possible d’insérer ces métadonnées dans InDesign

NOT WITH INDESIGN

Après la finalisation de l’export dans InDesign :

— Régler les points signalés plus haut (en rouge)

— Inclure si nécessaire des polices de caractères

Pour les caractères non supportés par les logiciels de lecture (Adobe Digital Edition a une faible couverture

Unicode) : polices non latines ; caractères spéciaux, phonétique, mathématique, etc.

Pour utiliser des polices « numériques » et non pas les polices print

— Retoucher/nettoyer le balisage HTML exporté par InDesign.

33

CONCLUSION

La production d’un EPUB accessible avec InDesign est possible.

Cependant, ce mode de production est tributaire de la nature même du travail à

réaliser et peut conduire à :

— des tâches manuelles répétitives (par ex. ancrer des blocs dans le flot de texte)

— un réglage complexe des paramètres d’export

Néanmoins, la mise en œuvre d’un gabarit InDesign en amont (en anticipant la

production numérique) et de méthodes de maquettage rigoureuses permettent

d’atténuer ce point.

Concernant l’accessibilité, des limitations demeurent (en particulier pour l’annotation

sémantique) mais elles ne sont pas un obstacle à l’obtention d’un EPUB doté d’un bon

niveau d’accessible.

34

TOUTES LES

RESSOURCES NORMES

ET STANDARDS :

HTTPS://WWW.SNE.FR/N

UMERIQUE-2/NORMES-

ET-STANDARDS/

TOUTES LES

RESSOURCES POUR LA

PRODUCTION DE LIVRES

NUMERIQUES

ACCESSIBLES :

HTTPS://WWW.SNE.FR/N

UMERIQUE-

2/RESSOURCES-POUR-

LA-PRODUCTION-DE-

LIVRES-NATIVEMENT-

ACCESSIBLES/

35

La présente annexe a été produite par Sébastien Cretin (FeniX),

Louis Marle (Albin-Michel) et Jean-Philippe Moreux (BnF)