< Retour à la liste des conférences

WCAG 2.0, Flash, PDF, Javascript et les autres sont dans un bateau…

Conférence du 09 octobre 2009 à 14h00, cycle de conférences Paris Web 2009.

Préparée et animée par Sébastien Delorme (Atalan) et Aurélien Levy (Temesis).

Ce document regroupe la vidéo et la transcription de la conférence. Vous pouvez également télécharger :

Vous pouvez apporter vos commentaires sur Tentatives Accessibles. Si vous rencontrez des coquilles ou des erreurs dans la transcription, n'hésitez pas à m'en faire part sur sebastien@ideance.net.

Vidéo

Transcript

François Nonnenmacher (équipe Paris Web) : donc nous allons reprendre avec Aurélien Levy et Sébastien Delorme qui vont nous parler, ou pas si j’ai compris dans l’ascenseur, de WCAG 2.0, Flash, PDF, Javascript… et tralali tralala sont dans un bateau.

(Aurélien teste son micro-cravate)

François : 50 minutes, questions comprises.

Aurélien : ouai, com’ d’hab. Merci.

(François remet son micro à Sébastien)

Aurélien : juste un petit mot avant de commencer. Par la suite, en fin de journée, on va faire un quizz un petit peu spécial. Normalement sur le Google Moderator il y a une nouvelle section qui va être créée dans laquelle vous pourrez poser des questions. Les questions s’adresseront à la fois à certains représentants du public que nous aurons sélectionnés au préalable et aux orateurs. Il faut faire soit des questions à choix multiples, soit des questions à réponse unique et ça sera sur les thématiques Paris Web donc : accessibilité, qualité et webdesign. Donc on vous encourage à aller poser vos questions sur le moderator dès qu’il sera ouvert.

Sébastien : voilà, si jamais le moderator met un petit peu de temps à s’ouvrir vous pouvez aussi les noter sur un bout de papier et nous les laisser à la fin de la conférence, tout à l’heure.

Introduction

Aurélien : cette année, on va vous parler un petit peu de la nouveauté qui est paru en cours d’année dernière qui est WCAG 2.0 et on va essayer de mettre en parallèle WCAG 2.0 avec l’usage des nouvelles technologies ou du moins comme ce que l’on considère comme anciennement « nouvelle technologies » qui sont Flash, PDF, Javascript et toutes les vraiment nouvelles qui peuvent être HTML 5, Silverlight et tout un tas de choses comme ça. Je vais laisser la parole à Sébastien qui va commencer par vous parler rapidement de WCAG, vous faire un petit point sur les nouveautés de WCAG.

Sébastien : voilà donc. Juste pour présenter très rapidement, Aurélien Levy, société Temesis, et moi-même Sébastien Delorme de la société Atalan. Je ne vais pas en parler plus, on va directement attaquer sur le fond de la conférence.

Sébastien : la conférence du jour commence effectivement par WCAG 2.0, on va faire un rapide tour d’horizon de ce qu’est WCAG 2.0. On va pas rentrer dans le détail, en une conférence de 50 minutes, on n’aurait pas le temps. C’est quelque chose d’assez complet, il y a beaucoup beaucoup d’informations à donner. L’idée c’est de vous donner les grandes lignes, les différences entre WCAG 1.0, WCAG 2.0 pour ceux qui connaissent WCAG 1.0 ou les grands principes pour ceux qui ne connaissent pas du tout.

Aurélien : on s’est rendus compte que pour l’année prochaine, vaudrait mieux éviter de mettre trop de choses dans l’intitulé du titre parce qu’après on est obligé de les traiter et on n’a pas assez de temps.

(Rires dans la salle)

Sébastien : les points de suspension nous ont bien arrangés, comme ça on a pas traité certaines choses qui n’étaient pas dans le titre.

Retour au sommaire

WCAG 2.0

Quatre principes

Sébastien : pour commencer, WCAG 2.0… Si vous commencez et que vous ouvrez le document WCAG 2.0, les premières choses que vous allez voir, se sont les quatre principes qui régissent le document. Quatre principes qui sont résumés en quatre mots, donc ça parait relativement simple.

Ça c’est les quatre fondations qui vont garantir l’accessibilité et c’est le socle des WCAG 2.0. C’est pas forcément très explicite en soit. Donc on va détailler un tout petit peu.

Retour au sommaire

Un référentiel dissocié des spécificités technologiques

Sébastien : dans le document ensuite sous chaque principe, vous aller retrouver des « guidelines » et ensuite des règles. C’est une structure qui est déjà connue par la plupart d’entre vous, je pense. Par contre ça peut être le contenu des règles qui peut être perturbant si vous connaissez déjà les WCAG 1.0. La première règle par exemple, on va la lire ensemble. Première règle de la première « guideline », du premier principe :

« Les équivalents textuels : proposer des équivalents textuels à tout contenu non textuel qui pourra alors être représenté sous d’autres formes selon les besoins de l’utilisateur : grands caractères, braille, synthèse vocale, symboles ou langage simplifié ».

Donc c’est quelque chose de très général, la remarque c’est que là-dessus, on parle pas d’HTML, on ne parle pas de balise image, on parle pas d’attribut alternatif. C’est une raison bien particulière, c’est que l’objectif de ce document c’est de répondre à des besoins d’accessibilité sans être spécifique à une technologie existante. Ce qui n’était pas le cas des WCAG 1.0, où effectivement les WCAG 1.0 s’appliquaient surtout sur de l’HTML, des CSS.

Là on a un document principal, le document principal des WCAG 2.0 qui ne traite pas de technologies mais surtout de besoins liés à l’accessibilité.

Sébastien : l’énorme avantage derrière ça c’est que vous allez théoriquement pouvoir appliquer les WCAG 2.0 à des technologies qu’on a l’habitude d’utiliser : HTML, CSS, etc. Mais aussi à d’autres technologies, donc on peut essayer d’appliquer ces règles au Flash, à l’AJAX, à du Javascript, à du PDF, etc etc. À des technologies qui n’existent pas encore, à du SVG, à du Silverlight. Et donc c’est surtout là-dessus qu’on va s’attarder un petit peu pendant ces 50 minutes et principalement les quatre qu’on a à l’écran : Javascript, Flash et PDF. Et AJAX.

Aurélien : le seul inconvénient que ça peut avoir par contre, c’est effectivement que, vu qu’on a eu un retrait des spécificités technologiques, on est sur des « guidelines » qui sont beaucoup plus génériques et qui peuvent être beaucoup plus compliquées à comprendre, ou en tout cas qui peuvent paraître assez abstraites.

Sébastien : c’est l’illustration suivante. Voilà, si vous commencez à regarder WCAG 2.0, là le principe il est volontairement brouillon, donc c’est peut-être ça que vous allez voir ou retenir : c’est quelque chose d’assez complexe. Vous allez rester perplexe face à ça.

Sébastien : derrière ça c’est quand même quelque chose qui est très très bien structuré. Y’a beaucoup de choses.

(En montrant l’écran)

Sébastien : là, c’est un graphique que vous trouvez sur le site du W3C. Les WCAG 2.0, c’est le cadre qui est au milieu, donc WCAG 2.0, ses principes, les « guidelines » et les critères qui sont détachés de toute technologie. À côté de ça évidemment, il faut pouvoir mettre en application, il faut pouvoir trouver des réponses concrètes, un équivalent textuel sur de l’HTML c’est quoi ? C’est une alternative à une balise image par exemple. Tout ça vous allez le trouver dans ce qu’on appelle les techniques pour WCAG 2.0, où vous allez trouver un certain nombre de tests, de critères, qui sont, là, vraiment techniques et qui s’associent au document principal que sont les WCAG 2.0.

L’énorme avantage, et ça répond à une question que j’ai beaucoup beaucoup entendue hier, à une remarque que j’ai beaucoup entendue hier qui est « moi les référentiels d’accessibilité, je veux bien les appliquer mais j’ai l’impression que ça change tous les ans ». C’est une chose que j’ai entendue hier particulièrement, là l’idée c’est justement d’avoir un socle qui est détaché de toute technologie, qui restera commun, qui est, qui sont des besoins d’accessibilité naturels. Et des annexes qui, elles, vont pouvoir évoluer en fonction des technologies.

On va se pencher là-dessus justement, particulièrement sur Flash en premier, c’est Aurélien qui va commencer.

Aurélien : je rajouterai un point sur le concept WCAG, c’est qu’il faut bien avoir conscience que le seul document qui est normatif est le document principal. Tous les autres documents sont des annexes et qui ne sont pas exhaustifs. WCAG va vous lister des techniques, c’est des techniques de mise en œuvre mais ça ne veut pas dire qu’il n’y en a pas d’autres qu’ils n’ont pas listées. Donc y’a tout un tas de techniques que vous pouvez mettre en place, d’astuces CSS, tout ce que vous voulez, que vous pouvez mettre en place à partir du moment où vous avez vérifié que c’était accessible, que vous avez testé dans différentes plateformes, différents lecteurs d’écran, différents outils, etc et que ça marche, ça veut pas dire qu’il ne faut pas le mettre en œuvre. Et c’est ce qu’on va essayer de voir un petit peu aujourd’hui. Voir en quoi justement les WCAG étant ouvertes comme ça vous pouvez utiliser les nouvelles technologies tout en étant conformes par rapport aux WCAG.

Retour au sommaire

Flash

Aurélien : donc on va commencer par Flash.

(François vient réajuster le micro-cravate d’Aurélien)

Retour au sommaire

Flash mais pourquoi ?

Aurélien : on a longtemps décrié Flash au niveau de l’accessibilité, on va essayer de voir en quoi maintenant ça a un petit peu évolué.

Aurélien : la première chose que je voudrais demander, c’est… Souvent on vous dit, « Flash n’est pas accessible », c’est la première chose qu’on va vous dire. Moi je voudrais vous demander, est-ce que face à un client, vous pouvez décemment lui dire… Le client vous dit « je veux du Flash ». Vous pouvez arriver à lui dire, « ok c’est pas très bien, faudrait prendre autre chose, j’aime pas ça, je sais pas faire ». Vous pouvez essayer de lui argumenter tout ce que vous voulez mais au bout d’un moment si votre client vous dit « je veux du Flash, je veux du Flash, je veux du Flash », vous n’aurez pas d’explication de sa part. C’est juste qu’il veut du Flash, vous devez répondre à sa demande, vous devez trouver une réponse. Et ça sera pareil pour toutes les autres technologies, y’en a un il va vouloir un menu déroulant en Javascript, il veut son menu déroulant. D’accord. Il veut pas savoir que c’est pas accessible, il veut pas savoir que c’est compliqué, il veut pas savoir… Voilà. Il l’a vu chez son voisin, il veut la même chose. Donc il faut pouvoir lui répondre, il faut pouvoir lui dire « ok, on va le faire », ça va avoir des contraintes, ça va avoir des avantages et des inconvénients, on le met au courant de tout ça, mais en tout cas, il faut dans la mesure du possible jamais lui dire non.

Donc, je sais pas si… On peut faire un petit sondage dans la salle. Qui déjà a fait du Flash dans la salle ?

(Certains participants lèvent la main)

Aurélien : déjà, c’est déjà pas mal. Une bonne partie. Trop (en riant). Mais pourquoi trop ? Est-ce que c’est parce que vous avez vendus du Flash volontairement, ou c’est parce que c’est votre client qui vous a demandé du Flash ? Qui vend du Flash en tant que prestation ? Ou répond à des demandes simplement ?

(Moins de participants lèvent la main)

Aurélien : donc y’en a déjà moins qui vendent volontairement du Flash. D’accord. Donc souvent effectivement c’est le client qui va vouloir, qui va faire une propal. Pardon, plutôt un appel d’offres ou un cahier des charges dans lequel il va vous demander de répondre avec un site dans lequel il y aura des animations, etc. Et donc automatiquement vous serez obligés de répondre en Flash. Je vais pas rentrer sur le débat « on peut faire la même chose en Javascript » etc etc.

Donc pourquoi Flash ? Simplement, la réponse c’est « parce que ». Y’a pas de raison, on vous demande d’utiliser Flash, vous utilisez Flash.

Retour au sommaire

Flash pas accessible ?

Aurélien : Flash pas accessible ? Ça c’est le premier mythe. Alors est-ce qu’on vous a menti, est-ce qu’on vous a pas menti ? Ça c’est la question.

Depuis Flash player 6, donc ça commence déjà à dater, le player Flash 6 était déjà accessible. Les lecteurs d’écran, depuis Flash player 6, étaient capables d’aller lire le contenu d’une animation Flash si celle-ci était correctement codée. Donc ça date quand même, on en est depuis à Flash player 10 je crois, quelque chose comme ça.

(Aurélien se le fait confirmer par quelques personnes)

Aurélien : donc ça commence à faire quelques années. Macromedia anciennement, et maintenant Adobe, propose pas mal de choses de son côté. Vous avez des scripts spécifiques à Jaws qui ont été développés pour améliorer encore le rendu de Jaws dans la lecture du Flash. Et vous avez également tous les composants natifs qui sont livrés par défaut maintenant avec Flash qui sont accessibles. Alors, attention, « accessible », c’est toujours la même chose avec Adobe. C’est accessible, faut juste penser à activer les options qui vont bien au démarrage. Mais une fois que vous avez bien activé les options notamment dans Flex et que vous avez compilé avec les options pour déclarer que vous vouliez de l’accessibilité, automatiquement les composants natifs vont être accessibles.

On vous mettra, on a mis à la fin de la présentation, et plutôt quand vous la récupérerez si vous voulez la récupérer, tous les liens, toutes les ressources vers le blog de Macromedia, les documentations, etc. qui listent justement quels sont les composants accessibles, qu’est ce qu’ils font, qu’est ce qu’ils ne font pas.

Il faut savoir qu’aux États-Unis, ils ont les WCAG effectivement, mais ils ont avant tout en tant qu’éditeurs, une norme qui s’appelle la section 508. Et quand vous êtes un éditeur de logiciels aux États-Unis, vous êtes obligés de vous conformer à cette section 508. Et en quoi ça consiste ? Ça consiste notamment à faire des logiciels accessibles et surtout à publier et à dire qu’est ce qui est accessible dans votre logiciel et qu’est ce qui ne l’est pas. Sur tous les sites, vous allez voir tous les sites des sociétés américaines, y’a forcément ce qui s’appelle des VPAT (NDT : Voluntary Product Accessibility Template) et ces VPAT listent officiellement qu’est ce qui est accessible, qu’est ce qui marche et qu’est ce qui ne marche pas en termes d’accessibilité dans le logiciel.

Retour au sommaire

L’accessibilité dans Flash, étiquettes (alternatives)

Aurélien : on va rentrer un petit peu dans le dur je dirais. Donc, le mythe, Flash n’est pas accessible, là je crois que depuis Flash 6 comme je l’ai dit c’est largement dépassé et c’est largement faux. Maintenant qu’est ce qu’on peut faire dans le Flash en termes d’accessibilité et par rapport à WCAG, en quoi Flash va nous permettre de répondre à WCAG 2.0.

Donc on a une première guideline, la guideline 1.1, comme Sébastien l’a dit, qui était les alternatives textuelles. Ça c’est la première fonctionnalité qui a été inclus dans Flash, c’est la possibilité de mettre des étiquettes. Au lieu d’appeler ça des alternatives, ils appellent ça des étiquettes à tout ce qui est boutons, graphiques, etc. Dans Flash, depuis Flash 6 et Flash MX, vous avez ce qui s’appelle le panneau accessibilité. Vous allez dans fenêtre, options, et vous avez le panneau accessibilité. Ou c’est la petite icône bleue qui est à côté du menu propriétés, le petit bonhomme bleu d’accès universel. Et vous avez la possibilité quand vous avez sélectionné un bouton sur votre scène, ou un élément graphique de lui donner une étiquette. C’est le panneau… c’est celui-ci qu’on a sur la gauche (en montrant l’écran), dans lequel vous avez deux cases principalement. Une case nom et une case description. À quoi sert la case description, à l’heure actuelle, à pas grand-chose. C’est un petit peu comme le title sur les liens, c’est plus une option supplémentaire que vous allez pouvoir utiliser mais il faut surtout utiliser le champ qui est le champ nom. Quand vous renseignez un texte dans ce champ nom automatiquement, le lecteur d’écran va être capable de lire et de restituer la valeur qui est dans ce champ.

Une autre option qui est assez intéressante, on a une case à cocher qui est « étiquetage automatique ». L’étiquetage automatique, ça sert à quoi ? Ça sert notamment quand vous faites des boutons ou des graphiques dans lequel il y a du texte. Automatiquement Flash, si vous avez coché cette case, va aller récupérer le texte qui est dans le bouton ou dans l’animation et va en faire l’alternative textuelle ou l’étiquette comme on l’appelle chez Adobe.

Et on a encore une dernière option, qui est « rendre les objets accessibles », les « objets enfants accessibles » pardon. Rendre les objets enfants accessibles, à quoi ça sert ? Ça va servir quand vous avez des clips qui sont imbriqués les uns dans les autres. Alors j’utilise des termes justement qui sont propres à Flash, si y’en a qui ne savent pas ce que c’est des clips, les boutons je pense que tout le monde sait ce que c’est. Donc, si vous avez des clips imbriqués les uns dans les autres ou des boutons imbriqués les uns dans les autres, ou etc etc, en cochant la case « rendre les objets enfants accessibles », automatiquement Flash va aller chercher les textes qui sont imbriqués les uns dans les autres, qui sont imbriqués dans les différentes animations.

Ça c’est pour rendre un clip accessible.

(Un participant du public pose une question qui n’a pas pu être enregistrée)

Aurélien : si tu vectorises le texte ? Oui, si le texte est un graphique, tu veux dire ? Devient un graphique ? Oui, il ne le considérera plus comme… Par contre, tu pourras toujours lui une alternative à la main. Et ce qu’il faut savoir c’est qu’au niveau des champs texte, il ne sera capable de récupérer ton champ texte que si c’est un champ dynamique. Si c’est un champ statique, il ne le prendra pas en compte. C’est juste à bien penser à mettre dans les propriétés « dynamique » plutôt que « statique ».

Évidemment tout ça est faisable par actionscript, donc en fonction des versions de Flash le code va être différent. Mais ça dépend de la complexité de votre animation. Évidemment si vous avez juste des publicités en Flash à faire, vous pouvez très bien utiliser le panneau accessibilité, ça marchera très bien. Dès que vous allez être sur de l’application beaucoup plus lourde avec des fenêtres, etc, là il va falloir utiliser l’actionscript, qui vous permettra de le faire et de le gérer beaucoup plus dynamiquement.

Et, dernier point. Le panneau, ce même panneau, vous le retrouvez par défaut quand vous cliquez sur votre scène en Flash. Vous avez ce même panneau qui contient les champs, cette fois, « nom » et « description » dans lequel vous allez pouvoir donner une description générale à votre animation. Ce qui correspondrait un peu à un title que vous mettriez sur votre lien et qui sera lu dans le lecteur d’écran.

Retour au sommaire

L’accessibilité dans Flash, gestion du focus

Aurélien : deuxième point qui va être très important qui va correspondre à la guideline 2.1 de WCAG 2.0 : ça va être la possibilité de naviguer au clavier dans un élément. Effectivement, quand on a un handicap moteur, c’est assez courant, ou même les personnes qui utilisent un lecteur d’écran, elles vont naviguer avec un clavier plutôt que naviguer avec une souris. Donc il va falloir pouvoir utiliser un clavier quand on navigue dans une animation. C’est pareil, c’est dans les premières fonctionnalités qui ont été traitées par Flash, la possibilité de rendre des éléments tabulables, ou pas. La possibilité de gérer l’ordre de tabulation. Ça se fait pareil, par le panneau accessibilité, vous allez avoir un champ raccourci et un champ ordre de tabulation. Donc vous allez pouvoir spécifier des raccourcis clavier. Donc là c’est toujours assez problématique, on sait que les attributs accesskey en HTML ont posé pas mal de problèmes et continuent à en poser. Ils sont toujours présents dans HTML 5 mais ça ne semble pas vraiment s’améliorer.

(Une remarque est faite dans le public)

Aurélien : voilà, on dit d’utiliser que les chiffres, etc. À la différence près, qu’effectivement quand on est dans une animation full Flash, on peut avoir besoin de beaucoup… Par exemple, si je fais PowerPoint en Flash, je vais peut-être avoir besoin de beaucoup plus de raccourcis clavier que juste de 0 à 9. Donc faut faire attention à ça. Toujours est-il que c’est faisable, pareil, soit via le panneau accessibilité soit via actionscript.

Et vous avez surtout la possibilité de définir l’ordre de tabulation. Même chose donc, soit via le panneau accessibilité soit via le script. La seule chose à laquelle il faut faire attention c’est que, quand vous avez, mettons, cinq éléments sur votre scène, il faut que les cinq éléments aient un ordre de tabulation qui soit défini. Vous ne pouvez pas définir l’ordre de tabulation pour un seul de ces cinq éléments. Si vous ne le mettez que sur l’un des cinq, automatiquement Flash ne verra pas du tout la tabulation et fera son comportement natif qui est assez étrange et assez compliqué à utiliser. En fait c’est en fonction de la position de votre clip dans l’animation, dans la scène en fait. Par exemple si votre clip il est haut à gauche, il va être traité avant celui qui est en bas à droite évidemment. Mais y’a aussi la profondeur qui va jouer, donc y’a tout un tas de… On trouve la règle de calcul sur le site d’Adobe, c’est assez compliqué, donc c’est assez aléatoire pour prédire quel est le bouton qui va être navigué en premier. Si vous avez prévu par exemple un menu de navigation horizontal, vous n’avez pas du tout l’assurance que c’est votre menu qui va tabuler en premier et puis ensuite votre contenu. Donc c’est vraiment très important à géré, soit via le panneau, soit via le script.

Pour vous montrer tout ça on va vous faire une petite démo.

(En montrant l’écran)

(NDT : adresse du jeu utilisé pour la démonstration http://www.doodledoo.com/accessibility/games/Matching.html)

Aurélien : donc ça c’est un petit jeu qui est développé par une société qui s’appelle DoodleDoo, qui est une société anglaise je crois, qui est spécialisée dans la conception d’animation Flash accessibles. Là c’est juste un jeu dans lequel il y a des petites cartes avec des animaux et on a le parent, ou la maman et le bébé, et il faut faire des couples pour gagner le jeu.

Sébastien : donc là par exemple, cette anim Flash, sur mon Firefox, c’est un jeu qui généralement se joue avec la souris, on clique sur la petite carte, ça la découvre etc, etc. Ici je sais pas si vous voyez, je vais utiliser la touche tabulation pour rentrer dans mon Flash et je peux tabuler sur mes six cartes. Ensuite, je vais pouvoir appuyer sur la touche entrée pour les retourner etc, etc. Là toutes les options pour utiliser la tabulation sur cette animation sont activées.

Je vais maintenant vous activer le son, j’ai un lecteur d’écran installé sur mon PC, qui est NVDA, un lecteur d’écran open-source. On va voir ce que ça donne maintenant si effectivement j’écoute, j’utilise que le clavier et j’écoute la page.

(Synthèse vocale : card one button, card two button, card three button)

Sébastien : donc là j’utilise ma tabulation et je sais que je suis sur ma carte trois.

(Synthèse vocale : card three hen)

Sébastien : là j’ai cliqué sur entrée et j’ai découvert ma carte.

(Synthèse vocale : card five button, card five sheep)

Sébastien : et donc, à chaque fois il m’annonce l’animal qui est derrière la carte, je sais si j’ai trouvé les bons ou pas. Là par exemple, je peux tout faire. Je vais vous le faire au ralenti.

(Synthèse vocale : card two button, cart two chick, card three button, card three hen – bip indiquant la réussite)

Sébastien : donc là j’ai trouvé les deux animaux, la poule et le poussin.

(Synthèse vocale : card one button, cart one piglet, card four button, card four pig – bip indiquant la réussite)

Sébastien : donc je suis capable d’utiliser cette animation uniquement avec le clavier sans la souris et également avec mon lecteur d’écran NVDA puisque tout est vocalisé. Parce que mes cartes ont des alternatives textuelles : carte un, carte deux, carte trois, … L’image qui est derrière également. Et donc je peux l’utiliser entièrement sans voir l’écran.

Aurélien : donc y’a juste un problème qui est peut-être connu si vous avez déjà eu à faire des labellisations ou des choses comme ça, qui est que pour l’instant Flash dans Firefox, et dans Opera et dans Safari, à l’heure actuelle vous êtes obligé de cliquer avec votre souris dans votre Flash avant de pouvoir naviguer au clavier à l’intérieur. Ce qui est assez gênant, y’a Macromedia qui a publié sur son blog, pareil se sera listé dans les ressources, une technique pour pouvoir gérer, contourner ce problème là et arriver automatiquement à naviguer pareil dans Firefox, directement sans avoir à cliquer avec la souris dessus. C’est un bug qui est connu du côté de Firefox, ils travaillent dessus et normalement ils devraient le régler, peut-être pas pour la prochaine version mais la version d’encore après.

Voilà sur la partie guideline 2.1 donc navigation au clavier et alternatives qui sont vraiment les deux basiques fondamentaux en termes d’accessibilité si vous voulez rendre une animation Flash accessible.

Retour au sommaire

La vidéo dans Flash

Maintenant on a également d’autres directives qui concernent tout ce qui est vidéo. Les directives sur les vidéos, ça va être de pouvoir mettre du sous-titre, de pouvoir mettre de l’audio-description dans vos vidéos. Pour ça Flash propose nativement deux composants qui sont FLVPlayback et FLVPlaybackcaptioning. Vous faites, fichier, fenêtres, composants, vous allez avoir ces deux composants, vous pouvez les utiliser. Vous glissez les composants sur votre scène, vous allez pouvoir configurer la barre de lecture dans laquelle vous allez pouvoir choisir d’afficher ou de masquer les boutons, les boutons pour afficher/masquer les sous-titres etc. Ces boutons vont effectivement être lus par le lecteur d’écran et navigables au clavier nativement. Et le FLVPlaybackcaptioning va vous permettre de synchroniser un fichier XML ou format DFXP. Le format DFXP c’est un format du W3C pour justement tout ce qui est sous-titrage. C’est un dérivé de XML dans lequel vous allez avoir juste des timecodes, qui vont vous dire à telle seconde on va afficher tel texte, à telle seconde on va afficher tel texte, … Il suffit juste d’avoir effectivement un outil qui va vous permettre de produire ce fameux fichier DFXP ou XML et après automatiquement… Soit à la main si c’est une navigation statique, soit en programmation ou via Flex, soit en actionscript, vous allez pouvoir dire à votre composant de lecture Flash d’aller chercher votre fichier de sous-titres et il l’affichera dans la bonne fenêtre.

C’est de plus en plus répandu le sous-titrage, on en avait parlé l’année dernière. C’est de plus en plus répandu, de moins en moins compliqué à faire et de moins en moins couteux à faire. À partir du moment où vous utilisez les bons outils ou à partir du moment où vous contactez des gens qui en font du volume, c’est-à-dire la télévision, y’a des entreprises qui sont spécialisées là-dedans comme je l’ai dis l’année dernière. C’est pas vous petite Web agency qui allez vous amusez à produire des sous-titres quand vous avez 15 heures de vidéos à produire. Vous avez pas les outils adaptés, y’a des sociétés qui sont spécialisées là-dedans, qui ont des coûts largement inférieurs à ce que vous pouvez avoir et qui vont réaliser ça très rapidement. À titre d’exemple, les dernières campagnes de vidéos, ce sont des vidéos qui faisaient 2 minutes, j’avais 10 spots de 2 minutes à faire. C’est pas énorme mais à la main, j’aurai mis à le faire, je pense au moins 2 jours si j’ai vraiment voulu le faire bien. La société par laquelle je suis passé, elle m’a compté 500€ je crois, donc une demi-journée. Parce qu’ils ont un logiciel qui va fonctionner par de la reconnaissance vocale, ils ont différents logiciels, qu’ils appellent de perroquet où les gens répètent et automatiquement ça saisi le texte.

Y’a déjà eu plusieurs conférences là-dessus, donc on va pas trop s’étendre sur le sujet. Mais en tout cas, maintenant les logiciels pour produire les sous-titres en eux-mêmes sont relativement courants et également en dehors du lecteur Flash en lui-même vous avez d’autres types de player Flash qui sont pas natifs à Flash, du type Neolao Player, FLV Player, tout un tas de players comme ça qui gèrent ces options là. Le lecteur Youtube le gère, le lecteur DailyMotion gère les sous-titres aussi. La plupart des plateformes de blogs commencent à le gérer nativement aussi et vous pouvez quand vous uploadez votre vidéo, uploader un fichier de sous-titres qui va avec.

Sébastien : à titre d’exemple, une vidéo, que je vais lancer.

(La synthèse vocale est en route. Sébastien la coupe en court de route. La vidéo est lancée.)

(NDT : adresse du lecteur utilisé pour la démonstration http://www.paciellogroup.com/blog/misc/adobe/flash/samples/accessiblevideo/index.html)

Sébastien : là vous voyez effectivement les sous-titres. Je vais pouvoir les désactiver, les activer sur un petit bouton. Et puis je vais vous montrer aussi pour l’audio-description.

(La synthèse vocale est en route.)

Sébastien : alors j’ai NVDA qui parle en même temps, c’est la voix anglaise que vous entendez.

(La vidéo est en route. Une voix-off décrit en anglais la scène qui passe à l’image)

Sébastien : je ne sais pas si vous avez fait attention à l’audio-description au début. La différence qu’il y avait sur la vidéo. Je vais couper NVDA comme ça il nous embêtera plus. Là, vous avez à l’écran des actions qui se passent.

(Sébastien relance la vidéo sans audio-description)

Sébastien : il y a quelqu’un sur un skate, il y a quelqu’un sur un vélo, etc etc. C’est des informations qui sont uniquement visuelles. Avec le petit bouton qui est ici, je peux activer, désactiver l’audio-description.

(Sébastien relance la vidéo avec l’audio-description. Cette fois-ci, une voix-off décrit la scène, le skateboard, …)

Sébastien : et donc là effectivement, si j’en ai besoin, si je ne peux pas avoir la vidéo, je peux activer mon audio-description. Alors mon bouton il faut qu’il soit tabulable, il faut qu’il ait une alternative comme je vous ai montré tout à l’heure pour les petites cartes du jeu. Et comme ça je pourrai l’atteindre et l’activer/désactiver.

Aurélien : vous avez également dans cet exemple vidéo… C’est également faisable en Javascript tout ça. L’idée c’est pas de vous montrer que Flash c’est mieux que Javascript ou que n’importe quelle autre technologie, c’est pour montrer que c’est faisable en Flash. C’est sans doute faisable aussi dans une autre technologie. Mais on ne peut pas dire que ça n’est pas faisable dans Flash et que du coup le Flash ne peut pas être accessible sur ce point du vue. Donc là vous avez le transcript de tout ce qui est dit dans la vidéo et les sous-titres. Avec la possibilité de cliquer sur un mot dans le transcript (Aurélien demande à Sébastien de cliquer sur un mot), automatiquement la vidéo va venir se caler au point de la vidéo correspondant. Donc ça c’est effectivement géré va les cue points dans Flash et dans le fichier de synchronisation, le fichier de sous-titres.

Voilà, on a la possibilité de gérer le sous-titrage, audio-description, navigation au clavier, lecture par lecteur d’écran. Le dernier point qu’on va pouvoir gérer dans Flash, et là c’est une grosse plus-value que va pouvoir apporter Flash, c’est la souplesse du vectoriel.

Retour au sommaire

Zoom, taille du texte, couleur, typographie, …

Aurélien : au niveau de la souplesse de tout ce qui est affichage, on va pouvoir gérer le zoom, on va pouvoir gérer les couleurs, on va pouvoir gérer la taille de caractères. C'est-à-dire qu’assez facilement on va pouvoir proposer dans notre Flash des options d’affichage. Comme on aurait les CSS alternatives, on va pouvoir proposer des options d’affichage pour modifier l’affichage et permettre à l’utilisateur éventuellement de personnaliser son affichage ou d’avoir des contrastes différents s’il a besoin d’avoir des contrastes différents. Donc ça, ça correspond à la directive 1.4 dans les WCAG qui demande au concepteur de laisser à l’utilisateur la possibilité de personnaliser l’affichage et d’avoir accès comme ça à toutes les informations.

(NDT : adresse de la page utilisée en démonstration http://www.paciellogroup.com/blog/misc/adobe/flash/samples/flash_css_switcher/news_storyLink.html)

Aurélien : donc la page que vous avez là, c’est une page en Flash. Vous avez juste un petit exemple pour montrer qu’on peut changer la taille du texte assez simplement avec un bouton. Tout ça c’est du Flash. Maintenant en plus dans les dernières versions Flash, il supporte directement l’unité em, donc automatiquement en fonction de la taille… Si vous spécifiez vos tailles de texte en em dans votre Flash, automatiquement si vous modifiez la taille des caractères dans votre navigateur vous allez pouvoir jouer comme ça dans la taille du rendu de votre Flash.

Voilà pour Flash. Comme je l’ai dit, encore une fois l’idée, vu la durée qu’on avait de conférence… Effectivement quand on a commencé à préparer la conférence on s’est dit « on aurait peut-être du mettre un petit peu moins de sujet, on aurait pu approfondir un peu plus techniquement ». Mais y’avait déjà eu un atelier sur le sujet fait par Stéphane Deschamps, pas l’édition précédente, mais l’édition encore avant il me semble. Là on vous a pas réellement expliqué techniquement sur le fond comment il faut faire. Mais c’est pour ça qu’on vous a mis toutes les ressources pour, à la fin des slides. Mais en tout cas voilà, au niveau de Flash, il faut arrêter de dire que Flash n’est pas accessible, on peut faire du Flash accessible et on verra dans la conclusion comment c’est notamment traité dans le cadre des directives qui sont en train de se mettre en place en France en ce moment et au même titre que Javascript et que PDF.

Sébastien : le discours qu’on veut faire passer c’est surtout essayer de réfléchir un petit peu sur ce qu’on peut faire d’accessible et éviter de se braquer à chaque fois sur les nouvelles technos ou sur des choses qui sont propriétaires et qui ne seraient donc pas accessibles. Pour atténuer un peu le discours, il faut faire attention, il y a des possibilités… Là on vous a montré de façon presque exhaustive tout ce qu’on peut faire dans Flash, ça veut dire que tout ce qu’on vous a pas montré on pourra pas le rendre accessible. Vous n’avez pas, comme on va le voir sur le PDF, a possibilité de rajouter de la sémantique, de structurer des titres, etc etc.

Retour au sommaire

PDF

Sébastien : là sur le PDF, comme Aurélien l’a fait tout à l’heure, vous êtes plus dans le Web et pas forcément dans le print et c’est plus des gens du print qui généralement génèrent du PDF. Mais qui a déjà mis en ligne des sites avec des fichiers PDF en téléchargement ?

(Une grande partie du public lève la main)

Sébastien : et où les informations présentes dans ces fichiers PDF n’étaient présentes que dans ces fichiers PDF ? Je suppose tout le monde, enfin tous ceux qui ont mis en ligne du PDF. Ça a son avantage, ça a ses inconvénients. Effectivement le fichier PDF si vous faites à la base un document qui a pour objectif d’être imprimé, la façon la plus simple et la plus pratique de le mettre en ligne c’est de mettre un fichier PDF en téléchargement. Le problème c’est que si vous le mettez comme ça tel quel en téléchargement, est-ce qu’il sera accessible, est-ce qu’il ne le sera pas ?

Est-ce qu’on vous a également déjà demandé, posé la question : « est-ce que vous pouvez me faire un fichier PDF accessible ? », « qu’est ce qu’on peut faire pour faire un fichier PDF accessible ? », et qui a botté en touche suite à cette question, en disant « ben écoutez, je ne sais pas faire » ou « je ne peux pas faire ». Vous avez déjà eu la question, jamais ?

Aurélien : à qui on a déjà demandé de faire du PDF accessible ?

(Peu de personnes dans le public lèvent la main)

Aurélien : pas beaucoup apparemment (rire). Bon, déjà qui savait qu’on pouvait faire du PDF accessible ? (cette fois plusieurs personnes lèvent la main) Bon c’est déjà mieux.

Retour au sommaire

Les équivalents textuels

Sébastien : dans un fichier PDF, je vais refaire la même chose. Pareil, sur la guideline 1.1, il faut pouvoir mettre des équivalents textuels sur des contenus qui ne sont pas textuels et qui sont des images par exemple. C’est quelque chose qu’on peut faire. Vous avez un panneau, je vous montrerai tout à l’heure plus précisément comment ça se passe. Vous avez un panneau de propriétés pour chaque élément et vous pouvez lui attribuer un texte de remplacement. On appelle ça texte de remplacement sur du PDF, c’est l’alternative. Donc vous mettez ça sur une image, et c’est le texte qui sera lu à la place de l’image.

(Une personne du public demande si les explications correspondent au logiciel Acrobat Pro)

Sébastien : là les captures d’écran c’est sur Acrobat Pro. Si vous mettez une alternative d’image, quelqu’un qui va lire un PDF avec Acrobat Reader aura accès à cette alternative en mode consultation. Le travail qu’on va voir là pour le moment, les captures, c’est sur Acrobat Pro.

Donc là c’est la possibilité d’ajouter des équivalents textuels.

Retour au sommaire

Structure et relations (balisage)

Sébastien : vous avez quelque chose d’assez fort qu’on n’a pas dans du Flash, c’est la possibilité de structurer et de baliser les contenus : rajouter de la sémantique. Vous pouvez structurer des titres, des h1, h2, h3, comme on en trouve sur le Web. Vous pouvez, alors ici vous avez une capture d’écran, structurer vos tableaux de données. Pour chaque tableau vous pouvez définir vos cellules, vos entêtes, vous pouvez relier vos cellules et vos entêtes, comme on le ferait sur du Web. Le résultat, c’est que vous consultez votre fichier PDF, votre tableau de données balisé avec un lecteur d’écran, vous avez la même, presque la même, restitution que si vous le faisiez sur un tableau HTML accessible. Vous êtes dans une cellule, vous avez la possibilité d’avoir un rappel de quelles sont les entêtes de la cellule du tableau.

Retour au sommaire

Ordre de lecture

Sébastien : un des points très très important dans PDF mais qui peut s’avérer très très long à mettre en place, c’est l’ordre de lecture. Par défaut l’ordre de lecture d’un fichier PDF qui ne serait pas accessible, il peut être parfois très très catastrophique. On a un exemple de graphique à l’écran, vous avez un graphique avec 4 colonnes, 4 nombres en haut, 4 nombres en bas. Et en fait les nombres qui vont ensemble c’est celui du bas, celui du haut puis celui du bas, celui du haut, parce que c’est des chiffres associés, c’est une légende et une valeur pour le graphique.

L’ordre de lecture classique, si votre document n’est pas balisé, c’est les 4 chiffres du haut, les 4 chiffres du bas. En gros vous auriez, 5000, 10000, 400000, etc etc et puis ensuite les années qui correspondent à ces chiffres à la suite. Donc il faut avoir une sacré bonne mémoire pour se souvenir quel était la troisième valeur pour la troisième année. Ça peut être très complexe. Là vous pouvez aussi baliser chaque élément et définir l’ordre de lecture complet sur la page.

Retour au sommaire

Entêtes de section et langues

Sébastien : et deux autres petits exemples, les entêtes de section j’en ai parlés, c’est les h1, h2, h3 qui permettent de satisfaire un critère de succès WCAG, qui est celui… C’est le 2.4.10, « est-ce qu’on a des entêtes qui permettent de faciliter la navigation ? ». L’idée c’est de structurer des entêtes à chaque contenu. Et à chaque fois comme ça on sait quel contenu à quelle entête il est associé dans mon document, à quel sous-titre il est associé. Et avec un lecteur d’écran par exemple, j’ai la capacité de naviguer d’entête en entête et pas avoir à parcourir tout le document. Quand j’ai une entête qui m’intéresse, je lance la lecture sur les contenus qui sont en-dessous.

On peut définir aussi par exemple la langue principale du document, mon document est-ce qu’il est en français, en anglais ? Donc est-ce que ma synthèse vocale va devoir prononcer ça en français, en anglais ? Et pareil pour les changements de langue, vous avez un document en français et un paragraphe ou un mot en anglais, si vous ne définissez pas de changement de langue, votre synthèse vocale qui est en français va prononcer votre texte anglais à la française, c’est incompréhensible. Donc là on peut définir des langues, des changements de langue, etc etc.

Retour au sommaire

Démonstration

Sébastien : le mieux c’est la démonstration, je vais vous montrer rapidement. Donc là, vous devez travailler sous Acrobat Pro. Y’a pas beaucoup de possibilités, vous êtes sous Acrobat Pro, j’ai un document PDF, c’est une plaquette. Une plaquette qui à la base était imprimée, ça vient d’un document print.

(Sébastien affiche un document PDF dans Acrobat Pro)

J’ai à gauche dans les panneaux d’Acrobat Pro, un panneau qui s’appelle balises. J’ouvre balises. Et vous allez remarquer des choses quand vous êtes intégrateur que vous connaissez déjà. Par exemple ici, j’ai une balise qui s’appelle h1, qui possède comme valeur « édito », une balise h2, une balise blockquote, très similaire à notre balise HTML blockquote. Puis des balises paragraphe, etc etc.

Donc vous pouvez baliser tous vos contenus, avec toutes les balises que propose Acrobat. Généralement y’a beaucoup de balises qu’on retrouve dans le Web, y’en a qui manquent, y’en a qui sont en plus. Alors, évidement, je ne vous le cache pas, si vous faites ça à la main, vous prenez votre document PDF. Celui-ci fait 8 pages, vous en avez pour la journée, voir plus. Ça peut être relativement, voire très très long. Je vous montrerai tout à l’heure une petite technique qui vaut ce qu’elle vaut mais qui peut accélérer un petit peu le travail.

Aurélien : ce qu’il faut savoir c’est que, là il a pris un PDF qui était déjà fait. La plupart des PDF c’est des PDF qui vous mettez en ligne mais qui sont produits pas avec Acrobat et qui sont produits généralement avec du Word ou avec de l’Open Office. Si votre Word ou votre Open Office est utilisé correctement et que la personne fait simplement « exporter le fichier avec les tags PDF » (c’est juste une option à cocher dans l’export), automatiquement les tags sortiront dans le fichier PDF correctement. Ce qui fait effectivement gagner beaucoup de temps, ou ils sont à reprendre à la marge, ou des petits correctifs, en tout cas vous gagnez au moins 75% du temps.

Sébastien : ça c’est un document qui a été balisé à la main. Il a été fait sous inDesign ou Xpress, je ne sais plus, par quelqu’un qui travaille dans la PAO, ensuite quelqu’un est passé derrière pour le baliser à la main.

Un autre petit exemple, alors ici vous avez le tableau de données. Il faut que j’affiche les bons panneaux sinon je ne vais pas m’en sortir. Vous avez le tableau de données, avec une option qui s’appelle retouche de l’ordre de lecture, ça n’a rien à voir mais c’est des problèmes de conception d’Acrobat Pro. Vous allez pouvoir accéder à la propriété du tableau. Pour chaque cellule de votre tableau vous pouvez définir si c’est une cellule d’entête, un th, si c’est une cellule de données, un td. L’étendue, alors l’étendue par exemple, ma cellule d’entête c’est étendue rangée parce que ici on a une entête th qui est l’entête de toute la ligne, donc étendue sur la rangée. Ce qui veut dire que toutes les cellules qui sont sur la même ligne appartiennent à cet entête. Et vous faites ce travail pour tous les entêtes, et pour toutes les cellules.

Aurélien : en fait, on dit c’est long à faire, mais vous feriez cette page en HTML, ben c’est ce que vous feriez. Vous créeriez un tableau, vous feriez des td, des th, vous avez les attributs qui vont bien, … On est obligé de refaire la même chose, sauf que là au lieu de le créer de zéro, on le refait sur un document existant.

Sébastien : voilà, en gros c’est ça. Vous prenez un document HTML qui n’est pas structuré du tout, et vous le structurez.

Et enfin, le panneau ordre de lecture, c’était celui-ci. Ici par exemple, une fois que vous avez balisé tous vos éléments, vous êtes capables dans une petite arborescence de les trier pour afficher leur ordre de lecture. Ici sur mon graphique, on a redéfini la lecture pour qu’il puisse se lire de façon cohérente.

(Sébastien change de document PDF à l’écran)

Là, je suis sur un deuxième document PDF qui représente à peu près 95% des documents que vous allez trouver sur le Web, qui sont des documents PDF qui n’ont pas été balisés, qui n’ont aucune balise. Vous avez une petite option qui peut être intéressante dans Acrobat. Alors options avancées, accessibilité, ajouter des balises au document. Et alors là, Acrobat Pro va faire le travail pour vous, donc ça peut être catastrophique. C’est un document qui fait 24 pages, voilà il vient de terminer. Il m’a créé mes balises, il m’a identifié une première figure qui doit être le logo, effectivement. Ensuite il m’a quand même identifié automatiquement mon h1, celui qui est juste en dessous il l’a mis en h3, ensuite une figure. Les alternatives des figures il ne va pas les faire pour vous, ça évidemment il faudra repasser derrière. Mais ça peut être un outil qui est quand même intéressant. Ça ne coute rien, vous prenez votre fichier PDF, vous générez le balisage, vous regardez ce que ça donne. C’est parfois très catastrophique, j’ai des documents PDF où il balise un paragraphe par mot. Mais ça peut être aussi, là par exemple sur ce document, on a quelque chose d’assez propre. Vous avez quelques balises à modifier, des alternatives à rajouter sur les images. Le travail finalement il n’est pas si conséquent.

Donc ça ne coûte rien d’essayer, d’essayer de baliser un document PDF.

Retour au sommaire

Depuis vos outils de création

Sébastien : pour terminer sur cette partie, parce qu’on n'est pas très très en avance, comme Aurélien l’a dit, y’a pas mal de choses qui ont été faites, surtout sur Office, alors un peu moins efficace sur Open Office mais vous structurez votre document Word, vous générez un PDF avec les options d’accessibilité, vous retrouvez un document PDF qui est vraiment très très bien. On peut mettre des alternatives aussi sur des images sur des documents traitement de texte.

Sur inDesign, sur Xpress, vous pouvez aussi, alors sur inDesign surtout. Vous avez sur les ressources qu’on a mises en fin de slides un petit guide édité par Adobe qui explique comment baliser un document depuis inDesign. Si on peut former le graphiste print qui s’occupe de la création du inDesign. Si vous avez 10 pages qui sont faites sur le même modèle, ça évite de faire 10 balisages différents, vous balisez juste le modèle. C’est assez long, c’est parfois un peu complexe mais ça vaut le coup aussi de se pencher dessus, de regarder si c’est faisable.

Aurélien : en gros c’est des règles de nommage à suivre quand vous nommez vos calques dans inDesign. Si vous avez un titre h1, vous nommez votre calque h1 et automatiquement quand il sera exporté, il sera exporté avec la balise h1, etc etc. C’est pas que ça, mais en partie c’est ça.

Sébastien : et j’avais mis un petit point API, peut être qu’on aura aussi des évolutions dans ce sens là. À ma connaissance on n’a pas grand-chose en API qui génère du PDF balisé, voire rien du tout.

Aurélien : Adobe a annoncé une collaboration entre eux et une société qui s’appelle Paciello Group, qui est une société qui travaille dans l’accessibilité, dont on a certains exemples qui sont dans les ressources, et une autre société pour produire justement une API permettant de le faire.

Sébastien : je crois que l’article on l’a mis dans les ressources aussi.

Retour au sommaire

Javascript

Ange ou démon ?

Aurélien : on va passer sur Javascript assez rapidement, on est obligé de le traiter, on est un petit peu en retard. Javascript c’est un peu comme le Flash. Ange ou démon ? Parce que pendant longtemps on a dit, Javascript, lecteurs d’écran, c’est pas les meilleurs amis du monde. Ce qui est totalement faux. Ou alors on a dit des aberrations comme « les personnes handicapées n’ont pas Javascript ». Je ne suis pas une personne handicapée et des fois je n’ai pas Javascript et je connais plein de gens handicapés qui ont Javascript à l’inverse. C’est des gens comme tout le monde, y’a aucune raison qu’ils désactivent Javascript. Les lecteurs d’écran, de plus en plus, gèrent correctement Javascript. Par exemple Jaws va vous signaler quand il y a des options comme onmouseover ou des choses comme ça. Il va vous annoncer les évènements, donc même le Javascript par moment est détecté par le lecteur d’écran.

Retour au sommaire

ARIA

Aurélien : maintenant c’est vrai que ça peut rester problématique dans certaines conditions notamment sur tout ce qui va être… ben ce qu’on appelle le Web 2 entre guillemets : tout ce qui va être Ajax. Pourquoi ? Parce qu’Ajax qu’est ce que ça fait ? Vous savez ce que ça fait, je vais le répéter rapidement. C’est juste que ça met à jour une zone de contenu dans votre page, le seul problème c’est que le lecteur d’écran généralement, du moins sur les anciennes versions, ne voit pas cette mise à jour. Il prend la page en cache au départ, y’a une mise à jour qui est faite via Ajax, la mise à jour n’est pas restituée au lecteur d’écran. Donc le lecteur d’écran forcément, ne peut pas avertir l’utilisateur qu’il y a eu une mise à jour.

Donc le W3C a développé un langage, une spécification, c’est pas un langage, qui s’appelle ARIA (NDT : Accessible Rich Internet Applications). ARIA qu’est ce que ça fait ? Ça gère des rôles, des états et des propriétés.

Les rôles globalement ça va être de rajouter de la sémantique sur quelque chose qui n’a pas de sémantique. C'est-à-dire que par exemple vous allez pouvoir faire un span et vous allez lui mettre un rôle bouton. Automatiquement il va être annoncé comme étant un bouton par le lecteur d’écran. Vous avez tout un jeu de rôle qui existe, des rôles calendar, des rôles slider, des rôles grid, … Il doit y en avoir une cinquantaine, voire plus. Vous pouvez quasiment refaire des applications entières rien qu’en utilisant les rôles proposés par ARIA.

Les états ça va vous permettre de gérer, un petit peu comme vous aviez les onclick, onfocus, etc. Ça va vous permettre de gérer des états. Donc par exemple, on pourrait faire un span role="button", avec un aria-pressed="true" pour signaler que mon bouton, au moment où l’utilisateur va l’activer, il est en train d’être activé.

Et enfin, on a des propriétés qui vont permettre, pareil, de rajouter du lien entre les éléments. Par exemple on a aria-labelledby ça va permettre de spécifier qu’un texte ou une zone de votre page sert de titre ou de label à un autre élément. Par exemple vous pourriez avoir un champ de formulaire en haut à droite de votre page et un texte de label en bas à droite, et automatiquement si vous avez bien mis les propriétés aria-labelledby le lecteur d’écran va pouvoir aller récupérer ce texte là et aller le lire.

Retour au sommaire

Démonstrations

(NDT : adresse de la page utilisée en démonstration www.accessibletwitter.com)

Sébastien : on va faire une petite démonstration rapide et après on aura fini. Alors là par exemple vous avez, je vais prendre celle-ci. Un petit champ sur le site Accessible Twitter, vous saisissez votre petit twitt en direct et vous avez un petit message d’avertissement au-dessus du champ qui met à jour le nombre de caractères restants sur la saisie. Là il m’en reste 32. C’est quelque chose qui va être mis à jour, je saisis et automatiquement le nombre se décompte et c’est quelque chose qui, comme Aurélien l’a dit, ne va pas être annoncé par un lecteur d’écran.

(Sébastien active le son du lecteur d’écran puis saisi un texte dans le champ)

(Synthèse vocale : J, space. Thirty.)

Sébastien : vous avez entendu ?

Aurélien : il a annoncé effectivement qu’il restait 30 caractères de saisie. Parce que, si on regarde le code, sur cette application ils ont utilisé ARIA effectivement. Pour renvoyer l’information au lecteur d’écran et lui dire, attention en Javascript on a détecté qu’il ne restait plus que 30 caractères et donc automatiquement lancer l’alerte au lecteur d’écran via la propriété ARIA.

(NDT : adresse de la page utilisée en démonstration search.yahoo.com)

Sébastien : un dernier petit exemple avec l’auto-complétion par exemple.

(Sébastien écrit une recherche dans le formulaire de recherche)

(Synthèse vocale : P, A, R)

Sébastien : alors les lettres c’est mon lecteur d’écran qui les prononce.

(Synthèse vocale : I, S, Paris. Search suggestions; use the escape key to return to the search box.)

Sébastien : donc là il me précise que j’ai une liste de suggestions, c’est mon auto-complétion qui s’est activée, et je vais pouvoir naviguer dans l’auto-complétion.

(Synthèse vocale : link search for “toy r us”)

Sébastien : alors je ne vois pas du tout pourquoi ça sur Paris.

(Rires)

Aurélien : ça c’est l’API de Yahoo! Il faut leur demander.

Retour au sommaire

Librairies Javascript

Aurélien : voilà, assez rapidement sur ARIA. Il faut savoir que ARIA est de plus en plus pris en compte dans les librairies Javascript. C'est-à-dire que vous n’allez pas forcément avoir besoin à coder vous-même ARIA qui est assez compliqué à mettre en œuvre, mais simplement à utiliser ces librairies qui le mettent en œuvre nativement. Par exemple Dojo, tous les composants de Dojo peuvent être accessibles. JQuery, vous avez JQuery UI dans la prochaine version, la version 1.7, si je ne me trompe pas, va avoir certains composants qui le gèreront. Y’a tout un tas d’autres librairies, Ext JS le gère, GWT a certains composants qui le gèrent, YUI le gère sur pas mal de ses composants. Nativement quand vous utilisez ces composants là, vous n’avez rien à faire, l’ARIA est déjà embarqué par ces éléments là.

Retour au sommaire

Conclusion, et les autres ?

Aurélien : on va arriver sur la conclusion. L’idée c’est vraiment, il ne faut pas hésiter à innover, il ne faut pas hésiter à utiliser ces nouvelles technologies et ne pas avoir peur à faire des choses, même si elles ne sont pas parfaitement accessibles. Effectivement y’a des guidelines, il faut respecter ces guidelines tant qu’on le peut, mais y’a des choses qu’à l’heure actuelle vous ne pourrez pas faire. Mais ça ne veut pas dire qu’il ne faut pas les faire pour autant. Les personnes handicapées, c’est pas des monstres, elles veulent que les choses soient accessibles, c’est normal, c’est un droit. Mais si c’est pas accessible, elles peuvent demander à ce que ça le devienne, mais si en tout état de cause, à l’heure actuelle c’est pas accessible, vous pouvez pas sortir de votre chapeau une technique pour le rendre accessible. Mais ça ne veut pas dire qu’elles ne veulent pas que vous produisiez. Si effectivement pendant 10 ans, vous continuez à produire du contenu avec la même technologie et que personne n’a rien fait pour que cette technologie devienne accessible, c’est là que ça va devenir un problème.

Utilisez les technologies actuelles avec les fonctionnalités d’accessibilité qui existent, que ça soit Flash, que ça soit PDF, que ça soit ARIA comme on l’a vu. Il faut déjà les prendre en compte. Et déjà quand tout le monde fera du Flash accessible, de l’ARIA ou autres, les personnes handicapées auront déjà un gain énorme en terme de navigation.

Aurélien : juste, dernier mot, puisqu’on va passer sur les questions, sur les autres technos. On avait des petites démos, on n’aura pas le temps de vous les faire.

Rapidement sur Silverlight, qui est la nouvelle techno équivalente de Flash chez Microsoft. La version 1 n’était pas accessible du tout, la version 2 est beaucoup plus accessible, à condition évidemment que vous soyez pour l’instant sur Windows. Vous avez par exemple la possibilité de faire… Dans une des démos il y a un lecteur Daisy, qui est un format de livres pour les personnes malvoyantes ou non-voyantes qui est entièrement en Silverlight qui est utilisable comme Flash au clavier, qui est bien restitué aux lecteurs d’écran etc etc.

JavaFX, pareil, il prend en compte l’accessibilité, comme avant, le Java pas FX.

Et HTML 5, il y a eu des gros efforts. Au départ c’était assez catastrophique, il y a de gros efforts qui sont en train d’être fait. Par exemple il y a encore pas mal de discussions un peu trollesques dans les listes de discussion. Ça sera forcément résolu puisque de toute façon, il y a des process dans le W3C qui font qu’une spéc. ne peut pas sortir si les autres working groups n’ont pas donné leur avis dessus. Je pense que le WAI ne pourra pas laisser passer des choses non accessibles. Et notamment ARIA, qui est à priori en train d’être intégrer au moins en très grande partie directement dans HTML 5, parce qu’on avait des éléments qui étaient doublons et qu’il ne servait à rien d’avoir des deux côtés ces éléments là.

Retour au sommaire

Questions

François : questions ? Vous avez 3 minutes.

Benjamin De Cock (public) : si un client vient avec une demande de conception d’application Web et qu’il y a le côté accessibilité qui est mis en avant idéalement faudrait aller plus vers quoi ? Si c’est vraiment un point important dans l’application hormis tout le côté libre de droits, juste l’accessibilité, on y arrivera plus vite avec du Javascript, ARIA, etc ou du Flex ou ?

Aurélien : le choix technologique il n’est pas dépendant de l’accessibilité, il est dépendant de tes spécifications et ce que doit faire ton application. Si moi mon truc c’est de faire des animations, pour moi en tant que concepteur à l’heure actuelle le plus simple ça va être de le faire en Flash. Donc je le ferai en Flash. Si par contre je maitrise les animations via Javascript, je le ferai en animations Javascript.

Benjamin : mais ce côté-là, côté technique à part, côté animation à part, …

Aurélien : purement accessibilité ?

Benjamin : oui.

Aurélien : purement accessibilité. C’est sur que du HTML et du Javascript, ça restera plus accessible que du Flash. Avec ARIA effectivement ça sera toujours plus accessible que du Flash. On a vu que du Flash on peut faire certaines choses mais y’a des éléments qu’on ne peut pas faire.

Une personne du public : c’est pas une question, c’est juste pour compléter ce que vous disiez. Flash finalement ce qu’on lui reproche c’est plus le fait qu’il est gourmand en ressources pour certaines animations vidéos, et ça c’est peut-être un frein justement à l’accessibilité. Le fait que sur une config, ça va un peu ramer.

Aurélien : quoi, que Flash soit en termes de poids un frein, alors que c’est pour l’instant le format qui est le plus utilisé ? Je ne sais pas, je n’ai pas de chiffres sur ces éléments là donc je ne peux pas te dire si c’est bien ou pas bien.

La personne du public : je parle de la gestion des ressources, des fois sur certains ordinateurs portables, ça arrive que ça puisse ramer un peu sur du Flash.

Aurélien : c’est justement le concept de WCAG 2.0. Dans WCAG 2.0, ils font la distinction assez claire entre ce qui est de l’ordre de l’interopérabilité et de l’ordre de l’accessibilité. Pour eux, le fait de ne pas avoir le lecteur Flash n’est pas un problème d’accessibilité.

Le fait de ne pas avoir suffisamment de débit pour afficher des ressources, mais tu n’as pas assez de débit de connexion ou de puissance dans ton ordinateur. C’est pas un problème d’accessibilité. Pour eux ça va être un problème d’interopérabilité. J’ai un ordinateur qui fonctionne lentement, que je sois une fonctionne handicapée ou une personne non handicapée, j’ai un ordinateur qui fonctionne lentement. Je ne suis pas plus discriminé dans un cas que dans l’autre.

Je ne dis pas qu’il ne faut pas prévoir le coup, mais en tout cas ça n’est pas une discrimination envers les personnes handicapées, le fait d’avoir ou de ne pas avoir un plugin.

Sébastien : je comprends un petit peu la remarque, un des problèmes peut être si par exemple vous voulez faire une vidéo avec en synchronisés des sous-titres, un fichier d’audio-description et une autre vidéo qui serait une vidéo en LSF, techniquement en Flash, effectivement ça va être délicat. Et ça va consommer beaucoup beaucoup de ressources, parce que synchroniser deux vidéos en Flash c’est quelque chose de vraiment très gourmand. Donc là oui, on peut être technologiquement bloqué si on veut afficher tout ça en même temps. Mais aujourd’hui c’est fait, faut avoir des machines assez puissantes pour pouvoir les consulter.

François : bien, je vous remercie. Vous donnez un des bouquins ?

(Applaudissements)

François : une petite chose, je vous prie de nous excuser, mais on a un petit problème de capacité de salle comme vous le voyez. On a été obligé de fermer la porte et de refuser du monde pour des questions de sécurité. Donc je vous demanderai de respecter les horaires et de rentrer dans la salle le plus rapidement possible si vous êtes vraiment intéressés par la conférence parce que vous risquez d’avoir des problèmes de places, en tout cas dans le petit amphi.

Retour au sommaire

Ressources

WCAG 2.0

Flash

Lectures

Démonstrations

PDF

Lectures

Démonstrations

Javascript

Lectures

Démonstrations

Autres

Retour au sommaire

Crédits

Photos, merci à :

Police d'écriture ArsenaleWhite : Jonathan Calugi, Francesco Canovaro, Cosimo Lorenzo Pancini, Andrea Mi, Debora Manetti, Katiuscia Mari.

Retour au sommaire