Étiquette : a11y

Situation

Je suis malvoyante, j’utilise une synthèse vocale pour m’aider à lire les contenus textuels. Je viens de recevoir un mail intitulé “Dossier incomplet”, m’invitant à refaire mon inscription en suivant toutes les étapes de la procédure, jusqu’au bout. Le lien contenu dans le mail m’amène à une page web pour finaliser mon inscription. En dehors du titre : “Procédure de constitution du dossier d’expert”, il y a juste une image, dont l’alternative est l’exacte reprise du titre de la page. Je devine que toute l’information se trouve à l’intérieur de l’image. Mais sans description détaillée, je n’ai pas accès à ce contenu informatif.

Je suis complètement perdue et je ne sais pas quoi faire, d’autant plus que la date limite de dépôt est pour le lendemain.

L’information

Lorsqu’on utilise des images complexes (affiche, graphique, infographie…), on doit insérer une description détaillée à la suite. Elle permet de rendre les images accessibles aux personnes malvoyantes ou aveugles.

Il s’agit d’une version textuelle de l’image qui, contrairement aux textes alternatifs, sera lisible par tous les visiteurs. 

Sans description détaillée, les personnes naviguant à l’aide d’une synthèse vocale n’auront que l’information contenue dans l’alternative textuelle, qui rappelons-le doit rester courte et précise.

Nos recommandations

  • La description détaillée doit reprendre l’intégralité des informations véhiculées par l’image complexe. 
  • La description détaillée doit être facile à trouver par rapport à l’image correspondante. Elle doit être placée à proximité immédiate de celle-ci.

Rappel

Pour aller plus loin

Statut

Envoyée aux personnels : le 18 juin 2024

Situation

Ma campagne de communication a échoué, car nous n’avons pas renseigné l’alternative textuelle de l’image contenant toute l’information essentielle. Dû à un problème de serveur, l’image ne s’est pas affichée et l’information n’est donc pas passée.

L’information

Une image contenant de l’information insérée dans une page peut ne pas être visible pour différentes raisons : handicap visuel, mauvaise connexion internet, affichage des images désactivé par choix du visiteur.

L’alternative textuelle permet de donner l’information portée par l’image à tous ceux qui ne peuvent pas la voir, quelle qu’en soit la raison.

L’alternative textuelle favorise l’accessibilité des contenus visuels et permet également l’indexation par les moteurs de recherche.

Nos recommandations

  • Le texte alternatif doit être concis (≤150 caractères) ;
  • il suffit de décrire simplement ce que représente l’image ;
  • dès lors qu’il y a beaucoup d’informations sur l’image, l’alternative doit être complétée par une description détaillée (sujet de la prochaine fiche).

Rappel

Pour aller plus loin

Statut

Envoyée aux personnels : le 14 mai 2024

 Situation

Je suis non voyant. L’horaire du concert auquel je veux assister se trouve à l’intérieur d’une image. L’alternative textuelle aurait pu m’aider si elle avait été renseignée. Mais comme elle ne l’est pas, je vais devoir me débrouiller autrement pour savoir quand venir.

 L’information

Une image placée dans un document peut être informative : elle véhicule des informations utiles. C’est typiquement le cas des images porteuses de texte. A contrario, elle peut être purement décorative et ne rien apporter du point de vue informatif. 

Pour chaque image porteuse d’information, une alternative textuelle doit être renseignée. Cette alternative est lue par les synthèses vocales des personnes mal ou non voyantes. Elle s’affiche à tous uniquement en cas d’indisponibilité de l’image.

 Nos recommandations 

La seule question à se poser pour savoir si on doit renseigner une alternative à l’image ou la laisser vide est celle-ci : si je supprime l’image, est-ce que sa disparition va induire une perte d’information ?

  • Si oui, alors je dois renseigner l’alternative à l’image
  • Si non, alors je la laisse vide.

 Pour aller plus loin

Statut

Envoyée aux personnels : le 2 avril 2024

Situation

Je suis aveugle. Je navigue de lien en lien avec ma synthèse vocale et je tombe sur une foultitude de “cliquez ici”. Je n’ai aucune idée de vers quoi pointent ces liens. Vais-je devoir tous les consulter ? Ils ne me sont pas tous utiles.

Information

Les liens, également appelés liens hypertextes ou hyperliens, se positionnent sur un ou plusieurs mots, ou sur une image cliquable. Ils permettent de naviguer entre différentes pages web, ou d’atteindre un fichier.

L’étiquette de lien est représentée par l’ensemble des mots généralement soulignés sur lesquels on clique ou par l’alternative à l’image si celle-ci est cliquable.

L’étiquette doit être pertinente, c’est-à-dire donner l’information sur l’action déclenchée par le lien.

Recommandations

Pour chaque étiquette de lien :

  • faire des formulations claires et explicites sur l’action qui va être déclenchée ;
  • Proscrire le “cliquez ici” ;
  • Pour un lien vers une page ou un autre site : préciser où le visiteur va être redirigé ;
  • Pour une image, faire la même chose dans l’alternative à l’image ;
  • Pour les fichiers, indiquer l’extension, et le poids du fichier à la fin du lien. Exemple : Télécharger la fiche de présentation de la Mission handicap (pdf ; 1,1 Mo).

Pour aller plus loin

Statut

Envoyée aux personnels : le 4 mars 2024

 Situation

Je suis incapable de relier un graphique à sa légende car je distingue mal les couleurs utilisées.

 L’information

La perception des couleurs n’est pas universelle : 8% des hommes ont des problèmes de discrimination de couleurs. Une information ne doit donc pas être portée uniquement par un code couleur.

 Nos recommandations

  • Afin de garantir la lisibilité, combiner un code couleur avec des éléments de distinction complémentaires (hachure, lettre, flèche)
  • Rattacher visiblement la légende aux graphiques ou faire une description textuelle comme alternative (exemple)
  • Garder à l’esprit qu’un mauvais choix de couleur (trop semblables entre elles, ou trop proches de la couleur de fond) limite la lisibilité d’un graphique pour tous

 Pour aller plus loin

Statut

  1. Envoyée aux personnels : le 12 février 2024
  2. Modifiée le 26/02/2024 avec l’ajout du nom des référents dans la section “Pour aller plus loin”

Situation

Vous ne parvenez pas à lire un texte mal contrasté. Ou encore, vous n’arrivez pas à passer le Captcha d’un formulaire : vous êtes confronté à un problème d’accessibilité.

Information

Vos documents numériques ne doivent présenter aucun blocage à la consultation pour les personnes en situation de handicap. Les personnes naviguant avec des technologies d’assistance ne doivent perdre aucune information.

Recommandations

Respecter les 7 règles suivantes :

  • je structure ma page en utilisant correctement les différents niveaux de titres fournis par mon outil de rédaction ;
  • je fais attention au contraste entre le texte et le fond pour qu’il soit suffisant ;
  • j’écris des liens compréhensibles et je bannis l’appellation “cliquez-ici” ;
  • j’utilise les images de manière accessible, en n’oubliant pas l’alternative lorsque nécessaire ;
  • je proscris les pdf images (scans) ou je fournis une alternative accessible qui permet la lecture vocale et la recherche de texte ;
  • j’utilise les listes à puces ou numérotées à bon escient ;
  • je ne justifie pas mon texte et je ne fais pas de sauts de lignes multiples.

Pour aller plus loin

Statut

Envoyée aux personnels : le 7 décembre 2023

Le service web et accessibilité numérique (SWAN) a envoyé en décembre 2023 sa première fiche sur le sujet de l’accessibilité à l’ensemble des personnels de l’université de La Réunion. Son objectif : informer, sensibiliser de manière la plus simple possible.

Parue en 2023

Faites de l’accessibilité votre quotidien, le 7 décembre 2023

Parues en 2024

Prévues en 2024

  • Les contrastes, septembre 2024
  • La hiérarchisation des titres octobre 2024
  • Les listes à puce, novembre 2024
  • Une obligation légale, décembre 2024