Produire des documents accessibles : Différence entre versions

De Ensiwiki
Aller à : navigation, rechercher
(Les listings dans le texte)
(Les listings dans le texte)
 
(15 révisions intermédiaires par un autre utilisateur non affichées)
Ligne 7 : Ligne 7 :
 
* Tous les systèmes d'exploitations modernes disposent d'un outil loupe qui permet de grossir certaines parties de l'écran. Cet outil aide les malvoyants, mais n'est d'aucune utilité pour les non-voyants ou les malvoyants les plus sévères.
 
* Tous les systèmes d'exploitations modernes disposent d'un outil loupe qui permet de grossir certaines parties de l'écran. Cet outil aide les malvoyants, mais n'est d'aucune utilité pour les non-voyants ou les malvoyants les plus sévères.
  
* Les liseuses d'écran audio qui permettent d'avoir un retour audio sur ce qui est affiché à l'écran. Associée à des raccourcis claviers efficaces, cet outil permet de parcourir rapidement un texte et de se déplacer dans une application.
+
* Les liseuses d'écran audio qui permettent d'avoir un retour audio sur ce qui est affiché à l'écran. Associée à des raccourcis claviers efficaces, cet outil permet de parcourir rapidement un texte et de se déplacer dans une application. Par exemple, [NVDA nvda] sous Windows ou orca sous Linux.
  
 
* Les liseuses Braille, qui permettent de parcourir une ligne de texte en détails.
 
* Les liseuses Braille, qui permettent de parcourir une ligne de texte en détails.
Ligne 22 : Ligne 22 :
  
 
'''Niveau 2''' : Le texte est lisible et bien balisé : la structure en titres/sous-titre, ... est visible et exploitable par une liseuse d'écran. Par exemple, le corps de cette page est structuré avec des balises <nowiki><h2></nowiki> qui permettent de se déplacer de titre en titre.
 
'''Niveau 2''' : Le texte est lisible et bien balisé : la structure en titres/sous-titre, ... est visible et exploitable par une liseuse d'écran. Par exemple, le corps de cette page est structuré avec des balises <nowiki><h2></nowiki> qui permettent de se déplacer de titre en titre.
 +
 +
== Intérêt de l'accessibilité pour tout le monde ==
 +
 +
Les bonnes pratiques d'accessibilité bénéficient à tout le monde. Par exemple :
 +
 +
* Un document qui n'est pas au niveau 0 ci-dessus est lisible à l'œil, mais on ne peut pas copier-coller de texte depuis ce document, les moteurs de recherche ne peuvent pas indexer son contenu, on ne peut pas faire de recherche de texte dedans, ...
 +
 +
* Le niveau 2 ci-dessus permet aussi de naviguer efficacement dans la table des matières. Par exemple pour un document PDF, la plupart des lecteurs PDF proposent un affichage arborescent de la table des matières dans une barre latérale.
 +
 +
Même si tous vos lecteurs ont tous des yeux de lynx, la suite de ce document devrait donc vous intéresser !
  
 
== Les outils pour produire des documents accessibles ==
 
== Les outils pour produire des documents accessibles ==
Ligne 40 : Ligne 50 :
  
 
Les fichiers PDF produits par Word sont de bonne qualité en terme d'accessibilité, à condition que le document soit bien structuré au départ : utilisez les styles (et/ou le monde plan) pour marquer les titres. Ne vous contentez pas de mettre une ligne en grosse police et en gras pour matérialiser le fait que c'est un titre !
 
Les fichiers PDF produits par Word sont de bonne qualité en terme d'accessibilité, à condition que le document soit bien structuré au départ : utilisez les styles (et/ou le monde plan) pour marquer les titres. Ne vous contentez pas de mettre une ligne en grosse police et en gras pour matérialiser le fait que c'est un titre !
 +
 +
=== LibreOffice ===
 +
 +
Comme avec MS Word, il est important que le document utilise les styles pour marquer les titres. Si vous avez un doute, ouvrez le navigateur (F5) et regardez si vous voyez correctement la structure. Voici un exemple de ce que le navigateur peut afficher :
 +
 +
[[Image:Accessibilite-oowriter.png|alt=Navigateur dans Libreoffice Writer]]
 +
 +
Attention, par défaut, l'exportation PDF ne génère pas les balises d'accessibilités ! Il faut les activer explicitement : menu « File », « Export PDF » (pas le bouton d'accès rapide, qui ne donne pas accès aux options), puis cocher : « tagged PDF » et « Export bookmarks » :
 +
 +
[[Image:Accessibilite-oowriter-pdf.png|alt=Options d'accessibilité à l'export PDF dans LibreOffice]]
 +
 +
Comme le montre la copie d'écran, activer l'option « PDF/A-1a » active l'option « tagged PDF » : PDF/A-1 est un sous-ensemble de la norme PDF orienté fiabilité et stockage à long terme, et le deuxième « a » signifie « accessibility ».
  
 
=== LaTeX ===
 
=== LaTeX ===
Ligne 46 : Ligne 68 :
  
 
Quelques pièges, et les solutions associées :
 
Quelques pièges, et les solutions associées :
 +
 +
==== Table des matières ====
 +
 +
Pour avoir une table des matières navigable dans un lecteur PDF, il suffit d'ajouter ceci au préambule :
 +
 +
\usepackage{hyperref}
  
 
==== Les accents ====
 
==== Les accents ====
  
Par défaut, un caractère accentué comme « é » est codé avec deux caractères (un « e » et un « ' » à placer dessus). Un document contenant le mot « été » sera donc lu comme « ´et´e ». Même avec une vue parfaite, ce comportement est très gênant car il empêche le copier-coller de caractères accentué !
+
Par défaut, un caractère accentué comme « é » est codé avec deux caractères (un « e » et un « ' » à placer dessus). Un document contenant le mot « été » sera donc lu comme « ´et´e ». Même avec une vue parfaite, ce comportement est très gênant car il empêche le copier-coller de caractères accentué depuis le fichier PDF ou la recherche de texte dans le document !
  
 
Solution : ajouter ceci dans le préambule :
 
Solution : ajouter ceci dans le préambule :
Ligne 74 : Ligne 102 :
  
 
  \lstset{columns=fullflexible}
 
  \lstset{columns=fullflexible}
 +
 +
Pour les portions de code inclues dans un document PDF via minted, elles semblent par défaut accessibles mais sans indentation du tout. Attention aussi à l'accessibilité des nombreuses options disponibles, comme la numérotation automatique des lignes de code.
 +
  
 
Dans le doute, toujours fournir les fichiers sources correspondants à côté du PDF : c'est une valeur sûre.
 
Dans le doute, toujours fournir les fichiers sources correspondants à côté du PDF : c'est une valeur sûre.
  
==== Les équations ====
+
=== Les équations ===
 +
 
 +
TL; DR: La meilleure solution est d'utiliser une page web et d'inclure les équations avec MathJax.
 +
 
 +
Les équations mathématiques sont un problème délicat pour l'accessibilité. Les fichiers PDF contenant des équations générés par pdflatex ne sont pas accessibles, même pour des cas relativement simples : par exemple, l'équation <math>2^k</math> (2 à la puissance k) sera lue de la même manière que <math>2k</math> (2 fois k) par une liseuse d'écran.
 +
 
 +
Les formats accessibles pour les équations sont :
 +
 
 +
* [https://en.wikipedia.org/wiki/MathML MathML], un format XML représentant la structure d'une équation, inclus dans la norme HTML5. Malheureusement, bien que MathML soit un standard (W3C et ISO), son adoption est limitée. Par exemple, le support de MathML a été explicitement supprimé du navigateur Chrome.
 +
 
 +
* [https://www.mathjax.org/ MathJax], une bibliothèque JavaScript permettant l'affichage de formules mathématiques dans tous les navigateurs actuels. MathJax est capable d'afficher des équations écrites en LaTeX ou en MathML, et offre à l'utilisateur quelques fonctionnalités pratiques (un clic droit sur une formule affiche un menu qui permet de copier coller la formule vers un document LaTeX ou un traitement de texte).
 +
 
 +
* Le code source LaTeX.
 +
 
 +
Attention, certains moteurs de rendu de formules font un rendu de la formule sous forme d'image, et donc produisent des documents inaccessibles. Cela inclue la version de Chamilo utilisée à Grenoble INP en 2016-2017 (les versions plus récentes peuvent utiliser MathJax) et Ensiwiki (sur des équations non-triviales), et beaucoup de convertisseurs LaTeX vers HTML. Un test simple : clic droit sur une équation dans une page web, si le navigateur propose « View image » ou quelque chose qui y ressemble dans le menu, c'est que l'équation a été transformée en image, et n'est pas accessible.
  
{{...}}
+
En dernier recours, quand un document n'est pas accessible, il existe des logiciels de reconnaissance de caractères (OCR) comme [http://www.sciaccess.net/en/InftyReader/ infty Reader] qui savent retrouver les équations à partir de leur rendu en PDF ou en image. Les logiciels d'OCR peuvent en général introduire des erreurs et perdent la structure du document (nécessaire pour le niveau 2 ci-dessus) donc sont à garder comme dernier recours seulement.
  
 
== Tester l'accessibilité d'un document ==
 
== Tester l'accessibilité d'un document ==
Ligne 93 : Ligne 138 :
 
En terme de navigation, le minimum vital pour un document PDF est d'avoir une table des matières. Dans acrobat reader, un document contenant une table des matières exploitable s'affiche comme ceci :
 
En terme de navigation, le minimum vital pour un document PDF est d'avoir une table des matières. Dans acrobat reader, un document contenant une table des matières exploitable s'affiche comme ceci :
  
[[Image:Acroread-toc.png]]
+
[[Image:Acroread-toc.png|alt=Table des matières dans Acrobat Reader]]
  
 
Si la table des matières ne s'affiche pas dans la barre latérale, c'est probablement que le document est mal balisé.
 
Si la table des matières ne s'affiche pas dans la barre latérale, c'est probablement que le document est mal balisé.
Ligne 106 : Ligne 151 :
  
 
Un test pour vérifier la navigabilité d'une page : activer le [https://support.mozilla.org/en-US/kb/accessibility-features-firefox-make-firefox-and-we#w_using-a-keyboard-to-navigate-within-webpages caret browsing] sous Firefox en appuyant sur F7 : un curseur apparaît et vous permet de naviguer dans une page web comme dans un éditeur de texte. On doit pouvoir suivre un lien en appuyant sur Entrée (le curseur doit aller sur la destination du lien).
 
Un test pour vérifier la navigabilité d'une page : activer le [https://support.mozilla.org/en-US/kb/accessibility-features-firefox-make-firefox-and-we#w_using-a-keyboard-to-navigate-within-webpages caret browsing] sous Firefox en appuyant sur F7 : un curseur apparaît et vous permet de naviguer dans une page web comme dans un éditeur de texte. On doit pouvoir suivre un lien en appuyant sur Entrée (le curseur doit aller sur la destination du lien).
 +
 +
Un autre test intéressant : ouvrir la page dans un navigateur en mode texte comme links ou w3m. Certains déficients visuels (et pas seulement eux) utilisent ces outils au quotidien pour surfer sur le web, donc si une page ne marche pas avec ces navigateurs, la page ne sera pas accessibles pour ces utilisateurs. Par ailleurs, une page qui s'affiche bien dans un navigateur en mode texte a plus de chances d'être bien référencée par un moteur de recherche.
 +
 +
== Plus d'informations ==
 +
 +
* Document [http://www.euroblind.org/resources/guidelines/brochure-translations/nr/425 Rendre l'information accessible à tous] sur http://www.euroblind.org

Version actuelle en date du 8 juin 2017 à 13:23

Les documents écrits ne sont pas tous égaux quand ils doivent être lus par des personnes malvoyantes ou non-voyantes. Un document est dit « accessible » quand il peut être lu par le plus grand nombre, y compris un non-voyant. Cette page est une introduction rapide aux concepts clés de l'accessibilité, en particulier avec les outils les plus utilisés à l'Ensimag.

Les outils informatiques pour le handicap visuel

Selon le degré de handicap, les outils adaptés sont différents :

  • Tous les systèmes d'exploitations modernes disposent d'un outil loupe qui permet de grossir certaines parties de l'écran. Cet outil aide les malvoyants, mais n'est d'aucune utilité pour les non-voyants ou les malvoyants les plus sévères.
  • Les liseuses d'écran audio qui permettent d'avoir un retour audio sur ce qui est affiché à l'écran. Associée à des raccourcis claviers efficaces, cet outil permet de parcourir rapidement un texte et de se déplacer dans une application. Par exemple, [NVDA nvda] sous Windows ou orca sous Linux.
  • Les liseuses Braille, qui permettent de parcourir une ligne de texte en détails.

Liseuses audio et Braille sont deux outils complémentaires : la première est pratique pour se déplacer rapidement (en général la synthèse vocale parle très vite !), mais la seconde est plus pratique pour certains scénarios : par exemple, sur une ligne de code comme printf("coucou");, la synthèse vocale va lire « printf-parenthèse-ouvrante-guillemet-coucou-guillemet-parenthèse-fermante-point-virgule », alors que la liseuse Braille donne une vision plus globale de la ligne et permet de positionner rapidement le curseur sur un caractère.

Accessibilité d'un document

On peut classer les documents en plusieurs catégories par rapport à leur accessibilité :

Niveau 0 : Le document ne contient pas de texte. Par exemple, un document scanné : même si un voyant peut lire le texte, l'ordinateur ne peut pas forcément le reconstituer et rendra impossible la lecture d'écran. Un autre exemple : le logo « Ensiwiki » en haut à droite de ce site : pour des raisons d'esthétique, le logo est une image (essayez de le sélectionner et de copier-coller le texte par exemple : ça ne marche pas).

Niveau 1 : Le texte est lisible. Ce n'est pas suffisant : lire un texte est une chose, se déplacer efficacement dedans en est une autre ! Un voyant repère d'un coup d'œil la structure en titre/sous-titres avec la taille des polices, mais il faut d'autres outils pour parcourir un document via une liseuse d'écran.

Niveau 2 : Le texte est lisible et bien balisé : la structure en titres/sous-titre, ... est visible et exploitable par une liseuse d'écran. Par exemple, le corps de cette page est structuré avec des balises <h2> qui permettent de se déplacer de titre en titre.

Intérêt de l'accessibilité pour tout le monde

Les bonnes pratiques d'accessibilité bénéficient à tout le monde. Par exemple :

  • Un document qui n'est pas au niveau 0 ci-dessus est lisible à l'œil, mais on ne peut pas copier-coller de texte depuis ce document, les moteurs de recherche ne peuvent pas indexer son contenu, on ne peut pas faire de recherche de texte dedans, ...
  • Le niveau 2 ci-dessus permet aussi de naviguer efficacement dans la table des matières. Par exemple pour un document PDF, la plupart des lecteurs PDF proposent un affichage arborescent de la table des matières dans une barre latérale.

Même si tous vos lecteurs ont tous des yeux de lynx, la suite de ce document devrait donc vous intéresser !

Les outils pour produire des documents accessibles

Pages Web

Les pages web sont naturellement accessibles à condition de suivre quelques règles simples :

  • Utiliser les balises de titres <h1>, <h2>, <h3>, ... pour marquer la structure.
  • Si une image contient du texte, alors la balise doit absolument utiliser l'attribut alt="le texte de l'image", qui sera utilisé par la liseuse (cet attribut est obligatoire en HTML)
  • On peut aider la navigation en utilisant les balises HTML5 comme <section>, <nav>, <header>, ... en complément des balises de titres pour découper le document.

Quand on utilise un générateur de page web digne de ce nom (rst2html, pandoc, org-mode), ceci est fait automatiquement.

Microsoft Word

Les fichiers PDF produits par Word sont de bonne qualité en terme d'accessibilité, à condition que le document soit bien structuré au départ : utilisez les styles (et/ou le monde plan) pour marquer les titres. Ne vous contentez pas de mettre une ligne en grosse police et en gras pour matérialiser le fait que c'est un titre !

LibreOffice

Comme avec MS Word, il est important que le document utilise les styles pour marquer les titres. Si vous avez un doute, ouvrez le navigateur (F5) et regardez si vous voyez correctement la structure. Voici un exemple de ce que le navigateur peut afficher :

Navigateur dans Libreoffice Writer

Attention, par défaut, l'exportation PDF ne génère pas les balises d'accessibilités ! Il faut les activer explicitement : menu « File », « Export PDF » (pas le bouton d'accès rapide, qui ne donne pas accès aux options), puis cocher : « tagged PDF » et « Export bookmarks » :

Options d'accessibilité à l'export PDF dans LibreOffice

Comme le montre la copie d'écran, activer l'option « PDF/A-1a » active l'option « tagged PDF » : PDF/A-1 est un sous-ensemble de la norme PDF orienté fiabilité et stockage à long terme, et le deuxième « a » signifie « accessibility ».

LaTeX

Malheureusement, pdflatex est très mauvais par défaut en terme d'accessibilité (à peine au niveau 0 ci-dessus). On peut obtenir un résultat acceptable, mais même avec des efforts, les PDF produits par pdflatex ne sont pas d'une qualité irréprochable.

Quelques pièges, et les solutions associées :

Table des matières

Pour avoir une table des matières navigable dans un lecteur PDF, il suffit d'ajouter ceci au préambule :

\usepackage{hyperref}

Les accents

Par défaut, un caractère accentué comme « é » est codé avec deux caractères (un « e » et un « ' » à placer dessus). Un document contenant le mot « été » sera donc lu comme « ´et´e ». Même avec une vue parfaite, ce comportement est très gênant car il empêche le copier-coller de caractères accentué depuis le fichier PDF ou la recherche de texte dans le document !

Solution : ajouter ceci dans le préambule :

\usepackage[T1]{fontenc}

Les ligatures

Pour des raisons d'esthétique, LaTeX considère les séquences de caractères comme « ff », « fi » ou « ffi » comme un caractère unique. C'est joli, mais ça casse la lecture avec certaines liseuses.

Solution 1 : ajouter ceci dans le préambule :

\usepackage{lmodern}

Solution 2 : utiliser une police qui n'a pas de ligature, par exemple palatino :

 \usepackage{palatino}

Les listings dans le texte

Les portions de code inclues dans un document PDF via des paquets comme lstlisting sont souvent jolis mais peu accessibles.

Un problème fréquent : le pretty-printer qui ajoute des espaces entre chaque lettre (ça n'a pas l'air de poser problème avec acroread + nvda, mais visible avec pdftotext). Solution :

\lstset{columns=fullflexible}

Pour les portions de code inclues dans un document PDF via minted, elles semblent par défaut accessibles mais sans indentation du tout. Attention aussi à l'accessibilité des nombreuses options disponibles, comme la numérotation automatique des lignes de code.


Dans le doute, toujours fournir les fichiers sources correspondants à côté du PDF : c'est une valeur sûre.

Les équations

TL; DR: La meilleure solution est d'utiliser une page web et d'inclure les équations avec MathJax.

Les équations mathématiques sont un problème délicat pour l'accessibilité. Les fichiers PDF contenant des équations générés par pdflatex ne sont pas accessibles, même pour des cas relativement simples : par exemple, l'équation 2^k (2 à la puissance k) sera lue de la même manière que 2k (2 fois k) par une liseuse d'écran.

Les formats accessibles pour les équations sont :

  • MathML, un format XML représentant la structure d'une équation, inclus dans la norme HTML5. Malheureusement, bien que MathML soit un standard (W3C et ISO), son adoption est limitée. Par exemple, le support de MathML a été explicitement supprimé du navigateur Chrome.
  • MathJax, une bibliothèque JavaScript permettant l'affichage de formules mathématiques dans tous les navigateurs actuels. MathJax est capable d'afficher des équations écrites en LaTeX ou en MathML, et offre à l'utilisateur quelques fonctionnalités pratiques (un clic droit sur une formule affiche un menu qui permet de copier coller la formule vers un document LaTeX ou un traitement de texte).
  • Le code source LaTeX.

Attention, certains moteurs de rendu de formules font un rendu de la formule sous forme d'image, et donc produisent des documents inaccessibles. Cela inclue la version de Chamilo utilisée à Grenoble INP en 2016-2017 (les versions plus récentes peuvent utiliser MathJax) et Ensiwiki (sur des équations non-triviales), et beaucoup de convertisseurs LaTeX vers HTML. Un test simple : clic droit sur une équation dans une page web, si le navigateur propose « View image » ou quelque chose qui y ressemble dans le menu, c'est que l'équation a été transformée en image, et n'est pas accessible.

En dernier recours, quand un document n'est pas accessible, il existe des logiciels de reconnaissance de caractères (OCR) comme infty Reader qui savent retrouver les équations à partir de leur rendu en PDF ou en image. Les logiciels d'OCR peuvent en général introduire des erreurs et perdent la structure du document (nécessaire pour le niveau 2 ci-dessus) donc sont à garder comme dernier recours seulement.

Tester l'accessibilité d'un document

Document PDF

Deux tests simples pour vérifier qu'un document PDF est bien au dessus du niveau 0 ci-dessus :

  • Ouvrir le document dans un lecteur PDF et copier-coller du texte depuis ce document vers un éditeur de texte. Si ça ne marche pas, c'est mauvais signe.
  • Passer le document dans un convertisseur en texte, comme pdftotext, et vérifier le texte produit.

En terme de navigation, le minimum vital pour un document PDF est d'avoir une table des matières. Dans acrobat reader, un document contenant une table des matières exploitable s'affiche comme ceci :

Table des matières dans Acrobat Reader

Si la table des matières ne s'affiche pas dans la barre latérale, c'est probablement que le document est mal balisé.

En pratique, ce n'est pas suffisant : la table des matières est une liste de pointeurs vers des positions du document, mais un PDF bien balisé contient des indications en plus tout au long du document pour permettre des actions comme « aller au titre suivant ».

Page web

Des outils en ligne permettent de vérifier la structure d'une page et de tester leur accessibilité. Voir par exemple :

http://wave.webaim.org/report#/http://ensiwiki.ensimag.fr/index.php/Produire_des_documents_accessibles

Un test pour vérifier la navigabilité d'une page : activer le caret browsing sous Firefox en appuyant sur F7 : un curseur apparaît et vous permet de naviguer dans une page web comme dans un éditeur de texte. On doit pouvoir suivre un lien en appuyant sur Entrée (le curseur doit aller sur la destination du lien).

Un autre test intéressant : ouvrir la page dans un navigateur en mode texte comme links ou w3m. Certains déficients visuels (et pas seulement eux) utilisent ces outils au quotidien pour surfer sur le web, donc si une page ne marche pas avec ces navigateurs, la page ne sera pas accessibles pour ces utilisateurs. Par ailleurs, une page qui s'affiche bien dans un navigateur en mode texte a plus de chances d'être bien référencée par un moteur de recherche.

Plus d'informations