Auto-déclaration versus certification de conformité

Dans un premier temps, lors de la mise en place des processus de production EPUB NAC, les éditeurs se limiteront à une auto-déclaration de conformité aux référentiels dans nos métadonnées EPUB (destinées au système de lecture).

Périmètre, niveau et caractéristiques d’accessibilité

Il est impossible d’imposer à toutes les maisons d’édition :

• un même périmètre de catalogue de titres EPUB NAC ;
• un même niveau d’accessibilité WCAG ;
• les mêmes caractéristiques détaillées d’accessibilité.

Ce faisant, pour permettre à chacun de se positionner au mieux pour une accessibilité utile, soutenable et labellisable, la charte SNE adopte une stratégie modulaire.

• Elle propose des choix d’implémentation par défaut (sur lesquels l’éditorial, la fabrication et le prestataire pourront s’appuyer) ;
• Elle indique localement quelles sont les marges de manœuvre de l’éditorial et de la fabrication, s’ils souhaitent baisser ou au contraire augmenter l’accessibilité de leurs EPUB nativement accessibles (pour des services qu’ils jugent soit inutiles, soit indispensables au lectorat empêché de lire).

Niveau d’accessibilité WCAG

Les maisons d’édition ont dans l’absolu le choix entre les trois niveaux d’accessibilité du WCAG : A, AA, AAA. Au moment du devis ou de la commande, elles indiqueront au prestataire le niveau d’accessibilité WCAG souhaité. Dans le cas où la maison d’édition ne pourrait / ne voudrait pas choisir son niveau WCAG, un niveau par défaut est défini par la charte SNE.

Caractéristiques détaillées d’accessibilité

Pour certains types de contenus éditoriaux, les maisons d’édition ont une marge de manœuvre dans la définition des caractéristiques détaillées d’accessibilité. Voici les contenus auxquels des choix peuvent s’appliquer :

Le détail de ce tableau est repris dans la suite du document.

Repères (alias landmarks)

Dans le fichier XML de navigation (cf. nav.xhtml), en plus du sommaire et de la liste de pages, les grands repères de navigation au sein de l’EPUB doivent être listés dans les « landmarks » (cf. balise <nav> dont l’attribut epub:type vaut landmarks).

Voici les grands repères de navigation à lister dans le même ordre que dans la publication papier :

Pour l’epub:type=landmarks, aucun rôle ARIA (Web ou DPUB) ne doit être posé, car aucun rôle ARIA n’a été associé à cette valeur dans la table de correspondance epub:type / role ARIA.

Table des matières ou sommaire

La table des matières (ou le sommaire) est un des deux moyens obligatoires d’accéder au contenu de la publication (conjointement avec la liste de pages).

Dans les EPUB, on distingue fonctionnellement le « menu-sommaire » et le « contenu-sommaire ».

• Le « menu-sommaire », alias « table des matières technique (machine readable TOC) », est le sommaire qui apparaît dans le menu de navigation du système de lecture. Certains d’entre eux ne savent pas l’afficher en grands caractères et ne permettent pas aux technologies d’assistance d’interagir avec eux. Ce faisant, le menu-sommaire n’est pas toujours accessible.
• Le « contenu-sommaire » est le contenu XHTML qui apparaît pendant la lecture de la publication (en tournant ses pages). Il peut être affiché en grands caractères et les hyperliens vers les pages de contenu sont exploitables par les technologies d’assistance. Ce faisant, il est lui toujours accessible et devient fonctionnellement obligatoire .

Voici comment la technique s’articule avec le fonctionnel au format EPUB 3 nativement accessible. En vert ce qui est nécessaire à l’accessibilité. En marron, ce qui est nécessaire à l’interopérabilité et qui pourra disparaître à terme. À date, l’ensemble (marron + vert) doit être produit dans les EPUB NAC.

Le menu-sommaire et le contenu-sommaire doivent offrir les mêmes points d’entrée pour naviguer dans le contenu de la publication. De plus, tous les chapitres doivent être navigables, même s’ils ne comportent pas de titre dans la publication papier. Dans ce cas, l’éditeur donnera au prestataire ses instructions pour libeller les titres de chapitre dans la version numérique.

Pour être accessibles, les fichiers nav.xhtml et toc.xhtml doivent par ailleurs faire l’objet d’un balisage sémantique XHTML 5. Ils doivent utiliser la balise <nav>, ainsi que les attributs sémantiques @epub:type et @role ARIA (si équivalent).

Exemples

 content.opf…
<manifest>
…
    <item id="nav-ncx" href="nav.ncx" media-type="application/x-dtbncx+xml"/>
    <item id="nav-xhtml" href="nav.xhtml" media-type="application/xhtml+xml" properties="nav"/>
    <item id="toc" href="Text/toc.xhtml" media-type="application/xhtml+xml"/>
…
<spine toc="nav-ncx">
<itemref idref="toc"/>
                                    

 nav.ncx…
<navMap>
    <navPoint id="navpoint1" playOrder="1">
    <navLabel>
            <text>Couverture</text>
    </navLabel>
    <content src="Text/cover.xhtml"/>
    </navPoint>
…
                                    

 nav.xhtml…
<nav id="toc" epub:type="toc" role="doc-toc">
    <h1>Sommaire</h1>
    <ol>
        <li><a href="Text/cover.xhtml">Couverture</a></li>
…
                                    

 toc.xhtml…
<nav id="toc" epub:type="toc" role="doc-toc">
    <h1>Sommaire</h1>
    <ol>
        <li><a href="Text/cover.xhtml">Couverture</a></li>
…
                                    

Liste de pages

La fourniture de la liste de pages devient obligatoire. Elle doit être implémentée sous forme EPUB 3 (cf. <nav>) afin de garantir l’accessibilité aux technologies d’assistance. Tant que les systèmes de lecture et les revendeurs l’exigeront, elle doit aussi être implémentée sous forme rétrocompatible EPUB 2 (qui pourra disparaître à terme).

Exemples

 content.opf…
<manifest>
…
    <item id="ncx" href="nav.ncx" media-type="application/x-dtbncx+xml"/>
    <item id="nav" href="nav.xhtml" media-type="application/xhtml+xml" properties="nav"/>
…
<spine toc="ncx">
                                    

 nav.ncx…
<pageList id="page-mapping">
    <navLabel><text>Liste de pages</text></navLabel>
    <pageTarget id="p1" type="normal" value="1" playOrder="21">
        <navLabel><text>1</text></navLabel>
        <content src="Text/content-1.xhtml#page001"/>
    </pageTarget>
…
                                    

 nav.xhtml…
<nav id="pagelist" epub:type="page-list" role="doc-pagelist">
    <h1>Liste de pages</h1>
    <ol>
        <li id="p1"><a href="Text/content-1.xhtml#page001">1</a></li>
…
                                    

La liste de pages fait référence aux sauts de page qui sont posés dans l’EPUB. Voir § Sauts de page pour les détails sur la politique de gestion des sauts de pages.

Guide

Afin de faciliter une navigation rapide dans les contenus aux déficients visuels, on utilisera la référence de type text du guide OPF pour donner un accès immédiat aux premières pages de lecture stricto sensu (pour leur permettre de sauter les pages de titre, couverture et de copyright typiquement).
NB : ce pointeur était déjà exigé par les contrôles Apple au format EPUB fixed layout. On l’étend au format EPUB reflowable.

Exemples

 content.opf…
<guide>
    <reference type="cover" title="Couverture" href="Text/cover.xhtml"/>
    <reference type="text" title="Début de lecture" href=" Text/content-1.xhtml" />
</guide>
…
                                

Encodage des caractères

L’encodage des caractères doit être réalisé en utf-8.

 *.xhtml<?xml version="1.0" encoding="utf-8"?>
                                    

De plus, TOUS les caractères spéciaux (ligatures ainsi que caractères appartenant à des alphabets non latins ) doivent être modélisés par le bon code caractère Unicode (directement ou via entité caractère correspondante). Il est interdit de les modéliser par surcharge de caractère ASCII ou par substitution d’une image au dit caractère. Cela perturberait les technologies d’assistance (respectivement altération de mot ou coupure de mot pour la synthèse vocale et la traduction braille), ainsi que l’agrandissement de caractères (les images-glyphes ne peuvent pas être agrandies).

Exemple

Ce faisant, il faut s’assurer qu’une police sachant afficher correctement ces codes caractères dans la plage Unicode est bien disponible pour le système de lecture (soit police préinstallée sur le matériel de lecture, soit police embarquée dans l’EPUB). Voir § Feuille de styles pour plus de détails.

Head

Chaque document XHTML doit renseigner une balise <title> dans son <head>. Ce titre (qui n’est pas affiché) sera utilisé par les technologies d’assistance pour permettre à leurs usagers de déterminer s’ils veulent lire la page ou non (et la zaper le cas échéant).

La valeur du <title> est déterminée par le contexte du document. Ne pas y mettre le titre de la publication, qui non seulement ne varie pas (et que l’on connaît déjà lorsqu’on a commencé la lecture de l’EPUB), mais qui ne permet pas non plus de discriminer les documents. Le titre de la publication ne serait pas faux, mais parasiterait les technologies d’assistance en répétant constamment une même information connue et non discriminante. C’est d’ailleurs pourquoi le WCAG stipule bien que le <title> du <head> doit décrire le contenu du document lui-même et pas juste celui du site Web auquel appartient le document (site assimilable à nos publications EPUB).

Dans la plupart des cas, la valeur du <title> est la même que celle du <h*> du document (ex. : Chapitre 1 tout court, s’il n’y a pas de parties ni de volumes au-dessus). Dans le cas de parties volumineuses découpées en plusieurs documents, la valeur du <title> est le titre de la hiérarchie qui a subi le découpage - en allant du particulier au général (ex. : Chapitre 1 – Partie 2). Dans le cas des documents qui n’ont pas de headings <h*> :

• si ce document est pointé par une rubrique de sommaire, alors reprendre le libellé de la rubrique de sommaire qui pointe dessus ;
• sinon, créer un titre factice « suite de la page précédente ».

 *.xhtml…
<head>
    <title>Chapitre 1 – Partie 2</title>
    …
</head>
<body id="chap1" epub:type="bodymatter">
    <section epub:type="chapter" role="doc-chapter" >
        <h2>Chapitre 1</h2>
…

Sémantique de la hiérarchie

Le texte courant de la publication s’inscrit toujours dans une structure hiérarchique. Les éléments implémentant la hiérarchie doivent être sémantisés grâce aux balises HTML5 et, autant que faire se peut, grâce aux attributs @epub:type et @role ARIA. L’élément HTML5 section remplace l’élément div dès lors que l’on veut identifier un bloc sémantique.

Niveaux hiérarchiques

La publication peut avoir des niveaux hiérarchiques de profondeur variable.

Chaque niveau hiérarchique porte un titre de type heading (cf. h1-h6) qui exprime obligatoirement le niveau de profondeur dans toute la publication (et pas juste du document XHTML courant) et dont le titre est significatif du contenu . Le heading devient donc bien plus qu’un simple véhicule de style. Ce faisant, les niveaux de titres doivent obligatoirement commencer au premier niveau de la hiérarchie (h1) puis descendre progressivement.

Les titres exprimant la hiérarchie de la publication sont cohérents entre le sommaire et le contenu : le libellé de l’entrée du sommaire doit être le même que le titre du contenu pointé par le sommaire.

Lexiques & glossaires

Les lexiques et glossaires sont librement structurés en HTML5 (hors div). On n’impose notamment pas de les baliser en dl/dt/dd, car cette modélisation HTML est trop restrictive pour être généralisée. Elle ne permet pas :

• de gérer de sections dans une même lexique dl ;
• de gérer des listes de vocabulaire sans définition.

En revanche, les lexiques / glossaires doivent obligatoirement être qualifiés comme tels via les attributs @epub:type et @role ARIA (si équivalent).

Enfin, les lexiques et glossaires peuvent être placés dans n’importe quel contexte (dont aside).

NB : la CSS pourra s’appuyer sur les informations sémantiques disponibles plutôt qu’ajouter des classes de présentation, dédiées à la seule mise en forme.

Exemple Solution haute

 *.xhtml [de définition]…
<h1>Annexes</h1>
<section epub:type="glossary" role="doc-glossary">
    <h2>Lexique</h2>
    <h3>A-C</h3>
    <ul>
        …
        <li><span id="term10" epub:type="glossterm" role="term">cohérence</span> : qualité d’un raisonnement ou d’un texte dans lequel on ne peut déceler de contradiction.</li>
        …
    </ul>
    <h3>D-K</h3>
    …
    <h3>L-R</h3>
    …
    <h3>T-Z</h3>
    …
</section>
…

Exemple Solution basse

 *.xhtml [de définition]…
<h1>Annexes</h1>
<section epub:type="glossary" role="doc-glossary">
    <h2>Lexique</h2>
    <h3>A-C</h3>
    <ul>
        …
        <li><span id="term10">cohérence</span> : qualité d’un raisonnement ou d’un texte dans lequel on ne peut déceler de contradiction.</li>
        …
    </ul>
    <h3>D-K</h3>
    …
    <h3>L-R</h3>
    …
    <h3>T-Z</h3>
    …
</section>
…

Exemple

 *.xhtml [de renvoi]…
<a epub:type="glossref" role="doc-glossref" href="Text/annexes.xhtml#term10">cohérence</a>
…

Les définitions de termes qui ne sont pas regroupées dans un glossaire / lexique, mais qui sont posées localement sur des termes dans le flot du texte sont autorisées, mais pas exigées. Elles sont présentées aux voyants dans une pop-up au survol. Elles seront aussi accessibles aux technologies d’assistance, suivant les préférences utilisateur. L’éditorial fournira les définitions qu’il souhaite rajouter dans sa préparation de copie numérique.

Exemple

 *.xhtml [de renvoi]…
    <dfn title="monnaie virtuelle de type cryptographique et système de paiement pair-à-pair">bitcoins</dfn>
…
    <abbr title="Voiture de Tourisme avec Chauffeur">VTC</abbr>
…

Bibliographies

La bibliographie peut être qualifiée sémantiquement comme telle par les attributs @epub:type et @role ARIA. En revanche, elle est librement structurée en HTML5 (hors div).

Les références bibliographiques sont elles aussi librement structurées en HTML5. Dans le cas où la biographie a été qualifiée comme telle, il est nécessaire de qualifier sémantiquement chaque référence par des attributs @epub:type="biblioentry" et @role="doc-biblioentry. Par contre, elles n’ont pas à être décomposées (cf. auteur, titre, éditeur, date de publication, pages) en segments sémantiquement différenciés par des balises HTML5 et/ou des attributs @epub:type ou @role ARIA spécifiques. En effet, le texte des entrées bibliographiques suffit à comprendre l’information véhiculée. En revanche, le titre de l’œuvre mentionné dans l’entrée bibliographique sera obligatoirement balisé en <em> (et pas en <i>).

Dans le texte courant, les références à des œuvres (avec / sans hyperlien vers une entrée bibliographique) doivent être balisés par l’élément HTML5 <cite> (source). Les hyperliens renvoyant aux entrées de la bibliographie n’ont pas à être qualifiés sémantiquement par des attributs @epub:type="biblioentry" et @role="doc-biblioentry, dès lors qu’ils sont compris dans un <cite>. L’éditorial marquera les références aux œuvres dans sa préparation de copie numérique.

Il ne faut pas baliser les titres d’œuvres en <cite> dans les entrées bibliographiques elles-mêmes, car <cite> est réservé aux références depuis le texte courant.

Il ne faut pas baliser les références bibliographiques (du texte courant ou de la bibliographie) en <q> ou <blockquote>, ces éléments étant réservés en HTML5 aux citations de contenu.

NB : la CSS pourra s’appuyer sur les informations sémantiques disponibles plutôt qu’ajouter des classes de présentation, dédiées à la seule mise en forme.

NB : la CSS pourra s’appuyer sur les informations sémantiques disponibles plutôt qu’ajouter des classes de présentation, dédiées à la seule mise en forme.

Exemple Solution haute

 *.xhtml…
<section epub:type="bibliography" role="doc-bibliography">
    <h1>Vous avez aimé Max et les poissons ? Découvrez...</h1>
    …
    <p id="bib10" epub:type="biblioentry" role="doc-biblioentry">Rachel Hausfater et Yaël Hassan, <em>L’ombre</em>, Nathan 2011</p>
    <p id="bib11" epub:type="biblioentry" role="doc-biblioentry">Nathalie Somers, <em>Je me souviens, Rebecca</em>, Nathan 2011</p>
    …
</section>
…

Exemple Solution basse

 *.xhtml [de définition]…
<section>
    <h1>Vous avez aimé Max et les poissons ? Découvrez...</h1>
    …
    <p id="bib10">Rachel Hausfater et Yaël Hassan, <em>L’ombre</em>, Nathan 2011</p>
    <p id="bib11">Nathalie Somers, <em>Je me souviens, Rebecca</em>, Nathan 2011</p>
    …
</section>
…

Exemple de référence à œuvre

 *.xhtml [de définition]…
<p>Voir <cite><a href="Text/biblio.xhtml#bib10">L’ombre Yaël Hassan</a></cite>de Rachel Hausfater et Yaël Hassan, p. 12 ainsi que <cite>Max et les poissons</cite> de Sophie Adriansen, p. 4</p>
…

Index

Les index de fin de livre sont librement structurés en HTML5 (hors div). On n’impose notamment pas de les baliser en dl/dt/dd, car cette modélisation HTML ne permet pas de gérer les sections dans un même index. En revanche, les index doivent obligatoirement être qualifiés comme tels via les attributs @epub:type et @role ARIA (si équivalent). Enfin, les index de fin de livre peuvent être placés dans n’importe quel contexte.

NB : la CSS pourra s’appuyer sur les informations sémantiques disponibles plutôt qu’ajouter des classes de présentation, dédiées à la seule mise en forme.

Exemple Solution haute

 *.xhtml [de définition]…
<section epub:type="index" role="doc-index">
    <h1>Index</h1>
    <h2><span id="page008" title="8" epub:type="pagebreak" role="doc-pagebreak"/>Solution haute</h2>
    <h3 epub:type="index-group">A-F</h3>
    <ul epub:type="index-entry-list">
        <li id="idx10" epub:type="index-entry">
            <span epub:type="index-term">Émoticône</span>
            <span epub:type="index-locator-list"><a epub:type="index-locator" href="./epubNACsne-1.xhtml#page002">2</a>, <a epub:type="index-locator" href="./epubNACsne-2.xhtml#page003">3</a></span>
        </li>
        <li id="idx11" epub:type="index-entry">
            <span epub:type="index-term">Formule complexe</span>
            <span epub:type="index-locator-list"><a href="./epubNACsne-1.xhtml#page002">2</a>, <a href="./epubNACsne-2.xhtml#page003">3</a></span>
        </li>
        <li id="idx12" epub:type="index-entry">
            <span epub:type="index-term">Formule mathématique</span>
            <span epub:type="index-xref-preferred">Voir <a href="#idx50">MathML</a></span>
        </li>
        <li id="idx13" epub:type="index-entry">
            <span epub:type="index-term">Formule simple</span>
            <span epub:type="index-locator-list"><a href="./epubNACsne-1.xhtml#page002">2</a>, <a href="./epubNACsne-2.xhtml#page003">3</a></span>
        </li>
    </ul>
    <h3 epub:type="index-group">I-M</h3>
    <ul epub:type="index-entry-list">
        <li id="idx50" epub:type="index-entry">
            <span epub:type="index-term">MathML</span>
            <span epub:type="index-locator-list"><a href="./epubNACsne-1.xhtml#page002">2</a>, <a href="./epubNACsne-2.xhtml#page003">3</a></span>
            <span epub:type="index-xref-related">Voir aussi <a href="#idx13">Formule simple</a> et <a href="#idx11">Formule complexe</a></span></li>    
    </ul>
</section>

Exemple Solution basse

 *.xhtml [de définition]…
<section epub:type="index" role="doc-index">
    <h1>Index</h1>
    <h2><span id="page009" title="9" epub:type="pagebreak" role="doc-pagebreak"/>Solution basse</h2>
    <h3>A-F</h3>
    <ul>
        <li id="idx10">
            <span>Émoticône</span>
            <span><a href="./epubNACsne-1.xhtml#page002">2</a>, <a href="./epubNACsne-2.xhtml#page003">3</a></span>
        </li>
        <li id="idx11">
            <span>Formule complexe</span>
            <span><a href="./epubNACsne-1.xhtml#page002">2</a>, <a href="./epubNACsne-2.xhtml#page003">3</a></span>
        </li>
        <li id="idx12">
            <span>Formule mathématique</span>
            <span>Voir <a href="#idx50">MathML</a></span>
        </li>
        <li id="idx13">
            <span>Formule simple</span>
            <span><a href="./epubNACsne-1.xhtml#page002">2</a>, <a href="./epubNACsne-2.xhtml#page003">3</a></span>
        </li>
    </ul>
    <h3>I-M</h3>
    <ul>
        <li id="idx50">
            <span>MathML</span>
            <span><a href="./epubNACsne-1.xhtml#page002">2</a>, <a href="./epubNACsne-2.xhtml#page003">3</a></span>
            <span>Voir aussi <a href="#idx13">Formule simple</a> et <a href="#idx11">Formule complexe</a></span></li>    
    </ul>
</section>

Listes

Les listes d’items, doivent être balisées comme telles, <ol> pour les listes ordonnées (numérotées), <ul> non ordonnées (non numérotées). Elles ne seront pas balisées en <p> donc. À noter que les dialogues (introduits par des tirets) ne sont pas des listes d’items à proprement parler. Ils sont donc traités en simples paragraphes.

Les introducteurs d’items de listes seront :

• Soit posés en dur dans le texte ;
• Soit générés par le moteur de rendu
• sur la base du balisage ;
• sur la base de la feuille de style CSS

Les trois solutions sont accessibles, sauf la 3e dans le cas où les introducteurs de liste sont absolument indispensables à la compréhension du contenu , car le contenu doit pouvoir être compris en débranchant la CSS. Sinon, le prestataire pourra librement choisir son implémentation, en fonction de sa chaîne de production et de la nature de la publication, à la lumière des avantages et inconvénients des différentes approches.

Enfin, comme dans le papier, les types d’introducteurs de listes et les systèmes de numérotation sont totalement libres.

Exemple

 *.xhtml …
<p>Liste à tiret :</p>
<ul class="dashed">
    <li>- 1er item ;</li>
    <li>- 2e item ;</li>
    <li>- 3e item.</li>
</ul>
…
<p>Liste numérotée en lettre minuscule pas citée ailleurs :</p>
<ol type="a">
    <li>1er item ;</li>
    <li>2e item ;</li>
    <li>3e item.</li>
</ol>

Notes

Les notes (appel de note, bloc de notes, corps de note, lien retour vers l’appel de note) sont balisées en HTML5 (a, section, aside, a) et qualifiées comme telles via les attributs @epub:type et @role ARIA (si équivalent). En effet, grâce aux préférences utilisateur, les notes seront restituées ou non par les technologies d’assistance.

Exemple

 *.xhtml …
<a epub:type="noteref" role="doc-noteref" id="ap_ntb-1" href="Text/notes.xhtml#ntb-1">1</a>
…

 notes.xhtml …
<body id="notes" epub:type="backmatter">
    <h1>Notes</h1>
    <section epub:type="footnotes">
        …
        <aside epub:type="footnote" role="doc-footnote" id="ntb-1">
            <p><a epub:type="referrer" role="doc-backlink" href="chap1.xhtml#ap_ntb-1">1</a>Mon texte de note</p>
        </aside>
    </section>
</body>

Encadrés

Les encadrés (quelle que soit leur position dans la page) doivent être signalés par la balise sémantique HTML5 <aside>. Le rôle joué par l’encadré pourra être précisé par les attributs @epub:type et @role ARIA, mais sans obligation.

Exemple

 *.xhtml …
<aside epub:type="notice" role="doc-notice">
    <h5>Attention !</h1>
    <p>Navigateur et moteur de recherche sont parfois confondus. Le fait qu’un moteur de recherche soit utilisé 
    dans un navigateur et qu’il soit souvent défini en page d'accueil explique cette confusion.</p>
</aside>
…

Citations

HTML5 offre des balises sémantiques HTML5 <q> et <blockquote>, pour marquer les citations de contenu inline et block respectivement (quelle que soit la longueur de la citation, qui n’est pas le critère déterminant la balise à utiliser).

Toutefois l’expérience a montré que ces balises posaient plus de problèmes qu’elles n’en résolvaient :

• Sur certains systèmes de lecture, elles déclenchent parfois automatiquement la génération de guillemets (mais pas toujours, c’est déterminé par la CSS par défaut du système de lecture) ;
• Les guillemets générés par défaut sont des guillemets anglais, au lieu de guillemets français de nos règles typographiques françaises ;
• Pour les voyants, ces guillemets s’affichent en double des guillemets français posés en dur dans le texte ;
• Pour les utilisateurs des technologies d’assistance inversement, si aucun guillemet n’est placé en dur dans le texte, les guillemets générés seront perdus car les technologies d’assistance n’accèdent pas au CSS qui les génèrent.

Le plus interopérable pour tous les systèmes de lecture et pour tous les publics est donc de ne pas utiliser les balises sémantiques <q> et <blockquote> et de simplement signaler les citations de contenu par des guillemets français placés en dur dans le texte.

Attention, en HTML5, ne pas utiliser la balise <cite> non plus pour marquer les citations de contenu. Elle est réservée au marquage des sources de citations. Il s’agit en fait de références à des œuvres. Voir aussi § Bibliographies.

Exemple

 *.xhtml …
<p>Il aimait dire : « la vie, c’est comme une bicyclette, il faut avancer pour ne pas perdre l’équilibre ».</p>
…
<p>« La vie, c’est comme une bicyclette, il faut avancer pour ne pas perdre l’équilibre. »</p>
<p>Albert Einstein</p>                                        
…

Inclusions de texte

Lorsque des publications incluent des courriers (postaux ou électroniques), des échanges sur les réseaux sociaux, des extraits d’œuvres (ex : scène de théâtre, page de journal intime, etc.) ou des œuvres entières (ex : poésie, chanson, recette de cuisine, etc.) sans les encadrer par des guillemets, l’interruption du texte courant par ces inclusions textuelles est généralement signalée aux voyants par la maquette. Si aucun mot ne vient en complément de la maquette pour le faire, il faudrait idéalement offrir un signalement alternatif aux non-voyants. Pour ce faire, on encadrera ces textes parallèles par l’élément HTML5 <article>, ou <div> à défaut, afin de les placer sur un 2e plan par rapport au texte courant. Pour l’instant, aucune valeur d’attribut @epub:type ou @role ARIA ne permet de préciser leur « genre littéraire » (visible seulement dans la maquette du coup).

Les inclusions de textes qui ne peuvent pas être mises en forme par des propriétés de CSS (ex : lettre manuscrite, échanges mails ou réseaux sociaux) doivent être traitées en images textuelles, avec un texte alternatif court et éventuellement un texte alternatif long qui doit être structuré en HTML comme s’il n’avait pas été mis en forme via une image. Tout ce qui est dit ci-dessus sur les inclusions de texte vaut donc aussi pour la structuration des textes longs de ce type d’images.

Voir aussi § Texte alternatif court/long sur les images sur les conditions de texte long.

Exemple

 *.xhtml …
<article>
    <p>Maman chérie,</p>
    <p>J'essaie de ne pas t'en vouloir. J'essaie de te comprendre. Mais, pour l'instant, je suis encore très en colère.</p>
    <p>En colère que tu n'aies pas pris tes médicaments et que tu sois retombée malade. 
    En colère que tu te sois montrée si égoïste tout en me donnant l'impression que c'était moi, l'égoïste. 
    En colère que m'aies abandonnée, que tu m'aies laissée dans un coin comme un bagage trop encombrant. 
    En colère que tu ne m'aies pas assez aimée pour rester avec moi.</p>
    <p>En colère, aussi, parce j'ai tenu Mandy et Jon à distance, pour ne pas que tu te sentes trahie si jamais tu revenais. 
    Mais j'ai cessé d'attendre que tu reviennes. 
    Je ne suis même plus sûre d'en avoir envie. Enfin, si, mais... comme je disais, je suis en colère.</p>
</article>                                
…

Texte enrichi

Gras et italique

La mise en forme en gras et en italique devrait s’appuyer de manière privilégiée sur les moyens sémantiques offerts par HTML5, EPUB et CSS. Dès le niveau WCAG A, elle n’est en principe gérée sous forme de balises typographiques <i> et <b> qu’en dernier ressort, c’est-à-dire que si la sémantique est inconnue ou que si aucun marquage sémantique n’est disponible (cf. absence de balise HTML5 ou d’attributs @epub:type ou @role ARIA ou de classe sémantique de CSS). L’éditeur pourra fournir le marquage sémantique dans sa préparation de copie numérique. À défaut de fourniture de ces éléments, le prestataire se rabattra sur une simple modélisation <i> et <b>.

Pour rappel, les technologies d’assistance n’accèdent pas à la CSS. Le balisage HTML leur est donc indispensable.

Exemple de gestion de rendu italique

 *.xhtml …
<dt>Ils s’appuient sur la <cite>Déclaration des Droits de l’Homme et du Citoyen de 1789</cite>.</dt>
…
<p>Le résultat dépend de la valeur de <var>n</var>.</p>
…
<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
        <msup>
            <mi>n</mi>
            <mn>5</mn>
        </msup>
    </mrow>
</math>
<p>La réunion est reportée <em>sine die</em> par les ministres.</p>
…
<p>Avec l’arrivée des <i>nouvelles réglementations</i>, les industriels devront s’adapter.</p>
…

Exemple de gestion de rendu gras

 *.xhtml …
<dl>
    <dt>cohérence</dt>
    <dd>qualité d’un raisonnement ou d’un texte dans lequel on ne peut déceler de contradiction.</dd>
</dl>
…
<p>La seule véritable difficulté dans l’exercice est le <strong>recensement exhaustif</strong> des informations
…

Indice et exposant

Les balises <sub> et <sup> sont des marques à la fois sémantiques et typographiques. Elles peuvent donc être utilisées dans le texte courant, à condition toutefois de ne pas appartenir à une formule mathématique MathML.

Exemple

 *.xhtml …
<p>Dans la molécule d’eau (H<sub>2</sub>O)…</p>
<p>C’est la 3<sup>e</sub> opération…</p>
…
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
    <msup>
        <mi>u</mi>
        <mi>n</mi>
    </msup>
    <mo>=</mo>
    <msub>
        <mi>a</mi>
        <mi>r</mi>
    </msub>
</mrow>
</math>
…

Lignes de blanc

Dans le papier, on utilise des lignes de blanc pour gérer des espacements entre blocs plus importants que les autres. Fonctionnellement, on distingue deux cas de figure :

• espacement pour seule mise en page n’ayant aucune valeur informative ;
• espacement à valeur informative de séparateur (ayant le même rôle qu’un ornement typographique – voir § Images).

Pour être dans l’esprit du WCAG, les premiers devraient pouvoir être ignorés par les technologies d’assistance et les seconds restitués. Toutefois, ces cas d’usage ne font pas partie des critères formels de succès du WCAG, ni dans les précédentes versions 2.0 et 2.1, ni dans sa nouvelle version 2.2 (critère 1.4.12 Text spacing). Il n’y a donc pas encore d’obligation à le faire.

Voici donc seulement pour mémoire et anticipation, la répartition fonctionnelle des différentes implémentations de lignes de blanc pour chacun de ces deux rôles dans le cadre de l’accessibilité.

Exemple

 *.xhtml …
<h2>Titre A<h2>
<p>blabla blabla</p>
…
<h3>Titre B<h3>
<p class="firstParag">blabla blabla</p>
…
<p role="separator">&nbsp;</p>
…

Hyperliens sur du texte

Pour les hyperliens internes à la publication EPUB, la fonction du lien est toujours compréhensible au travers de son libellé : rubrique de sommaire, repère de navigation, numéro de folio dans la liste de pages, renvoi à une partie / un paragraphe de la publication.

Pour les hyperliens externes, la fonction du lien n’est pas toujours compréhensible au travers de son libellé (hors / en contexte immédiat). L’éditorial fournit deux / trois informations au prestataire dans sa préparation de copie numérique : l’URL externe ciblée par le lien, son libellé pour l’affichage de base, un libellé complémentaire au besoin, indiquant la fonction du lien.

Exemple

 *.xhtml…
<p>Voir <a href="Text/chap2.xhtml#sect1-1">Chapitre 2 § 1.1</a></p>
…
<p>Voir la <a href="https://www.w3.org/TR/epub-a11y-tech-11/">spécification du W3C EPUB Accessibility Techniques 1.1</a>.</p>
<p>C'est ce qu’a spécifié le <a href="https://www.w3.org/TR/epub-a11y-tech-11/" title="W3C - EPUB Accessibility Techniques 1.1">W3C</a>.</p>
…

Hyperliens sur du texte

Les hyperliens sur les images sont posés soit sur toute l’image, soit sur des zones de l’image (cf. image map). La fonction du lien est donnée par l’éditeur et intégrée par le prestataire :

• dans l’attribut @title du lien <a> sur toute l’image (en plus de la description courte de l’image) ;
• dans l’attribut @alt de la zone d’image <area>.

Exemple

 *.xhtml…
<a href="Text/biographie.xhtml#…" title="Biographie de Riitta Vivolin-Karén - ">
    <img src="../Images/Riitta_Vivolin-Kar_n.jpg" alt="Photo de Riitta Vivolin-Karén"/>
</a>
…
<img src="europe.png" usemap="#eur-map" alt="Carte de l’Europe"/>
<map name="eur-map">
    <area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="fra-info.xhtml" alt="France"/>
    <area shape="poly" coords="…" href="spa-info.xhtml" alt="Espagne"/>
    <area shape="poly" coords="…" href="ita-info.xhtml" alt="Italie"/>
…
</map>
…

Tableaux de présentation

Les tableaux de présentation sont des tableaux de mise en page dont les filets sont cachés par la CSS aux voyants. Pour être reconnus et traités comme tels par les technologies d’assistance, les tableaux de présentation ne doivent contenir aucun élément de contenu thead, th, caption et aucun attribut @scope, @headers. Pour être compréhensibles des non-voyants, le contenu des cellules doit pouvoir être linéarisé, car les technologies d’assistance parcourront et transcriront séquentiellement toutes les cellules (cf. <th> / <td>) de toutes les lignes (cf. <tr>) du tableau.

Tableaux de présentation

Le tableaux d’information sont des tableaux dont la structure est elle-même porteuse d’information (en plus du contenu des cellules), car son organisation met les cellules en relation : visuellement pour les voyants, logiquement pour les non-voyants.

On distingue tableaux simples et les tableaux complexes. Les tableaux simples doivent obligatoirement être structurés en HTML « textuel ». Les tableaux complexes pourront au choix être structurés de HTML « textuel » ou sous forme d’images informatives interopérables accompagnées d’un texte alternatif décrivant tout le contenu du tableau.

La mise en forme des tableaux textuels est gérée par une CSS responsive.

Rappel de gestion des cellules fusionnées en HTML :

• fusion de cellules sur plusieurs colonnes : @colspan=[nbCol] ;
• fusion de cellules sur plusieurs lignes : @rowspan=[nbLigne].

Exemple

 *.xhtml…
<table>
    <caption>Pondération des notes (en pourcentage)</caption>
    <thead>
        <tr>
            <th rowspan="2" id="h">Devoirs</th>
            <th colspan="3" id="e">Examens</th>
            <th colspan="3" id="p">Projets</th>
        </tr>
        <tr>
            <th id="e1" headers="e">1</th>
            <th id="e2" headers="e">2</th>
            <th id="ef" headers="e">Final</th>
            <th id="p1" headers="p">1</th>
            <th id="p2" headers="p">2</th>
            <th id="pf" headers="p">Final</th>
        </tr>
    </thead>
    <tr>
        <td headers="h">15%</td>
        <td headers="e e1">15%</td>
        <td headers="e e2">15%</td>
        <td headers="e ef">20%</td>
        <td headers="p p1">10%</td>
        <td headers="p p2">10%</td>
        <td headers="p pf">15%</td>
    </tr>
</table>
<p class="source">tiré du <cite>Guide pédagogique</cite></p>
…

Images

Même dans les EPUB dits « textuels », on peut trouver deux types d’images : des images décoratives et – contrairement aux attentes – des images informatives (ex : frises, cartes, images textuelles, etc.).

Les images décoratives doivent être signalées comme telles (via attribut @alt vide et un @role ARIA presentation) pour être totalement ignorées par les technologies d’assistance. Les images informatives doivent être accompagnées d’un texte alternatif qui retranscrit textuellement leur contenu visuel.

Charge à l’éditeur de fournir :

• des images accessibles (dont le choix de couleurs et de contraste de couleurs sera accessible) ;
• le type décoratif/informatif des images ;
• le texte alternatif des images informatives (cf. § Texte alternatif court / long).

Charge au compositeur d’intégrer en HTML les éléments fournis par l’éditeur.

Voir aussi § Formules mathématiques.

Couverture

L’image de couverture doit être décrite par un texte alternatif qui doit obligatoirement mentionner qu’il s’agit d’une couverture.

Dans le cas où l’image de couverture n’est pas suivie par une page de vrai titre, tout son contenu textuel doit être restitué dans l’attribut @alt.

Dans le cas où l’image de couverture est suivie par une page de vrai titre, l’attribut @alt pourra simplement valoir « image de couverture ». Ceci évitera aux technologies d’assistance de répéter inutilement deux fois la même information (contenue dans la page couverture + dans la page de vrai titre) et permettra une lecture plus rapide aux publics empêchés de lire. Ce n’est toutefois pas une obligation, notamment pour traiter tous les textes alternatifs des images de couverture de la même manière, qu’elles soient suivies ou non de pages de vrai titre.

Les éditeurs qui souhaitent aller au-delà pourront aussi compléter ce texte alternatif par une description du graphisme de la couverture. Attention, du coup ils ne pourront pas déléguer ce travail à leur compositeur dont ce n’est pas le métier.

Ornements typographiques

Les ornements typographiques (fleuron, cul-de-lampe, cabochon, etc.) sont traités avant tout comme des images décoratives. Ils n’ont alors pas de texte alternatif. L’attribut @alt est présent mais reste vide.

Si néanmoins un ornement présente un caractère informatif de séparateur, il peut lui être ajouté un @role ARIA spécifique de valeur "separator" ainsi qu’un texte alternatif, comme par exemple "fin de bloc", car il signale alors la fin d’un élément et le début d’un autre.

Émoticônes

Pour les émoticônes, on privilégiera leur encodage utf-8 si la police utilisée dans le texte courant offre un glyphe pour ce code caractère. À défaut, on utilisera une image informative avec description de l’émoticône. Pour le texte descriptif de l’image, repartir du texte anglais de la colonne « CLDR Short Name » de la table Unicode et le traduire avec google translate, traduction suffisante pour le service à rendre.

Ex Google translate : grinning face → visage souriant

Texte alternatif court / long

Pour les images informatives, la fourniture d’un texte alternatif court est obligatoire. La fourniture d’un texte alternatif long est facultative. Elle n’est requise que dans deux cas de figure :

• impossibilité de restituer toute l’information de manière concise comme l’exige fonctionnellement le texte court et de tenir dans la limite des 145 caractères imposées par certaines technologies d’assistance ;
• inadéquation du texte brut au kilomètre pour structurer un contenu textuel alternatif, de manière à garantir la prosodie de la synthèse vocale (qui a besoin d’un découpage en phrases/paragraphes pour fonctionner correctement).

Le texte alternatif court est un texte brut à placer en valeur d’attribut @alt sur . Il existe différentes manières de gérer le texte alternatif long, plus ou moins complexes et interopérables. Voici les deux manières que nous retenons :

Solution 1 : texte long défini dans le même fichier XHTML que l’image

Depuis l’image <img>, référence croisée via l’attribut @aria-describedby à un élément bloc du même fichier XHTML (<div>, <article>, <table>, <dl>) qui contient tout le texte long et qui porte un identifiant HTML pour pouvoir y faire référence croisée depuis l’image.

Solution 2 : texte long défini dans un autre fichier XHTML que l’image

Sous l’image <img>, hyperlien vers un autre fichier XHTML qui contient le texte long de cette image

Dans les deux cas, le texte long peut être montré / caché aux voyants, au choix de l’éditeur. En effet, après ce texte a été défini pour les non-voyants, l’éditeur décide s’il veut en faire profiter les voyants ou non. Par défaut, afin de préserver l’homothétie entre papier et EPUB nativement accessible, le texte long et/ou l’hyperlien vers le texte long sera caché. Pour le cacher, il suffit d’appliquer la propriété de style visibility:hidden sur le texte long (où qu’il soit) ou l’hyperlien vers le texte long.

Voir aussi § Inclusions de texte.
Voir aussi la traduction française du guide Diagram de « description » d’image.

Exemples

 *.xhtml…
<!-- IMAGES INFORMATIVES -->
<!-- Texte alternatif court -->
<img src="../Images/moleculeAcideSulfurique.jpg" alt="molécule d'acide sulfurique"/>
<!— Avec texte alternatif long -->
<!-- Solution 1 :  texte long dans le même fichier -->
<img src="../Images/camembert.jpg" alt="camembert sur l’usage de liseuses" aria-describedby="camembert1"/>
…
<div id="camembert1" style="visibility:hidden">
    <p>Le camembert est découpé en 4 tranches :</p>
    <ol>
        <li>45% de quadragénaires (en rouge),</li>
        <li>28% de trentenaires (en bleu),</li>
        <li>22% de quinquagénaires et plus (en vert),</li>
        <li>5% de moins de 30 ans (en jaune).</li>
    </ol>
</div>
<!-- Solution 2 : texte long dans un autre fichier -->
<img src="../Images/SMS.jpg" alt="échange de SMS entre Suzanne et Léon"/>
<a id="SMS1-link" href="transcriptSMS1.xhtml">Retranscription textuelle</a>
…
<!-- IMAGES DÉCORATIVES -->
<img src="../Images/fondPage.jpg" alt="" role="presentation" />
…
<img src="../Images/culLampe.jpg" alt="" role="presentation" />
    …

Architecture d’ensemble

Voici le schéma d’architecture dans lequel s’inscrivent la production et la diffusion d’EPUB NAC, en relation avec les référentiels d’accessibilité. Cette relation est tracée dans les métadonnées.

Les métadonnées de l’OPF sont des métadonnées internes à l’EPUB, très différentes syntaxiquement des métadonnées ONIX externes à l’EPUB. Les métadonnées d’accessibilité au format OPF seront soit communiquées au prestataire par la fabrication pour intégration dans l’EPUB, soit créées par le prestataire en cohérence avec la commande et les contenus qu’il a reçus.

Métadonnées dédiées à l’accessibilité

Ce qui suit relève surtout de la pédagogie sur les métadonnées d’accessibilité. Le prestataire n’aura pas à les produire lui-même. Si tel n’était pas le cas, le prestataire devra immédiatement alerter le fabricant et lui demander la fourniture de ces métadonnées par la maison d’édition.

Relation aux référentiels d’accessibilité

Certaines métadonnées informent sur la relation qu’entretient l’EPUB avec les référentiels d’accessibilité : quel référentiel, quel niveau d’accessibilité et quel organisme certificateur.

La maison d’édition peut faire le choix de s’auto-certifier accessible ou au contraire d’attendre la certification par un organisme certificateur tiers. En l’absence d’un organisme certificateur opérationnel, seul le lien vers le niveau WCAG visé par l’EPUB sera posé. Il permettra au moins l’identification endogène des EPUB NAC produits.

Exemples

 content.opf<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="https://idpf.org/2007/opf">
    …
    <link rel="dcterms:conformsTo" href="https://idpf.org/epub/a11y/accessibility-20170105.html#wcag-aa"/>
    …
    <meta property="a11y:certifiedBy">Braillenet</meta>
…
                                

Caractéristiques détaillées d’accessibilité

D’autres métadonnées décrivent les caractéristiques détaillées d’accessibilité :

• sous forme résumée;
• en termes d’usage;
• en termes de contenu éditorial;
• en termes de politique de protection numérique.

Voici comment s’expriment ces propriétés.

Et voici les caractéristiques d’accessibilité aux valeurs normalisées communes à tous les EPUB textes nativement accessibles.

On pourra ajouter
<meta property="schema:accessibilityFeature">MathML</meta>
sur les EPUB qui contiennent des formules mathématiques modélisées en MathML. Ainsi que
<meta property="schema:accessibilityFeature">index</meta>
pour les EPUB qui contiennent un index de fin de livre.

Autant ne pas préciser la politique de protection DANS l’EPUB afin de pouvoir en changer le cas échéant, sans devoir modifier les métadonnées de l’EPUB.

Exemple

 content.opf…
<meta property="schema:accessibilitySummary">La publication respecte le niveau WCAG 2.0 AA.</meta>
<meta property="schema:accessMode">textual</meta>
<meta property="schema:accessMode">visual</meta>
<meta property="schema:accessMode">auditory</meta>
<meta property="schema:accessModeSufficient">textual</meta>
<meta property="schema:accessibilityControl">fullKeyboardControl</meta>
<meta property="schema:accessibilityControl">fullMouseControl</meta>
<meta property="schema:accessibilityControl">fullTouchControl</meta>
<meta property="schema:accessibilityHazard">noFlashingHazard</meta>
<meta property="schema:accessibilityHazard">noMotionSimulationHazard</meta>
<meta property="schema:accessibilityHazard">noSoundHazard</meta>
<meta property="schema:accessibilityFeature">tableOfContents</meta>
<meta property="schema:accessibilityFeature">index</meta>
<meta property="schema:accessibilityFeature">printPageNumbers</meta>
<meta property="schema:accessibilityFeature">alternativeText</meta>
<meta property="schema:accessibilityFeature">structuralNavigation</meta>
<meta property="schema:accessibilityFeature">readingOrder</meta>
<meta property="schema:accessibilityFeature">MathML</meta>
<meta property="schema:accessibilityFeature">unlocked</meta>
<meta property="schema:accessibilityAPI">ARIA</meta>
…

Métadonnées bibliographiques

Publication papier d’origine

Dans le cas où l’EPUB est dérivé du papier, on indique l’EAN13 du livre papier dans >dc:source<. Si le prestataire de l’EPUB n’est pas le même que celui du papier, le fabricant communiquera au prestataire EPUB l’EAN13 du papier à intégrer. À défaut d’EAN13, on pourra sourcer l’EPUB par le titre du papier. Dans le cas où l’EPUB est un produit original sans équivalent papier, aucune source ne sera précisée.

Lorsque le foliotage du papier est préservé dans l’EPUB, on l’indique grâce à la métadonnée >meta property="schema:accessibilityFeature"<printPageNumbers>/meta<. Attention, dans ce cas, l’identifiant de la source papier doit être le bon, car il peut exister plusieurs versions papier d’une même œuvre (version grand format versus version poche typiquement) dont les foliotages sont différents. L’identifiant de la source papier doit être celui qui a servi de référence pour la pose de sauts de page dans l’EPUB (car pas systématiquement le grand format, suivant le natif d’où l’on repart).

Rappel : la préservation du foliotage papier dans l’EPUB n’est pas une obligation, même en EPUB NAC. Seule la fourniture d’une liste de numéros de pages (papier OU numériques l’est). Voir § Sauts de de pages.

Exemples

 content.opf<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
    <meta property="schema:accessibilityFeature">printPageNumbers</meta>
    …
    <dc:source>9782092555354</dc:source>
    …