La positive alt-itude ! Un outil d'inclusion pour votre accessibilité

[Musique] [Applaudissements] [Voix IA] Titre niveau 1 "La positive altitude" [Voix IA] Titre niveau 2 "Un outil d'inclusion pour votre accessibilité" [Voix IA] Graphique image décorative Cette voix que vous venez d'entendre est entendue par des personnes tous les jours pour utiliser les outils que vous utilisez tous les jours : le téléphone, l'ordinateur, les différents médias...

Ça leur sert à naviguer et avoir les mêmes informations que vous avez quand vous regardez votre écran et qu'elles ne peuvent pas forcément voir.

Pour que cette voix soit pertinente il faut être pertinent dans la construction de vos sites web, vos pages PDF, vos contenus, vos articles, vos blogs...

Pour ça il y a certaines normes d'accessibilité qui existent, que certains peuvent connaître (WcAG, RGAA, etc.) Par exemple, pour que ce soit cohérent, là vous avez entendu "Titre niveau 1, Titre niveau 2" parce que il y a un titre principal (le premier) et un sous-titre.

C'est des choses importantes pour comprendre la sémantique de la page pour la personne qui ne la voit pas.

Vous avez aussi entendu qu'il y avait une image décorative, parce qu'on peut voir qu'elle ne sert à rien, donc elle n'est pas décrite.

Comme vous voyez, je vais vous parler de l'accessibilité, et de comment on remplit ces descriptions alternatives d'images.

D'abord, qui vous parle ? Comme Anaïs vous l'a dit, je suis développeuse depuis 5 ans, vous pouvez me trouver sur ces réseaux où je râle beaucoup, mais j'essaie aussi de partager les choses que j'apprends et qui peuvent à mon sens être utile pour vous ou pour vos utilisateurices.

Commençons d'abord : c'est quoi un "alt" ? On parle d'un "alt" quand on parle de texte alternatif, de description d'image.

C'est quelque chose que vous pouvez voir dans les balises HTML, vous avez l'attribut "alt" comme ce que vous pouvez voir là : la photo d'un chaton roux qui est au milieu d'un article.

Sur Twitter vous pouvez voir sur certaines images en bas à gauche un petit bouton "alt" c'est quelque chose qui rend visible cet outil qui normalement est invisible pour ceux qui voient justement, parce que vous ne l'utilisez pas.

Il sert pour les personnes qui ne voient pas à comprendre le contenu de l'image, et pour pouvoir le comprendre il y a pas d'automatisation, c'est pas le réseau qui le met, c'est vous qui le remplissez, mais il y a pas de possibilité de demander à une IA de décrire l'image pour vous...

Enfin, vous pouvez sauf que la description va pas forcément être très pertinente.

Une personne potentiellement malvoyante ou aveugle, ou des personnes qui ont des difficultés à lire parce qu'elles sont dyslexiques, qu'elles ont des problèmes neurologiques, qu'elles sont dysorthographiques, ou d'autres soucis, peuvent utiliser ce qu'on appelle un lecteur d'écran ou un screen reader et qui fait la voix que vous avez entendue.

Je l'ai paramétrée pour que vous entendiez clairement le truc, mais ça peut être beaucoup plus robotique et beaucoup plus rapide pour les personnes qui ont l'habitude de l'utiliser.

Donc l'outil lit le contenu de la page, les titres, les paragraphes, les liens, les images...

et lorsqu'elle tombe sur une image comme ici avec une balise image, elle va chercher la balise "alt" et elle va décrire ce qu'il y a dedans.

S'il y a pas de balise elle va rien dire... enfin elle peut ne rien dire, ou selon les navigateurs elle peut dire qu'il y a une image mais pas ce qu'il y a dedans.

Donc quand est-ce qu'on met un "alt" et qu'est-ce qu'on met dans la balise ? D'abord quand est-ce qu'on met met un "alt" ? Tout le temps ! La petite subtilité c'est que même un "alt" vide est une information pertinente : quand le lecteur d'écran tombe sur un "alt" vide, il sait que c'est une image décorative enfin si c'est intentionnel que vous l'ayez mise vide.

C'est valable pour les articles de blog, les pages web que vous construisez vous-même, mais sur les réseaux c'est construit de manière à ce que si vous partagez une image sur un réseau social et que vous ne mettez pas de "alt", c'est comme si...

j'ai perdu mes mots...

le lecteur d'écran dira juste "image", et du coup la personne qui tombe sur votre contenu et l'image ne saura pas si c'est parce que c'est une image décorative ou si vous l'avez oublié.

Donc ça peut créer une très grande frustration et on voit beaucoup ça sur les réseaux sociaux.

Pour ce qui est de ce qu'on met dans la balise, il n'y a pas de règle unique.

Il faut mettre quelque chose de pertinent, mais ça peut être assez subjectif d'une personne à l'autre.

Donc je vais essayer de vous donner les clés pour qu'à mon sens, vous trouviez ce qui est pertinent à dire pour ces "alt" et après il faudra que vous travailliez un peu pour le faire en bonne intelligence.

Et plus vous le ferez, plus vous réussirez à à trouver ce qui est pertinent à dire.

Les questions à se poser c'est "pourquoi cette image existe ?" Quand vous mettez une image sur un article, vous avez un but pour la mettre, posez-vous cette question de pourquoi vous mettez cette image, pourquoi vous l'avez mise sur votre site, sur votre post, dans votre tweet...

Si c'est juste pour mettre de la décoration, pensez à le dire sur le réseau, enfin si c'est sur un réseau social pensez à dire que c'est une image décorative.

S'il y a un contenu pertinent, il faut quand-même expliquer ce qu'il y a.

Dites-vous qu'il faut que la personne qui tombe sur votre post, si elle ne voit pas le post, elle ait la même information que quelqu'un qui voit votre image.

Parfois en réfléchissant à ça, vous pouvez vous poser la question de savoir si c'est pertinent que vous mettiez cette image : si elle est juste décorative, et qu'elle brouille un petit peu votre message, peut-être que vous avez juste pas besoin de la mettre.

On est quand-même assailli de beaucoup de contenu, de beaucoup de pubs, de beaucoup de choses qui bougent...

Parfois juste rester frugal, ça peut être bien aussi.

Commençons avec quelques exemples : là on parle du "alt" dans un article d'actualité.

Imaginons qu'on est dans un événement politique, à votre avis, comment vous décririez cette image ? Est-ce qu'il y a quelqu'un qui aurait une idée ? Quelqu'un qui sait pas ? Non ? Personne ? "Assemblée de chatons devant un public, devant un micro" Oui, ça peut être ça, c'est vrai qu'il y a pas beaucoup d'informations précises dessus.

Alors moi j'ai mis : "c'est la photo du chaton Pixel qui prend la parole sur une estrade en face d'un public de X chatons dissipés".

C'est une bonne description quand on sait pas ce qu'il y a dessus, mais on peut penser... enfin, il faut une description succincte sur ce genre de choses pour avoir l'information pertinente.

L'information pertinente c'est qu'il y a une personne sur l'estrade, en l'occurrence un chaton, et si elle est au milieu d'un article qui parle de cette personne, c'est que c'est elle qui est à mettre en avant.

On peut mettre en avant qu'il y a un public, un certain nombre de personnes, par contre ça sert à rien de parler de la couleur des murs, du pelage des chatons, sauf si on est dans un événement de mode...

Ça sert peut-être à rien de dire que bizarrement, on est sur une assemblée de chatons mais qu'il y a beaucoup de choses derrière, on sait pas pourquoi.

(Parce que c'est c'est une image générée sur Midjourney) [Rires] On peut aussi penser quand-même qu'il peut y avoir un intérêt à donner la description physique de la personne.

Par exemple si on est sur un événement politique sur de l'accessibilité et que c'est une personne aveugle ça peut être intéressant de le signaler parce qu'elle est peut-être un peu plus légitime pour parler du sujet que quelqu'un qui ne l'est pas.

Si jamais sur l'image de votre article vous mettez du texte, il peut être bien de mettre le texte d'abord puisque normalement, le texte est l'information que vous cherchez à partager.

Bon, j'ai rien oublié, top ! [Rires] Exemple suivant pour un article scientifique : là vous pouvez voir qu'on a un graphique, un camembert avec des oreilles de chat, une petite décoration au milieu avec le museau d'un chat, et à gauche on peut voir un arbre à chat avec un chat qui regarde...

Peut-être qu'il a envie de sauter sur l'oreille du chat à côté...

On est sur un article scientifique, on veut donner des informations, on veut compléter les informations qui sont données dans l'article, du coup tout ce que je viens de vous décrire ne sert à rien, c'est de la décoration pour faire joli, c'est peut-être pas pertinent de le mettre dans un article scientifique, mais vous pouvez avoir envie de le faire quand-même.

Ça peut être tout à fait légitime mais pour une personne qui lit l'article et qui ne voit pas, c'est des choses qui vont être du "bruit" et qui vont la perturber sur l'information.

Donc il faut décrire le titre déjà ("La répartition de la robe des chats") et ensuite les informations du camembert : donc savoir qu'il y a que 1 % des chats qui ont une robe cannelle et 30 % des chats qui ont une robe noire.

Donc dire de manière la plus exhaustive possible les différentes informations qui sont sur ce camembert.

Mais commencez par ce que vous essayez de mettre en avant.

Donc si vous essayez de mettre en avant juste la robe noire, vous dites ça en premier, et ensuite vous allez jusqu'aux informations de moins en moins importantes.

Parce que les personnes qui utilisent les lecteurs d'écran vont avoir tendance à à passer quand elles sauront que c'est pas pertinent pour elles et on a les premières informations en premier.

On a des images à texte : donc ici une image du Forum PHP avec du bleu de différentes nuances et "Paris 2023" Là l'important, c'est le texte donc dans cet "alt" vous avez juste à copier-coller le texte, pas besoin de dire la couleur du texte, pas besoin de dire la décoration, qu'il y a une espèce de zigzag, que c'est un encadré noir...

On donne l'information pertinente, on met pas de bruit, on donne pas la décoration.

Qu'en est-il d'une image qui représente une oeuvre ? Là l'information pertinente c'est l'oeuvre, donc on a un chat sur une barque avec certains types de couleurs... Là c'est vous qui devez décrire ce que vous voyez, décrire ce que vous essayez de partager avec cette oeuvre.

C'est expliquer ce qu'il y a dans l'œuvre mais aussi expliquer que c'est une peinture à l'huile, expliquer les émotions qui vous traversent quand vous la regardez, expliquer les différentes couleurs que vous voyez...

C'est à vous d'y mettre un peu du vôtre dedans pour partager ce que vous voyez.

Pensez qu'une personne aveugle ne l'est pas forcément de naissance, donc être le plus exhaustif possible lui permet d'utiliser son imagination pour essayer de se représenter l'oeuvre : elle a tout à fait le droit d'avoir d'avoir accès à l'art en général grâce à vous.

Plusieurs choses qu'il ne faut pas faire dans les "alt".

Ne pas être trop synthétique : mettez pas juste "photo", de quoi ? de qui ? d'un paysage ? Enfin si vous avez juste "photo" à mettre parce qu'elle sert à rien, peut-être vous mettez juste un "alt" vide ou "image décorative".

Il ne faut pas insérer du contenu qui n'a rien à voir avec l'image : les "alt" c'est pas fait pour votre SEO, c'est fait pour adapter votre contenu à un public qui ne peut pas le voir.

Donc ne décrivez pas comment votre entreprise est hyper trop bien sur une image d'une femme avec le sourire béat devant son écran d'ordinateur.

Vous brouillez votre message et de toute façon, Google a expliqué que ça ne vous permet pas de vous mettre en avant sur les trucs de recherche.

Et enfin ne pas mettre le nom de l'image : c'est pas pertinent de mettre "visuel_14_11_2022.png" ça ne donne aucune information à la personne qui va tomber dessus avec son lecteur d'écran.

Qu'en est-il des icônes ? Ici vous pouvez voir l'icône de centre d'assistance.

En général l'image est dans le bouton donc il faut penser que si c'est écrit "centre d'assistance", le lecteur d'écran va le lire, vous avez pas besoin de mettre un "alt" ou d'activer le "alt".

Par contre si vous êtes en mode réduit et que vous avez juste l'icône, il faut que la personne qui tombe dessus sache de quoi il s'agit donc pensez à mettre le "alt" pour expliquer ce que fait le bouton, et où il nous mène.

Et sur tous les réseaux sociaux que je connais, on peut mettre un "alt" sur les images : quand vous mettez l'image, en dessous souvent...

là sur Twitter il y a "ajouter une description", sur Linkedin il y a "texte alternatif", ailleurs, ça va être écrit juste "alt".

Vous cliquez dessus, vous rajoutez votre "alt" et ça permettra à chacun d'entre nous de rendre le web un peu plus accessible à son échelle.

C'est fini.

Merci beaucoup. On a le temps pour une question si vous voulez.

Merci beaucoup pour la présentation.

Sur les graphiques, est-ce qu'il y a des technos, du SVG par exemple, qui permettent de lire du graphique plutôt que le mettre en image ? C'est une très bonne question à laquelle je ne sais pas répondre...

Peut-être, probablement, mais comme je disais, les automatisations vous permettent pas d'ordonner l'information et de la rendre pertinente.

Je suis plutôt pour avoir un humain qui met en avant cette information.

Merci pour ton talk.

Avec l'avènement des outils d'IA, est-ce qu'on peut imaginer demain des outils qui vont justement, s'il y a pas de "alt", interpréter directement ce que voit l'outil pour décrire ce qu'il y a sur l'image ? Il existe déjà quelques outils comme ça sauf qu'ils sont pas forcément en mesure de comprendre exactement le contexte dans lequel on a mis l'image, du coup de pas forcément donner précisément juste l'information nécessaire, elle va décrire toute l'image avec les couleurs, le texte, etc.

Ça peut être beaucoup de bruit, très perturbant pour les personnes.

Peut-être qu'il va y avoir une amélioration de l'IA sur ces sujets-là mais aujourd'hui je suis pas pour leur utilisation.

On peut l'utiliser quand on n'a pas d'idée et ensuite factoriser le "alt" mais de manière générale je suis pas pour.

Merci beaucoup vous avez le droit de la réapplaudir.

Merci [Musique]