Comment débuter dans l'accessibilité numérique ?
Emmanuelle ABOAF
BDX IO – 2 décembre 2022
Formulaire non accessible
Ce que nous codons
<form role="form">
<fieldset>
<legend>Connexion</legend>
<div>
<label>Identifiant</label>
<input type="text" id="txtIdentifiant" />
</div>
<div>
<label>Mot de passe</label>
<input type="password" id="txtMotDePasse" />
</div>
<div>
<input type="checkbox" id="chkSeSouvenirDeMoi" />
<label>Se souvenir de moi ?</label>
</div>
<div>
<button type="submit" id="btnEnvoyer">Connexion</button>
</div>
</fieldset>
</form>
Ce que nous voyons
Ce que le lecteur d'écran lit
Formulaire accessible
Ce que nous codons
<form role="form">
<fieldset>
<legend>Connexion</legend>
<div>
<label for="txtIdentifiant">Identifiant</label>
<input type="text" id="txtIdentifiant" />
</div>
<div>
<label for="txtMotDePasse">Mot de passe</label>
<input type="password" id="txtMotDePasse" />
</div>
<div>
<input type="checkbox" id="chkSeSouvenirDeMoi" />
<label for="chkSeSouvenirDeMoi">Se souvenir de moi ?</label>
</div>
<div>
<button type="submit" id="btnEnvoyer">Connexion</button>
</div>
</fieldset>
</form>
Ce que nous voyons
Ce que le lecteur d'écran lit
Comment renseigner les champs obligatoires accessibles ?
Il faut ajouter l'attribut
required pour définir le champ
obligatoire. Ainsi le lecteur d'écran va mentionner que le
champ est obligatoire.
Voici ce que le lecteur d'écran renvoie :
Lorsqu'on valide le formulaire, il ne faut pas communiquer l'information valide ou erronnée par la couleur car les personnes daltoniennes ne pourront pas voir la différence sur la couleur.
Comment décrire les images ?
Ne pas mettre le nom du fichier de l'image.
<img src="visuel_academie_de_paris-14-11.png" alt="visuel_academie_de_paris-14-11.png" />
Voici ce que le lecteur d'écran restitue :
graphique visuel_academie_de_paris-14-11.png
En décrivant ce que comporte l'image, on donne une véritable information sur le contenu.
<img src="visuel_academie_de_paris-14-11.png" alt="Message venant de l'académie de Paris émise le samedi 14 novembre : Un point de situation sur l'ouverture des établissements scolaires et universitaires Lundi, en Île-de-France, sera communiqué ce Samedi en fin de journée." />
Voici ce que le lecteur d'écran restitue :
graphique Message venant de l'académie de Paris émise le
samedi 14 novembre : Un point de situation sur
l'ouverture des établissements scolaires et
universitaires Lundi, en Île-de-France, sera communiqué
ce Samedi en fin de journée.
Comment mettre le focus sur les liens et les boutons ?
Rendu visuel des liens, des boutons et champs ayant le
focus.
-
Ne supprimez pas le focus mis par défaut depuis
le CSS :
a { outline: none; }. Autrement laissez-lea { outline: 0; } -
Si vous le supprimez, proposez
un style alternatif (ci-contre l'image) en
mettant en valeur les liens et boutons de manière
visible en CSS avec
:focuset:hover -
Vérifiez que les menus et ses sous-menus, les champs,
les liens et les boutons soient
accessibles depuis la touche
TABdu clavier. - Vérifiez que le lecteur d'écran restitue bien les informations des liens et des boutons.
Des liens non accessibles
Ce que nous codons
<a href="#">Lire la suite</a>
Ce que nous voyons
Ce que le lecteur d'écran lit
Lire la suite lien
Lire la suite lien
Lire la suite lien
Lire la suite lien
Comment l'utilisateur ou l'utilisatrice du lecteur d'écran peut savoir quel lien "Lire la suite" appartient à l'article qu'il veut lire ?
Eviter les phrases de type : "cliquez ici", "lire la
suite", "voir ce lien", "ici", "par là", etc.
Mettez une information pertinente et
explicite.
Des liens accessibles
Ce que nous codons
<a href="#" title="Lire la suite du passage de Lorem Ipsum standard (Nouvelle fenêtre)" target="_blank">Lire la suite</a>
<a href="#" title="Lire la suite d'un autre passage de Lorem Ipsum standard">Lire la suite</a>
Ce que nous voyons
Ce que le lecteur d'écran lit
Lire la suite lien Lire la suite du passage de Lorem Ipsum standarden latin (Nouvelle fenêtre)
Lire la suite lien Lire la suite d'un autre passage de Lorem Ipsum standard en latin
Lire la suite lien Lire la suite de l'article sur l'accessibilité
Lire la suite lien Lire la suite de l'article sur le RGAA
Si le lien ouvre une nouvelle fenêtre, il est important de le préciser.
Des boutons non accessibles
Ce que nous codons
<div>
<h1>Choisir votre moyen de paiement</h1>
<button>
<img src="visa.png" alt=""/>
</button>
<button>
<img src="mastercard.png" alt="" />
</button>
<button>
<img src="paypal.png" alt=""/>
</button>
</div>
Ce que nous voyons
Ce que le lecteur d'écran lit
Des boutons accessibles
Ce que nous codons
<div>
<h1>Choisir votre moyen de paiement</h1>
<button title="Payer avec VISA">
<img src="visa.png" alt=""/>
</button>
<button>
<img src="mastercard.png" alt="Payer avec MasterCard" />
</button>
<button>
<img src="paypal.png" alt="Payer avec Paypal"/>
</button>
</div>
Ce que nous voyons
Ce que le lecteur d'écran lit
Respectez la structure du document
-
header,nav,mainetfootersont obligatoires. -
mainest unique etnavréservé aux zones de navigation.
Attribuez les rôles à la structure du document
L'attribut role permet à l'utilisateur ou l'utilisatrice du lecteur d'écran de s'orienter vers les zones importantes d'une page web et à naviguer rapidement vers ces zones au sein d'un site web.
-
Sont uniques dans la page :
-
L'attribut
role="banner"est placé dans le tagheader -
L'attribut
role="main"est placé dans le tagmain -
L'attribut
role="content-info"est placé dans le tagfooter -
L'attribut
role="search"est utilisé dans unedivcontenant la zone de recherche
L'attribut role="navigation" est placé dans
le tag nav et peut être utilisé plusieurs
fois.
Pour en savoir plus : Accessible Landmarks (EN)
Pensez au zoom texte
- Pouvoir agrandir le site jusqu'à 200% voire plus sans l'altérer.
-
Mettre les tailles en valeur relative :
rem, em ou %.
- La taille en valeur fixe en px, in, pt ou cm ne facilite pas l'agrandissement des textes.
Pour en savoir plus sur les valeurs relatives : Du responsive tout en em
Pensez aux contrastes
Le rapport de contraste entre le texte et son arrière-plan doit avoir :
- un ratio de 4:5:1 minimum
- un ratio de 3:1 minimum avec un zoom à partir de 120% ou 150% de la taille du texte
Un candidat pour le record du contraste le plus bas: un placeholder (et pas d'étiquette) à 1,65:1! #a11yfail pic.twitter.com/8ZG3dzCKh0
— @OlivierNourry 8 avril 2016
Comment les équipes, qui réalisent les newsletters, peuvent eux-mêmes lire si nous-mêmes nous ne pouvons pas lire ? Je veux bien croire que c’est « joli » pour eux mais si on veut que le message passe, il faut qu’il soit lisible.
— @eaboaf_ 19 mai 2021
Merci !
Retrouvez ma présentation :
https://emma11y.github.io/debuter-a11y-conference/
Posez vos questions
Donnez vos feedbacks
