Vous êtes ici : Accueil > Blog > accessibilite-site-internet
~ 4 minutes
Vous êtes ici : Accueil > Blog > accessibilite-site-internet
~ 4 minutes
Quelles personnes peuvent consulter votre site web ?
L’accessibilité représente l’ensemble des moyens mis en œuvre sur votre site pour qu’il soit consultable par toute personne, quel que soit le handicap. En effet, s’il est évident pour la plupart des visiteurs de lire les informations contenues sur un site internet,
il en est autrement pour d’autres.
Les personnes déficientes visuelles par exemple ne peuvent pas voir, ou mal, les informations
sur vos pages web. D’autres personnes ne peuvent pas naviguer avec la souris.
Nous avons tous les mêmes droits, et internet doit être accessible par tous.
Vous verrez qu'au delà du volet éthique et moral, vous pouvez progresser sur plusieurs points en rendant votre site accessible.
C’est peut-être ce type handicap qui demande le plus d’adaptation pour vos sites.
Selon le site des aveugles de France 1,7 millions
de personnes présentent des troubles de la vue, et 1 aveugle naît toutes les 15 heures.
Les personnes déficientes visuelles consultent nos pages web avec un synthétiseur vocal ou un lecteur d’écran comme JAWS par exemple.
C’est à partir de là que la qualité du code de votre site internet prend toute son importance.
Le synthétiseur vocal va prêter une attention toute particulière aux balises HTML de votre site. C’est toute cette sémantique HTML
qui va permettre au programme d’orienter le visiteur et l’informer des
éléments présents à l’écran.
Il s’agit donc de ne pas de coder des blocs de texte, d’images,
de liens ou des menus de navigation sans enveloppe sémantique adaptée.
Les menus et les liens de votre site doivent idéalement être contenus dans une balise ul mais surtout dans un bloc nav.
C’est ce bloc qui informe le lecteur d’écran, et donc votre visiteur, de la présence d’un menu de navigation.
Les balises section, article et aside doivent également ponctuer et organiser votre site web. Elles donnent une cohérence à la présentation des informations
et informent le synthétiseur vocal de la hiérarchie et de la structure de votre page.
Les balises div ne sont à utiliser quand dernier recours lorsqu'il n'y pas d'autre balise disponible.
Les formulaires, quant à eux, sont sûrement les blocs qui demandent le plus de vigilance.
Tous les champs d'entrées input doivent être précédés d’une balise label. Cette balise définie clairement le contenu du champ attendu.
Les boutons radios sont très appréciés par les personnes déficientes visuelles puisqu’ils permettent un parcours et une sélection facile avec la touche tab
Les attributs required et/ou aria-required doivent également être renseignés.
Avec ces attributs le lecteur vocal informera votre visiteur de la nécessité de remplir un champ particulier.
Les attributs aria-live sont une bonne pratique également puisqu’ils permettent d'indiquer que le contenu d’une partie de votre page HTML peut changer.
C’est notamment le cas dans les formulaires lorsque vous souhaitez qu’un texte informe un utilisateur d’une erreur dans l’adresse e-mail ou le numéro de téléphone saisi par exemple.
Le synthétiseur vocal interviendra pour prévenir votre visiteur de cette erreur.
Enfin, concernant la gestion de vos images, les balises alt doivent être présentes, non vides, et renseignées avec pertinence.
C’est le texte de l'attribut alt de la balise img qui sera lu pour les personnes qui ne peuvent pas voir vos images
Certaines personnes ne peuvent pas manipuler une souris d’ordinateur ou ne peuvent pas effectuer de mouvement précis. Ou tout simplement
n’ont pas de souris.
La navigation se fera essentiellement à l’aide de la touche tab du clavier. Votre site web doit pouvoir répondre à cette action et également ajouter de l’ UX.
Idéalement il faut prévoir un visuel différent sur les éléments de la page lors de la sélection ou du focus – une mise en gras par exemple.
Pour les personnes présentant des troubles cognitifs, au sens large, difficultés de mémorisation, de compréhension, difficultés pour
effectuer des tâches simples, il n’y pas de règle stricte de codage.
Privilégiez le bon sens lors du développement de votre site web.
Les élément importants doivent être mis en évidence. Les "workflow" d’inscription, les processus d’achats et tout autre enregistrement
doivent être simples et intuitifs, avec un visuel sur l'état d’avancement du processus. Les menus et contenus additionnels doivent toujours se trouver
à la même place.
Pour les personnes présentant des troubles cognitifs il faut simplifier la navigation au maximum et rester logique
Certaines personnes, notamment les épileptiques, ne supportent pas les animations trop amples, les changements de couleurs brutaux
et les clignotements en trop grand nombre lors de la consultation de pages web. Un paramètre dans le navigateur peut être renseigné s’ils
souhaitent désactiver ou limiter ces effets.
Il faudra dans ce cas avoir recours à la caractéristique prefers-reduced-motion qui détecte si ce paramètre est renseigné.
Dans ce cas on adaptera le code en conséquence pour respecter le choix de l'utilisateur.
Rendre son site accessible à 100 % est impossible à réaliser en soi, mais beaucoup d’outils sont disponibles pour le rendre consultable par le plus grand nombre.
Gardez à l'esprit que certains services ne sont désormais disponibles qu’en ligne. Nous l’avons vu récemment
avec la crise sanitaire et la difficulté pour certaines personnes à remplir une attestation de sortie numérique.
Au delà de l’aspect moral, ces bonnes pratiques pour rendre votre site accessible vont actionner d'autres leviers.
Les moteurs de recherche accordent plus d’importance aux textes contenus dans des balises sémantiques cohérentes plutôt que de simple balises div non sémantique
Partagez pour sensibiliser vos clients et votre entourage à l'accessibilité de l'information sur le web !
Je suis disponible si vous avez besoin d'aide pour optimiser l'accessibilité de votre site web au plus grand nombre.
