Comment débuter dans l'accessibilité numérique ?
Emmanuelle ABOAF
AccessibilityCon - 03/02/2021
Twitter : @eaboaf_
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 ?
@Academie_Paris @CollectifBude Dommage que ce message ne soit qu’en image! Impossible pr moi de le lire, maman d’élève concernée! #a11yfail
— Sylvie Duchateau (@sylduch) 14 novembe 2015
L'attribut alt est une information précieuse
pour les lecteurs d'écrans.
Mais attention, ne l'utilisez pas n'importe comment.
-
Si l'image est purement décorative, laissez l'attribut
altvide. -
Si l'image contient une information importante,
décrivez-la dans l'attribut
alt.
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.
Pour en savoir plus sur l'utilisation de l'attribut alt (EN)
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.
Article à lire : Don't do it (EN)
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
Comment l'utilisateur 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
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
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)
L'attribut role et ses valeurs permettent de
nous donner des informations sur le but de l'élément en
question.
Grâce à ces rôles, les lecteurs d'écrans détectent, au chargement de la page, immédiatement la navigation ou les navigations, la bannière, le contenu principal, la zone de recherche et le pied de page.
