[Vidéo] « Faire fonctionner la technologie pour tous : une introduction à l’accessibilité numérique »
Les bonnes vidéos de vulgarisation de l’accessibilité numérique sont au moins aussi rares que le léopard des neiges.
Si bien que lorsque nos voisins britanniques du projet Fix the Web ont publié l’excellente vidéo « Make Technology Work for Everyone: introducing digital accessibility » dans le cadre de la dernière journée mondiale de sensibilisation à l’accessibilité numérique (GAAD), Atalan a souhaité soutenir l’initiative en traduisant en français ses sous-titres synchronisés ainsi que sa transcription textuelle complète.
Un grand merci à James Beecher pour nous avoir autorisé à relayer cette vidéo et sa transcription sur notre blog !
Merci également à toutes les personnes impliquées dans sa réalisation chez Dig Inclusion, Digital Accessibility Centre, Citizens Online, Tinmouse Animation Studio et Fix the Web.
Transcription textuelle complète
Cette page fournit une transcription textuelle complète de la vidéo « Faire fonctionner la technologie pour tous : une introduction à l’accessibilité numérique » du projet Fix The Web [NDT : Réparer le Web].
La transcription ci-dessous est structurée ainsi :
- Une introduction à l’accessibilité numérique, et pourquoi c’est important.
- 15 astuces pour aider les personnes qui réalisent des sites web, des applications, des logiciels et des documents, à améliorer l’accessibilité.
- La conclusion du film.
Une introduction à l’accessibilité numérique, et pourquoi c’est important
Le titre « Une introduction à l’accessibilité numérique » est affiché, tandis qu’une piste sonore joyeuse composée d’un strumming de guitare et de sons synthétisés faisant penser au xylophone commence. La musique perdure tout au long de la vidéo.
Sous le titre, des symboles représentant les difficultés cognitives, le handicap visuel, un smartphone, le handicap auditif, une popup publicitaire, ainsi qu’un CAPTCHA inaccessible sont affichés.
La voix off est celle de James Beecher, du projet Fix The Web.
La technologie numérique a créé des opportunités incroyables pour la communication, le partage d’informations, les services bancaires et le shopping.
Deux personnages stylisés se font face debout et à distance, de chaque côté de l’écran. Des antennes satellites situées derrière eux s’envoient mutuellement des faisceaux. Des symboles apparaissent pour représenter la communication, le partage, et le commerce.
Mais les utilisateurs de vos technologies numériques ont différents besoins.
Les antennes satellites s’éclipsent et deux nouveaux personnages apparaissent. Il y a maintenant quatre personnages aux traits très simplifiés. Leurs visages laissent le loisir à l’utilisateur de s’imaginer leurs yeux, leurs oreilles et leurs bouches, plutôt que de les représenter explicitement. L’un des personnages porte des lunettes noires et une canne blanche, l’un d’eux est en fauteuil roulant, le troisième est petit et trapu, tandis que le dernier est grand et mince. Un disque, un triangle, une forme arrondie et un carré, apparaissent derrière ces personnages, comme un moyen de représenter leur diversité.
Gardez cette diversité à l’esprit, ou bien des millions de gens vont trouver difficile voire impossible d’accéder à votre contenu – des personnes que vous voulez pourtant toucher.
Un écran d’ordinateur à l’intérieur d’un panneau octogonal de type « Stop » apparaît au centre de l’écran, et des « personnages » encore plus stylisés, qui ressemblent cette fois à des bouteilles de différentes couleurs, arrivent en bondissant depuis la gauche et la droite en direction de cet écran d’ordinateur, pour finalement se faire renverser brutalement par le panneau « Stop ».
L’accessibilité est importante pour au moins 60 % de votre audience, et la prendre en compte signifie que vous allez construire quelque chose qui est mieux pour tout le monde, c’est donc bon pour les affaires !
Le panneau « Stop » s’efface, mais l’écran d’ordinateur reste. Le mot « Accessibilité » apparaît tandis que deux tribunes de stade arrivent depuis chaque côté de l’écran. Elles sont remplies de ces bouteilles qui étaient utilisées pour représenter les personnages, et des banderoles semblent être jetées dans les airs par la foule. Une ligne qui évoque une représentation de la performance apparaît dans un graphique sur l’écran de l’ordinateur et monte tout d’abord lentement, puis très vite, jusqu’à dépasser le bord supérieur de l’écran.
L’accessibilité numérique est également une obligation légale.
Les représentations d’un document officiel et du marteau d’un juge apparaissent.
Il y a déjà eu des procédures juridiques intentées contre les sites web qui excluent les utilisateurs, qui peuvent être daltoniens, ou ne pas avoir le contrôle de leurs bras ou mains, avoir des particularités cognitives, ou encore des handicaps visuels ou auditifs.
Des symboles apparaissent pour représenter ces différents handicaps.
C’est mieux de penser à l’accessibilité dès le début d’un projet.
Voici quelques astuces :
15 astuces pour aider les personnes qui réalisent des sites web, des applications, des logiciels et des documents, à améliorer l’accessibilité.
Une liste de tâches sur papier ligné est affichée aux côtés d’un crayon à papier, d’un taille-crayon et du mot « Astuce », sur un Post-it.
Astuce 1
Si vous commandez une application, un logiciel ou un site web, intégrer l’accessibilité dans les clauses du contrat – référez-vous aux Web Content Accessibility Guidelines 2.0 (WCAG 2.0) [NDT : Recommandations d’Accessibilité pour les Contenus Web] et au Standard Britannique 8878 [NDT : équivalent britannique du Référentiel Général d’Accessibilité pour les Administrations 3.0 (RGAA 3.0) français].
Un smartphone, un écran d’ordinateur, ainsi qu’un CD et sa boîte sont affichés. Les noms des standards apparaissent sur l’écran d’ordinateur en caractères larges.
Idéalement, incluez des utilisateurs handicapés lors de vos tests.
Un personnage est montré en train d’aiguiller différents appareils numériques alors que ces derniers défilent face à lui sur un tapis roulant, comme lors d’un test de contrôle qualité.
Astuce 2
Si vous utilisez une plateforme en ligne pour créer votre site web, utilisez des thèmes et des extensions « accessibles », et gardez l’astuce suivante en tête.
Un groupe de thèmes stylisés selon des formes et des structures différentes est affiché, et un curseur de souris les survole. Les thèmes non accessibles deviennent rouges, et le dernier devient vert tandis que le mot « Accessible » apparaît.
Astuce 3
Concevez les pages de façon à ce que les utilisateurs puissent customiser leur expérience, en changeant les couleurs, la taille des textes ou des boutons. Optez pour des interfaces adaptatives afin qu’elles fonctionnent sur des appareils divers.
Différents appareils sont affichés. L’animation se concentre sur une tablette, et montre une main en train de faire glisser une boîte carrée contenant le texte « 100 % » afin de l’agrandir. Alors que la taille de la boîte augmente, le nombre augmente à « 200 % ».
Astuce 4
Indiquez toujours aux utilisateurs où ils sont et comment continuer leur navigation ailleurs.
Un marqueur stylisé « Vous êtes ici » apparaît en bas de page. Il se change en une flèche pointant vers le haut. L’animation défile jusqu’au sommet de la page.
Créez des voies d’accès alternatives adaptées aux différents besoins, comme un lien « Aller au contenu ».
Un lien « Aller au contenu » est affiché au sommet de la page, au-dessus d’un menu stylisé. Une flèche apparaît à ses côtés, et l’animation défile jusqu’au niveau du contenu principal de la page, qui change de couleur.
Astuce 5
Assurez-vous que chaque action qui peut être effectuée avec une souris puisse également être réalisée en utilisant seulement le clavier.
L’écran se sépare en deux pour montrer l’écran d’une tablette et un clavier. Un curseur sélectionne un bouton à l’écran et clique dessus. Une main est ensuite montrée pressant la touche « Entrée » du clavier pour activer le même bouton (qui réagit).
Les utilisateurs qui utilisent seulement le clavier ont besoin de savoir à chaque instant où ils se trouvent lorsqu’ils naviguent avec la touche « Tabulation », et l’ordre de tabulation doit être logique.
L’écran toujours divisé, l’affichage de la tablette défile vers le sommet de la page jusqu’au menu montré plus tôt. On voit l’utilisation du clavier pour naviguer à travers les différents éléments, qui sont mis en relief par l’intermédiaire d’un effet visuel passant successivement de l’un à l’autre.
Testez s’il est bien facile de naviguer en utilisant uniquement les touches « Tabulation », « Entrée », « Espace », et les flèches de navigation du clavier.
L’animation se concentre sur le clavier, et ces touches sont mises en avant, avec un texte affiché sur chacune d’entre elles.
Astuce 6
Avez-vous déjà été frustré par des objets mobiles, des publicités qui apparaissent subitement ? Cela n’est pas seulement gênant – un contenu clignotant peut causer des crises d’épilepsie, tandis que certaines personnes souffrant de déficiences cognitives trouvent extrêmement difficile de se concentrer s’il y a des distractions.
Des pop-up de toutes formes et couleurs apparaissent lentement, et se déplacent à la surface de l’écran. Les mentions « Frustrant », « Ennuyeux » et « Distractions » apparaissent en caractères larges dans trois d’entre elles.
Laissez le contrôle à l’utilisateur – fournissez un bouton « Pause », et ne lancez pas automatiquement les vidéos ou les sons.
Un bouton « Lecture/Pause » est affiché dans une nouvelle fenêtre, aux côtés d’une fenêtre contenant une vidéo en pause. Lorsqu’un doigt presse le bouton, la vidéo est lancée.
Astuce 7
Choisissez un lecteur vidéo qui vous permette de rajouter des sous-titres synchronisés, et fournissez une transcription textuelle, afin de rendre les contenus audio et vidéo accessibles. Intégrez des descriptions de toutes les informations visuelles importantes, au même titre que les voix.
Une version stylisée d’un lecteur vidéo apparaît et les mots « Sous-titres synchronisés et transcriptions textuelles permettent aux utilisateurs de lire ce qui se passe si ils ne peuvent pas entendre ou comprendre la vidéo. » sont écrits dans une fenêtre qui représente le système de réalisation de sous-titre synchronisés.
Astuce 8
Si une image est importante, qu’elle contient du texte ou est entourée d’un lien, décrivez-en la fonction grâce à son « alternative textuelle », qui pourra être lue par les utilisateurs déficients visuels à l’aide d’un logiciel de lecture d’écran.
L’image stylisée d’un oiseau et d’une balle apparaît à l’écran. À leurs côtés, des lignes de textes apparaissent. Ce texte vient ensuite se glisser totalement derrière l’image, et on le voit réapparaître grâce à un effet d’ouverture circulaire depuis le centre de l’image. Alors que cette animation se déroule, des haut-parleurs apparaissent, accompagnés de symboles qui représentent les ondes sonores.
Astuce 9
Votre contenu est-il écrit dans un langage facile à comprendre ?
Le texte « Votre contenu est-il adéquatement compréhensible ? » est affiché. L’expression « adéquatement compréhensible » est barrée et remplacée par « facile à comprendre ».
Employez des phrases courtes et simples, afin de favoriser la lisibilité et de toucher un large public.
La foule dans les tribunes du stade affichées plus tôt réapparaît sous les mots « Votre contenu est-il facile à comprendre ? ».
Astuce 10
Donnez un titre à chaque page, et structurez votre contenu à l’aide de niveaux de titres, de paragraphes, et de listes. Ajoutez du « balisage » pour permettre une navigation plus simple et décrire les caractéristiques de vos contenus à des personnes qui ne peuvent pas les voir – cela s’applique tout autant aux documents Word, PDF, qu’aux pages web.
Un écran s’affiche, dans lequel une recette de soupe simple apparaît. Un curseur sélectionne le nom de la recette et le balise en tant que « Titre de niveau 2 ». Le code HTML apparaît ensuite. Cet exemple montre l’emploi de balises de listes ordonnées et non ordonnées, d’emphase discrète et d’emphase forte, et de titres.
Astuce 11
Assurez-vous que les liens ressortent clairement du texte environnant et permettez à l’utilisateur de savoir si le lien va s’ouvrir dans une nouvelle fenêtre ou déclencher le téléchargement d’un document. Les liens doivent être concis et explicites, de façon à ce que les utilisateurs puissent comprendre où ils pointent même s’ils sont lus indépendamment du reste de la page.
Un bloc de texte relatif à l’animation et comprenant des liens est affiché. Tout d’abord, les liens sont soulignés et affichés en rouge afin de contraster avec le texte noir. Mais les intitulés des quatre liens sont « (en savoir plus) », « (lire la suite) », « (lire la suite) » et « (lire plus) ». Ces liens sont barrés et le texte qui les précède est souligné et devient rouge – les liens deviennent respectivement « Journée Globale de Sensibilisation à l’Accessibilité », « Citizens Online », « Dig Inclusion » et « the Digital Accessibility Centre ».
Le texte s’efface et laisse sa place à un lien « Accessibilité » – un curseur clique sur ce lien.
Astuce 12
Testez les rapports de contrastes entre les couleurs d’avant-plan et d’arrière-plan afin de vous assurer que le texte pourra être lu facilement par les personnes daltoniennes ou déficientes visuelles.
Une version stylisée d’un outil de test des contrastes de couleurs est montrée, et une croix rouge devient une coche verte suite à l’optimisation de l’une des deux couleurs de la combinaison testée.
Astuce 13
Dans une page web, lorsque le temps imparti arrive à échéance avant que les internautes n’aient pu renseigner complètement les formulaires, cela peut être une expérience franchement frustrante – donnez à vos visiteurs la possibilité d’étendre la durée de la session s’ils le souhaitent.
Un personnage tenant une tablette apparaît frustré tandis qu’un compte à rebours décompte les secondes. Les mots « Laissez les utilisateurs étendre leur session » apparaissent sous forme de bouton, qui permet de réinitialiser le compte à rebours lorsqu’il est activé.
Astuce 14
Exprimez les optimisations d’accessibilité que vous avez mises en place et pourquoi, dans une déclaration d’accessibilité.
Un curseur est montré en train de sélectionner un onglet dans une fenêtre de navigateur stylisée et le texte « Déclaration d’accessibilité » apparaît.
Fournissez des moyens simples afin que les utilisateurs puissent vous contacter s’ils rencontrent des difficultés.
Les mots « formulaire », « email » et « appel » sont affichés aux côtés de versions stylisées d’un formulaire, d’un clavier et d’un smartphone.
Astuce 15
Les protections anti-SPAM comme les CAPTCHA peuvent bloquer des clients potentiels et pas seulement des robots spammeurs. Privilégiez les alternatives – comme les problèmes de logique basés sur du texte, ou de simples confirmations que l’utilisateur est un être humain.
L’animation se concentre sur un formulaire, défile vers le bas, et affiche un CAPTCHA dans une fenêtre en bas de ce dernier. Passer le CAPTCHA implique que l’utilisateur puisse déchiffrer les mots déformés dans une image. Un robot spammeur de type « Space Invader » et un personnage apparaissent, ils secouent tous les deux la fenêtre du CAPTCHA. Le CAPTCHA est mis à jour pour proposer cette fois la question « De quelle couleur est l’herbe ? » et le personnage a l’air heureux. La réponse « Verte » apparaît et le personnage célèbre son succès en secouant les bras en l’air. Pendant ce temps, le robot a l’air malheureux et finit par disparaître.
La conclusion du film
Faisons en sorte de rendre les technologies numériques aussi utilisables et inclusives que possible – nous en profiterons tous !
Le CAPTCHA est remplacé par un large « ruban » qui entraîne le personnage vers un nouvel écran avec les trois autres personnages et les différents appareils numériques. Le « ruban » se comporte ensuite comme un morceau de ficelle, et s’enroule autour d’une tribune de stade qui déborde de spectateurs – et des banderoles apparaissent à nouveau.
Cette vidéo ne peut tout couvrir, et la technologie ainsi que les bonnes pratiques sont sans cesse en évolution. Pour davantage d’aide et d’information, rendez-vous sur citizensonline.org.uk/accessibilitytips.
Le texte « citizensonline.org.uk/accessibilitytips » est affiché en caractères larges.
Merci au Digital Accessibility Centre, Dig Inclusion, et au groupe de pilotage Fix The Web pour cette animation, réalisée par Tinmouse.
Les logos des différentes organisations apparaissent sous le mot « Merci ». La musique s’efface lentement.
Vos commentaires
-
Trés instructif
-
Bonjour,
Nous venons de publier une vidéo similaire de découverte de l’accessibilité numérique : L’accessibilité numérique à toutes les étapes d’un projet.
Sébastien.
