Rendre son site web accessible devrait être parmi les priorités de tout designer ou développeur qui souhaite s’adresser à un large public.
Rendre son site accessible aux seniors est un enjeu majeur du développement web car un site accessible bénéficiera non seulement aux séniors mais aussi à tous les types d’internautes qu’ils présentent un handicap ou non en leur offrant une interaction avec vos pages optimisée et une expérience utilisateur satisfaisante et adaptée. En effet, plus de 80% des sites web français ne sont pas accessibles à tous.
Prendre en compte cette problématique de l’accessibilité web pour le développement de sites aura comme conséquence directe d’améliorer la visibilité de vos sites, de toucher un public plus étendu et donc d’améliorer le trafic des sites.
L’accessibilité n’a que des avantages et bénéficie à tous, n’attendez plus pour l’intégrer à vos projets web !
La sémantique HTML 5
Il s’agit de la base impérative au développement de n’importe quel site accessible.
Cela consiste à utiliser les éléments sémantiques prévus par HMTL 5 pour construire son site.
En effet, ceux-ci prévoient intrinsèquement les styles, les propriétés ou éléments permettant une meilleure accessibilité. De plus, votre code sera clair, compréhensible et plus facile à développer notamment sur mobile grâce à un code plus léger. Enfin, la lecture du code ne sera pas facilitée que pour les lecteurs d’écrans mais aussi pour les robots de Google qui apprécieront votre code sémantique et vous attribueront un meilleur référencement naturel qu’un code spaghetti.
Pour en savoir plus sur le sectionnement de votre code :
https://developer.mozilla.org/fr/docs/Web/HTML/Element#content_sectioningLes trois axes majeurs du développement accessible concernent les textes, les boutons de contrôle et les images. Les textes doivent especter la hiérarchie des titres et les balises HTML dédiées. Ils doivent également utiliser un langage clair. Les boutons de contrôle doivent être des comporter l’attribut data-message. Les images doivent utiliser des noms de fichiers significatifs. On doit ajouter les attributs ALT et TITLE aux balises iamges ou utiliser l’attribut ARIA-LABELLEDBY et la balise paragraphe avec le même ID que cet attribut.
Les feuilles de style et JavaScript
Ces 2 langages peuvent nuire à l’accessibilité quand ils sont utilisés de façon hasardeuse.
En matière de styles, les internautes attendent certains comportements lors de leur navigation car des conventions communes ont été établies mondialement. Il convient donc de maintenir ces styles et comportements sur votre site afin de ne pas perdre l’internaute qui a ses habitudes.
Vous devez produire des textes lisibles et agréables à lire, vérifier un contraste suffisant entre votre charte graphique et vos textes. Vos liens doivent respecter les comportements attendus des utilisateurs (signaler des changements d’états, afficher un curseur, afficher des contour …)
Concerant JavaScript, il ne faut pas en abuser pour créer des éléments HTML non sémantiques.
WAI-ARIA
WAI-ARIA sert à appliquer des attributs HTML supplémentaires pour améliorer la sémantique et l’accessibilité.
Trois attributs ARIA principaux sont à prendre en compte :
Le contenu multimédia
L’accessibilité web est une spécialité complexe du développement qui ne se limite pas aux points techniques énumérés ci-dessus qui nécessite un approfondissement et une interaction réelle et des tests en collaboration avec le public cible visé par le site.
Il s’agit d’un vecteur de problèmes d’accessibilité.
Le problème des images a été abordé un peu plus haut dans cette page.
Quant aux vidéos et aux audios, il est nécessaire de créer des contrôleurs personnalisés utilisables au clavier pour les boutons des lecteurs vidéos ou audios et de créer des transcripteurs de texte pour l'audio car par défaut, ils ne sont pas otpimisés pour l’accessibilité.