Accessibilité web Gérer l’accessibilité lors de la création d’un site ORT Lyon - 10/02/2014

L’accessibilité ? « Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique ou leurs aptitudes physiques ou mentales. » Définition du W3C ORT Lyon - 10/02/2014

Qui cela concerne ? Les personnes handicapées ▫Handicap visuel  Vue incorrigible  Mauvaise distinction des couleurs  Sensibilité à la luminosité des écrans  Aveugles ▫Handicap auditif ▫Handicap visuel et auditif ▫Handicap moteur, etc. Les seniors Un public qui utilise de plus en plus internet Mais aussi : ▫Les débutants ▫Toute personne qui visionne en site dans des conditions non confortables (bruit autour, absence de souris… ex. la navigation avec le doigt en fait partie) ▫Les moteurs de recherche sont également aveugles ! ORT Lyon - 10/02/2014

Les technologies dont ces personnes se servent Logiciels de lectures à l’écran ▫Interprètent ce qui est affiché pour en faire un rendu vocal ▫Terminal braille qui affiche les textes de manière tactile Navigateur web + clavier pour naviguer de page en page ORT Lyon - 10/02/2014

Fonctionnement Le lecteur vocal lit la page web pour en restituer le contenu de manière auditive > il ne peut lire que le code HTML et non ce qui s’affiche à l’écran ! Si le site n’est pas codé correctement, le logiciel ne peut pas interpréter correctement non plus ORT Lyon - 10/02/2014

Problématiques Beaucoup d’informations doivent être vues pour être comprises : ▫Les images et vidéos ▫Navigation exclusive à la souris ▫Tout effet graphique qui rend esthétique et agréable la lecture à l’écran D’autres obstacles de la lecture à l’écran ▫Contraste de couleurs très peu marqués ▫Impossibilité de changer la taille du texte ▫Pages trop longues ORT Lyon - 10/02/2014

Principes d’accessibilité Rendre « visibles » les éléments non vus : ▫Proposer une alternative aux éléments visuels Simplifier la lecture pour les malvoyants ▫Possibilité de changer la taille et la couleur des contenus ▫Une structuration claire qui permet d’identifier les éléments ORT Lyon - 10/02/2014

Rendre un site accessible ORT Lyon - 10/02/2014

Respecter les normes Rendre son code valide W3C Séparer le contenu de la mise en forme ▫Le HTML seul doit avoir un sens sans la feuille de styles :  Hiérarchie de l’information : apparition des éléments dans leur ordre d’importance  Cohérence de l’ordre des informations  Lisibilité (ex. pas de tableau pour disposer le contenu, etc.) Bannir les tableaux pour des données autres que ce à quoi ils doivent servir (données tabulaires) Bannir les frame ORT Lyon - 10/02/2014

Faciliter la navigation Liens de menus clairs et apparaissant en haut On doit distinguer : ▫Où on est sur le site ▫Où on peut aller ▫Où on est déjà allé Proposer une navigation au clavier (tabindex) ORT Lyon - 10/02/2014

Toujours prévoir des textes alternatifs Renseigner la balise « alt » des images > Avec une description cohérente Transcription textuelle du contenu d’une vidéo Texte alternatif pour les script ORT Lyon - 10/02/2014

Utiliser la sémantique Pour dire qu’un mot ou une phrase est important :, (ce n’est pas pour dire que c’est en gras ou en italique !) Une liste à puce pour les éléments ordonnées Un pour une citation Un pour un paragraphe (pas plein de pour sauter des paragraphes !) Nommer avec les balises le type de contenu ORT Lyon - 10/02/2014

Utilisation des roles ARIA Attribut : role= "" à renseigner ▫ Banner ▫ Complementary ▫ Contentinfo ▫ Main ▫ Navigation ▫ Search ▫ … Exemple : ▫ ORT Lyon - 10/02/2014

Les bonnes pratiques ORT Lyon - 10/02/2014

Langue Déclarer la langue de la page sur la balise HTML ▫ Renvoyer l’info « content-language » ▫Par le serveur ▫Par la balise meta Baliser les changements de langues ORT Lyon - 10/02/2014

Images Le texte alternatif est à renseigner en fonction de l’utilité de l’image ▫Vide si elle est décorative ▫Description au plus proche si elle a du sens ▫Non redondant avec son contexte Les images qui ont du sens ne sont pas appelées en CSS ORT Lyon - 10/02/2014

Liens Attribut title renseigné ▫En apportant une information supplémentaire sur le contenu du lien ▫Pas de placement de mots-clés Bien préciser s’il y a un comportement particulier avec le lien (dans le title toujours) ▫Ouverture du lien dans une nouvelle page ▫Téléchargement d’un document ORT Lyon - 10/02/2014

Formulaires Utilisation correcte des Indication pour les champs obligatoires Affichage d’un message en cas d’erreur Affichage d’un message de confirmation après l’envoi ORT Lyon - 10/02/2014

CSS et JS Nombre de fichiers limité au minimum Externalisés CSS appelés dans et JS en fin de document JS non intrusif ORT Lyon - 10/02/2014

Textes Lisibles : ▫Pas trop petit ▫For contraste Liens clairement identifiables Réserver le soulignement pour les liens ORT Lyon - 10/02/2014

Ressource Livre ▫Accessibilité web : Normes et bonnes pratiques pour des sites plus accessibles ▫Editions Eyrolles ~30€ ORT Lyon - 10/02/2014