EPUB sémantique, rôles ARIA, & métadonnées

English version


Introduction

La plupart des créateurs qui s’intéressent aux publications accessibles connaissent le World Wide Web Consortium les “Web Content Accessibility Guidelines“, (les WCAG du W3C). Bien que les lignes directrices soient développées pour le contenu Web, elles s’appliquent également à d’autres formes de contenu numérique – comme les livres électroniques – et fournissent la norme la plus élémentaire à laquelle les livres électroniques devraient se conformer. Dans sa forme la plus simple, WCAG définit quatre exigences pour tout le contenu :

  1. Perceptible : les utilisateurs-trices doivent pouvoir lire toutes les informations, y compris tout contenu présenté visuellement.
  2. Utilisable : les lecteurs et lectrices doivent être capables de naviguer et de trouver du contenu, ce qui est accompli grâce à des balises sémantiques soigneusement choisies.
  3. Compréhensible : le contenu doit être lisible et compréhensible, les livres électroniques doivent donc fonctionner de manière similaire sur une variété de plateformes, la langue du texte doit être spécifiée.
  4. Robuste : le contenu doit être interprété de manière fiable par les liseuses numériques et les technologies d’assistance, de sorte que les balises sémantiques et les rôles ARIA doivent être utilisés pour définir avec précision ses éléments.

Bien que les WCAG ne soient guère la référence absolue en ce qui concerne la conformité de l’accessibilité des livres électroniques, cela nous donne un bon tremplin dans l’arène.

Tout d’abord, nous allons examiner quelques balises sémantiques que vous pouvez utiliser pour affiner vos styles, afin de satisfaire le principe <<opérable>> WCAG. Ensuite, nous plongerons dans les rôles ARIA, pour rendre votre contenu plus robuste. Nous terminerons avec un aperçu des métadonnées d’accessibilité afin que nous puissions promouvoir votre contenu auprès des lecteurs et lectrices qui bénéficieront le plus de cette nouvelle accessibilité.

Styles – typographie et mise en page

La présentation typographique augmente considérablement l’attrait visuel de votre livre, lui donnant un aspect fini et bien poli. Peut-être plus important encore, les styles sont utilisés pour séparer les blocs de texte du récit principal. Que ce soit le nom d’un magazine en italique ou un titre pour introduire le chapitre trois, les styles que vous choisissez aideront les lecteurs à comprendre et à suivre le contenu.

Les lecteurs et lectrices ayant des difficultés de lecture dépendent également des styles. Mais au lieu de prendre des repères à partir de lettres inclinées ou en caractères gras, la technologie d’assistance détermine les changements de contenu en fonction de la balise qui produit l’effet visuel. Sur une scène accessible, la balise du style est donc tout aussi importante que son apparence visuelle.

La première étape pour styliser le texte de manière accessible consiste à choisir autant que possible des balises dans la liste ci-dessous. Attachez ces balises aux styles de votre composition et laissez-les faire le gros du travail de stylisation de votre contenu. Chaque style de votre livre qui correspond à l’une de ces catégories doit être réalisé en utilisant l’une de ces balises. S’il s’agit d’un en-tête, étiquetez-le avec <h1> ou quelque chose de similaire. S’il s’agit d’une citation en bloc, assurez-vous qu’elle est étiquetée avec <blockquote>. Ces simples balises sont toutes les technologies d’assistance nécessaires pour informer les lecteurs et lectrices non traditionnels des changements importants dans le style de votre contenu.

Sections

Les différentes parties de votre livre doivent habiter dans leurs propres balises de section. Cela donne une séparation et une structure à votre contenu. De plus, chaque balise de section peut être qualifiée avec la sémantique epub:type et les rôles ARIA pour indiquer aux liseuses numériques et aux technologies d’assistance quel est le contenu. Veuillez voir la section « Sections » dans le document sur les rôles ARIA pour un exemple de cela.

La balise de la section devrait être appliquée à tous les contenus de texte qui contiennent des gros blocs de texte (comme un chapitre ou une section).

Exemple

<section> [il s’agit de la balise d’ouverture de la section « Première partie»] <h1>Première partie: les premières années</h1>

<section>[ceci est la balise de section d’ouverture de section d’ouverture pour « Chapitre un »]
<h2>Chapitre 1: quand je suis né</h2>

</section>[ceci est la balise de section de fermeture pour « Chapitre un »]
<section>[ceci est la balise de section d’ouverture pour « Chapitre deux »]
<h2> Deuxième Chapitre : école maternelle</h2

</section>[ceci est la balise de fermeture de la section « Chapitre deux »]
</section>[ceci est la balise de fermeture de la section « Première partie »]

Dans cet exemple, le livre comporte des parties et des chapitres. La première partie, ainsi que chacun des deux chapitres, se trouve dans leur propre ensemble de balises de section.

Les en-têtes

Comme le montre l’exemple ci-dessus, chaque section de votre livre doit être introduite avec un en-tête. Cela permet aux lecteurs d’écran de faire une pause entre les sections et offre une autre façon pour les lecteurs et lectrices de naviguer dans votre livre.

Les titres de section doivent être étiquetés avec le numéro d’en-tête approprié. Les sections de niveau supérieur doivent être étiquetées avec <h1>, les sections enfants avec <h2>, etc.

Exemple

<section>
<h1> Première partie: les premières années </h1>
<p> Bienvenue dans le premier chapitre. </p>

</section>

Bold and Italic (caractère gras ou en italique)

Les balises traditionnelles en gras et en italique (<b> et <i>) sont ignorées par les lecteurs d’écran, elles ne doivent donc être utilisées que pour styliser visuellement des mots et des phrases.

Les caractères gras peuvent être utilisés pour faire ressortir le texte, par exemple, il peut être utilisé pour indiquer des termes techniques ou des mots clés. L’italique est un bon choix pour les noms importants et les titres de magazines. Comme ces exemples n’ont pas besoin d’être soulignés vocalement, ils peuvent être étiquetés avec <b> ou <i>.

Exemple

 Dans ces deux exemples, il n’est pas nécessaire de souligner vocalement le texte stylisé :

Le <i> octobre rouge </i> s’est déplacé de son propre chef vers le canal principal du fjord de Kola.

La plante <b> oxalis triangularis </b> est communément appelée faux trèfle.

Emphasis and Strong (Accentuation et force)

Les balises d’accentualisation et force (<em>) et <strong>) indiquent des mots qui devraient être accentués vocalement d’une manière ou d’une autre.

L’accent « italique » doit être obtenu avec la balise <em> et l’accent « gras » avec <strong)>. N’utilisez jamais ces balises sur des mots qui ne nécessitent qu’un style visuel (par exemple, des titres de livres, de magazines, etc.). Utilisez le gras <b> ou l’italique <i>pour de tels passages.

Exemple

Dans ces deux exemples, le texte stylisé doit être dit avec un accent vocal afin de transmettre avec précision le sens aux lecteurs et lectrices.

Je <em>vous ai dit</em> que la porte était verte.

Le signe qui était tombé avait un avertissement sévère : <strong>N’entrez pas!</strong>.

Figures (Illustrations)

Les images avec légendes sont appelées sémantiquement des figures. La balise <figures> empêche le contenu de perturber le récit principal et garantit que la légende est associée à l’image et à sa description textuelle.

Chaque figure de votre livre doit être placée dans la balise <figure>. De plus, la légende doit être enveloppée dans des balises <figcaption>.

Exemple

<figure>
<img> src=”figure1.jpg” alt=”deux hommes en costume se serrent la main”>
<figcaption><p>Le premier ministre du Canada Justin Trudeau et l’ancien président américain Barack Obama se serrent la main à la fin d’une réunion bilatérale lors du sommet de la coopération économique Asie-Pacifique du 20 novembre 2016 à Lima, au Pérou. </p></figcaption> </figure>

Barres latérales

Les barres latérales peuvent fournir des informations anecdotiques qui sont vaguement liées à la section principale. S’ils ne sont pas codés correctement, ces petits morceaux peuvent être à la fois déroutants et distrayants pour les lectrices et lecteurs non traditionnels.

Les barres latérales doivent être enveloppées dans la balise <aside>.

Exemple

<aside>
<p> Le module de commande 107 a été construit principalement par les Nord-Américains. Nommé Columbia par l’équipage, le module de commande a été conçu avec plus de 2 millions de pièces; près de 15 miles de fil; un panneau de commande avec 24 instruments, 566 interrupteurs, 40 indicateurs et 71 lampes. </p>
</aside>

Citations

L’inclusion d’un passage d’une autre œuvre dans votre livre s’appelle une citation. Les citations – et uniquement les citations – doivent être placées dans la balise <cite>. Utilisez cette balise que pour styliser une citation qui inclut la source.

Remarque : Si la citation d’un passage ne contient qu’un nom (par exemple, Amélia Earhart dans l’exemple de citations ci-dessous), il n’y a pas de balise spécifique pour elle.

Exemple

<blockquote>
<p> Tout ce que nous devons décider, c’est quoi faire avec le temps qui nous est imparti. </p> <cite> La fraternité de l’anneau, J.R.R. Tolkien </cite> <blockquote>

Block Quotes

Une citation en bloc est un bloc d’une ou plusieurs phrases attribuées à un individu ou une organisation particulière. Ce style de sémantique est largement pris en charge et avertit les lecteurs d’écran qu’un auteur particulier est cité dans le paragraphe à suivre.

Les passages de citations doivent être placés dans la balise <blockquote>

Exemple

<blockquote>
<p>Sachez que je suis très consciente des dangers. Je veux le faire parce que je veux le faire. Les femmes doivent essayer de faire des choses comme les hommes l’ont fait. Lorsqu’ils échouent, leur échec devient alors un défi pour les autres – Amélia Earhart </p>
<blockquote>

Les Rôles ARIA

Les rôles ARIA sont une caractéristique clé D’EPUB 3, permettant à différents types de contenu d’être identifiés sans ambiguïté à la technologie d’assistance. Les rôles ARIA peuvent clarifier et affiner les éléments sémantiques de votre livre, donnant aux lecteurs ayant des difficultés de lecture, une bien meilleure idée du contenu du livre électronique. Leur inclusion permettra souvent de supprimer les violations du rapport Ace (un vérificateur d’accessibilité EPUB développé par le consortium DAISY), ce qui rapprochera votre publication des normes d’accessibilité. Tout le monde est gagnant.

Autrement dit, les systèmes de lecture utilisent l’attribut epub:type pour offrir des fonctionnalités et des comportements spéciaux.

L’attribut rôle, en revanche, expose les informations à la technologie d’assistance. Il est donc recommandé d’inclure à la fois la sémantique epub:type et les rôles ARIA dans toutes les balises qui utilisent l’une ou l’autre. Tant qu’ils sont appliqués correctement, vous ne pouvez jamais avoir trop de ces identifiants sans ambiguïté.

Les rôles ARIA sont plus restreints là où ils peuvent être utilisés que dans la sémantique structurelle d’EPUB. Bien qu’il existe un certain nombre d’éléments qui acceptent n’importe quel rôle, il faut veiller à ce que les rôles ne soient utilisés que lorsqu’ils auront un sens pour les utilisateurs de technologie d’assistance. La liste ci-dessous devrait vous aider à choisir un rôle qui identifie de manière claire des types particuliers de contenu.

Sections

Les sections font référence à de gros blocs de texte. Ceux-ci ont généralement plusieurs paragraphes, comme un chapitre, ou englobent une page entière, par exemple une dédicace ou d’autres types de textes préliminaires ou complémentaires. Alors, bien qu’ils offrent une sémantique précieuse aux lecteurs, leur signification peut parfois être difficile à deviner. Cependant, lorsque vous appliquez une sémantique structurelle EPUB et un rôle ARIA à la balise, sa signification devient limpide pour les liseuses et pour les gens qui les utilisent.

Le tableau ci-dessous montre les différents types de contenu qui peuvent être identifiés dans une balise de section. Pour une liste complète avec des définitions, vous pouvez lire la documentation officielle dans ce lien.

Epub:typeRole
epigraphe doc-epigraph
dedication doc-dedication
foreword doc-foreword
Prologue doc-prologue
introduction doc-introduction
notice doc-notice
preface doc-preface
part doc-part
chapter doc-chapter
conclusion doc-conclusion
epilogue doc-epilogue
afterword doc-afterword
acknowledgments doc-acknowledgments
appendix doc-appendix
qna doc-qna
bibliography doc-bibliography
endnotes doc-endnotes
glossary doc-glossary

Exemple

<section epub:type =”chapitre” role =”doc-chapter”>
<h1>le garçon qui a survécu </h1>
<p> M. et Mme Dursley…</p>
</section>

Fichier de navigation

Si votre fichier de navigation est inclus dans l’ordre de lecture, les conteneurs de navigation doivent avoir un rôle ARIA qui leur est appliqué.

Le tableau ci-dessous présente les listes de navigation identifiables.

epub:typerole
toc doc-toc
page-list doc-pagelist

Example

<nav epub:type=”toc” role=”doc-toc”>
<h1>Table de matières</h1>
<ol>
<li><a href=”c1.xhtml”>Le garçon qui a survécu</a></li>

</ol>
</nav>

Page de couverture

Actuellement, il n’y a pas de rôle ARIA pour la section de couverture d’un livre. Il est considéré comme une meilleure pratique d’appliquer une balise sémantique de couverture à la page., mais l’attribut d’un rôle ne peut être inclus. Vous pouvez cependant appliquer une étiquette ARIA à la section et nous le montrerons dans notre exemple.

Le tableau ci-dessous montre les attributs offerts pour la page de couverture :

Élementepub:typerole
Le section Cover (non attribué)
l’image cover-image doc-cover

Exemple

<section epub:type “cover” aria-label= “Cover”>
<img src= “cover.jpg” alt= “Un garçon blanc avec une cicatrice en forme d’éclair…” epub:type= “cover-image” role= “doc-cover”/>
</section>

Saut de page

Les numéros de page peuvent être la meilleure illustration de la puissance des rôles ARIA à ce jour. Comme il n’y a pas de code sémantique pour un saut de page, la technologie d’assistance s’appuie sur les rôles et étiquettes ARIA pour informer lorsque le récit se déplace vers une nouvelle page et cette technologie détermine ce numéro de page.

Les numéros de page sont généralement marqués avec la balise SPAN, bien qu’ils puissent apparaître dans à peu près n’importe quoi.

Quoi que vous choisissiez pour héberger vos sauts de page, assurez-vous qu’ils contiennent ces trois éléments :

  1. Un epub : type sémantique de saut de page
  2. Un ARIA rôle of doc-saut de page
  3. Une étiquette ARIA avec un nouveau numéro de page

Exemple

<span epub:type= “pagebreak” id= “page48″ role=”doc-pagebreak” aria-label= “48”/>

Remarques

Que votre contenu utilise des notes de bas de page ou des notes en fin de texte, la disposition générale est la même. Un petit numéro apparaît à côté d’une phrase importante dans le texte. Lorsque vous cliquez dessus, ce lien amène le lecteur ou la lectrice à une liste de notes, celle applicable étant mise en évidence. À la fin de la note se trouve un autre lien, qui revient à la place du lecteur dans le livre. Voici comment appliquer une signification sémantique  à chacune de ces composantes :

Componentepub:typeRole
lien vers la note noteref: doc-noteref
texte de la note de bas de page footnote doc-footnote
texte de la note de fin endnote: doc-endnote
lien vers le texte referrer: doc-backlink

Exemple

Note en fin de texte

<section epub-type=”chapter” role= “doc-chapter”>
<h1>1. La plus belle histoire jamais racontée </h1>
<p> La théorie générale de la relativité d’Einstein, présentée en 1916, nous permet de comprendre la gravité, dans laquelle la présence de matière et d’énergie courbe le tissu de l’espace et du temps qui l’entoure.<a href= “#fn1” id = “fnref1” epub:type = “noteref” role = “doc-noteref” >1</a></p>

</section>

<section epub:type=”endnotes” role=”doc-endnotes”>
<ol>
<li id=”fn1″ epub:type=”endnote” role=”doc-endnote”><p>L’astrophysique pour les gens pressés. Neil Degrasse Tyson, W. W. Norton et compagnie, 2017. <a href=”#fnref1″ epub:type=”referrer” role=”doc-backlink”>Back to Text</a></p></li>
</ol>
</section>

Note en bas de page

<p>L’annonceur radio a appelé “brioches à la canelle” <a href=”#fn01″ epub:type=”noteref” role=”doc-noteref”>1</a> dans le microphone.</p>
<aside id=”fn01″ epub:type=”footnote” role=”doc-footnote”>
<p>De nombreux amateurs d’audio utilisent l’expression “brioches à la cannelle” pour vérifier la qualité d’un enregistrement .</p>
</aside>

Barres latérales

Il existe actuellement un nombre limité de rôles spécifiquement développés pour les barres latérales. Cependant, voici une courte liste, dans l’espoir qu’elle puisse être élargie à l’avenir.

epub:typerole
tip doc-tip

Exemple

<aside epub:type=”tip” role=”doc-tip”>
<p>Si votre eau de vaisselle commence à mousser lorsque vous ajoutez du savon, vous utilisez peut-être trop de détergent .</p>
</aside>

L’accessibilité des métadonnées

Maintenant que votre livre électronique est encore plus accessible, il est temps de le promouvoir auprès d’un public plus large. C’est une bonne nouvelle pour une publication accessible. Vous avez fait tout le travail acharné, et maintenant il est temps de faire du marketing gratuit.

Les métadonnées sont utilisées pour informer les autres de votre publication. Les métadonnées internes se trouvent à l’intérieur de votre EPUB, et il y a une section pour spécifier les fonctionnalités d’accessibilité qu’il contient. Non seulement cela indique aux lecteurs non traditionnels à quoi s’attendre de l’expérience de lecture, mais cela contribue à promouvoir la publication auprès d’un public plus large.

Vous pouvez ajouter des métadonnées d’accessibilité en utilisant l’outil Ace de DAISY. Notez que les métadonnées externes – quelque chose comme un enregistrement ONIX – ont également des balises d’accessibilité, mais nous nous concentrons sur les composants de votre EPUB lui-même pour l’instant.

Quatre informations clés sont utilisées pour indiquer l’accessibilité d’une publication. Les voici : Summary, Mode, ModeSufficient et Feature. C’est vraiment le fruit de la publication accessible, car chaque balise négligée va générer une violation sur le rapport Ace.

Le tableau suivant illustre l’objectif des balises courantes d’accessibilité. Toutes les balises, à l’exception du résumé, sont lisibles par machine et doivent être remplies des champs spécifiques.

TagDescription
SummaryUne liste lisible par l’humain des fonctionnalités d’accessibilité
accessModeSpécifie comment la publication peut être lue
accessModeSufficient Indique des modes de lecture suffisants pour consommer le contenu
accessibilityFeatureUne liste de fonctionnalités offertes dans tout le contenu.

Vous voudrez sûrement rédiger votre propre résumé de texte pour l’adapter à votre style et refléter avec précision les fonctionnalités de votre contenu. Cependant, à moins que votre contenu ne contienne que du texte ou des images, nous pouvez indiquer en toute sécurité qu’il est accessible textuellement et visuellement, et qu’il peut être suffisamment compris par ces modes. Il y a plus d’information à ce sujet dans la section ‘ Explication ’ en suivant notre exemple.

La dernière pièce du casse-tête (puzzle) spécifie les fonctionnalités d’accessibilité de votre libre électronique. Il existe plusieurs options ici, et chacune est spécifiée avec une autre ligne de métadonnées. N’oubliez pas d’inclure uniquement des balises qui indiquent les fonctionnalités réellement présentes dans votre livre. Voici une liste des fonctionnalités d’accessibilité les plus courantes.

FeatureDescription
alternativeText Toutes les images importantes incluent une description alternative du texte
displayTransformability Les utilisateurs peuvent modifier l’affichage du contenu textuel tel que la police et la taille
highContrastDisplay Il existe au moins un rapport de contraste de 7 :1 entre le texte de premier plan et l’arrière-plan
index La publication contient un index du contenu, tel qu’un index thématique
longDescription Toutes les images complexes incluent une description détaillée de leur objectif
none La publication ne comprend aucune fonctionnalité d’accessibilité
pageNavigation La publication comprend une liste structurée de pages
printPageNumbers Les emplacements de sauts de page d’impression statiques sont inclus dans le texte
readingOrder Il y a un nombre de lecture logique dans le texte
structuralNavigation Tous les en-têtes sont correctement balisés
synchronizedAudioText La narration audio est offerte et se synchronise avec le texte
tableOfContents Un fichier de navigation complet est inclus

Il convient de rappeler que rendre les libres plus accessibles présente des avantages bien au-delà des besoins d’un lecteur particulier. Les publications accessibles englobent un segment beaucoup plus large de la population et, lorsqu’elles sont produites, les métadonnées d’accessibilité aident à promouvoir le titre auprès de ceux qui recherchent un contenu qu’ils peuvent facilement lire. Lorsque le titre sera ingéré dans le système de bibliothèque et les librairies en ligne, il sera visible comme une publication accessible à tous. L’analyse de rentabilité ici est claire. En faisant ce qu’il faut pour augmenter l’accessibilité de vos livres, vous augmentez automatiquement le marché pour ceux-ci en spécifiant les métadonnées ci-dessus. Modifiez au besoin, copiez et collez dans tout le contenu numérique applicable et ne regrettez rien.

Exemple

<meta property=‘schema:accessibilitySummary’>Cette publication satisfait aux exigences de la spécification d’accessibilité EPUB conformément aux WCAG 2.0 niveau AA. Le contenu est convivial pour les lecteurs d’écran. Les images sont décrites et les sections sont introduites avec des en-têtes correctement en cascade. </meta>
<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”>structuralNavigation</meta>
<meta property=”schema:accessibilityFeature”>alternativeText</meta>

Explication

Les métadonnées ci-dessus décrivent un livre électronique dont le texte est entièrement exposé aux lecteurs d’écran. Toutes les images sont décrites avec un texte alternatif et des titres ont été utilisés tout au long pour introduire des sections de manière hiérarchique.

Vous vous demandez peut-être pourquoi nous indiquons que la publication peut être comprise à travers une combinaison de modes textuels et visuels, puis ensuite préciser que l’accès textuel est également suffisant. C’est parce que les images dans ce livre fictif sont merveilleusement décrites, les rendant accessibles aux lecteurs et lectrices aveugles (textuels) et voyants (visuels). Les lectrices et lecteurs visuels peuvent visualiser l’image et les lectrices et lecteurs textuels peuvent parcourir le texte alternatif. Il s’agit de deux modes différents de consommation de contenu, mais les deux sont entièrement pris en charge dans ce livre électronique.


Retour aux Resources for Publishers