Accessibilité

Les sites conçus avec le souci de l'accessibilité sont flexibles, de façon à répondre aux différents besoins, aux préférences et aux situations rencontrées par les utilisateurs. Si les solutions d'accessibilité facilitent l'accès à tous les profils utilisateurs, leur mise en place répond souvent à une réglementation qui vise à prévenir la discrimination vis à vis des personnes handicapées.


Points de départ

Voici quelques références qui définissent ce qu'est l'accessibilité, pourquoi elle est importante, ainsi que des conseils pratiques.

  • Le World Wide Web Consortium (W3C)' [1]
  • Mark Pilgrim Plongez dans l'accessibilité en anglais [2]
  • Construire des sites web accessibles livre de Joe Clark en anglais [3]

Moodle et Accessibilité : directives de codage

Utilisez les CSS , avec des niveaux de titres bien marqués et des titres accentués.

Il est conseillé de séparer le contenu HTML de sa mise en forme en utilisant lse CSS .

Certaines balises enrichissent la présentation d'un document et contribuent à la structuration et au sens du contenu . Ces balises doivent rester en HTML . Cela inclut les balises de titres H1, H2, H3... utilisées pour former la structure hiérarchique du document , la balise "strong" et les balises "em", utilisées pour mettre en valeur des sections de texte particulières.

Évitez d'utiliser des images de fond pour des informations importantes

Les utilisateurs de navigateurs non visuels ne peuvent pas voir les images. Ils peuvent lire les balises "alt" des images normales, mais les images d'arrière-plan ne sont pas présentées comme des images normales.

Attributs d'images alt et title

Un attribut alt est nécessaire ( même vide ) sur toutes les images.

  • Si un lien contient une balise <img> , la balise <img> n'a plus besoin d'un attribut title si le lien a déjà un.
  • L'attribut alt d'une image et le titre de sa description devraient normalement différer.
  • L'attribut alt de l'image fournit un texte équivalent à cette image , alors que l'attribut title doit ajouter des informations supplémentaires sur l'objet ou l' action associée à une image cliquable . Le fait de répéter le même texte dans les attributs alt et title peut être gênant pour les utilisateurs de lecteurs d'écran.

Liens et les boutons doivent pouvoir être sélectionnés et facilement cliquables

  • Une image utilisée comme icône cliquable doit être assez grande pour que chaque utilisateur puisse cliquer dessus facilement.
  • Les utilisateurs doivent être en mesure de naviguer sur tous les liens et les boutons en utilisant le clavier.
  • En général, il faut éviter d'avoir deux boutons ou liens dans la même zone, qui permettent la même action car cela peut être déroutant pour les utilisateurs de lecteurs d'écran.

Favoriser l'interaction dynamique avec des attributs ARIA

Le événements déclenchés par AJAX et JavaScript peuvent être moins évidents pour les utilisateurs de navigateurs non - visuels . Les attributs ARIA peuvent aider les utilisateurs de ces navigateurs à suivre un changement dynamique. norme ARIA : http://fr.openclassrooms.com/informatique/cours/creer-un-blog-accessible-avec-html5/la-norme-aria


Utilisez des étiquettes "label" avec des entrées "input"

Le contexte peut facilement être perdu sans une présentation visuelle . Les étiquettes "label" sont nécessaires sur tous les éléments d'entrée-entrée "input" (à l'exception des boutons ) pour décrire leur fonction dans un formulaire. Les étiquettes doivent être uniques sur une page . Les éléments répétés doivent avoir une étiquette unique qui identifie l'élément dans son contexte. http://www.alsacreations.com/astuce/lire/6-utiliser-element-label-input-formulaires.html


Utilisez des titres de page appropriés

Un titre de page est un point de départ pour un lecteur d'écran. Les titres des pages doivent être uniques et doivent faire sens pour la page. Évitez les titres génériques.

Les pages doivent être navigables au clavier

Il devrait être possible de naviguer sur tous les éléments d'une page en utilisant un clavier . Les évènements importants déclenchés par un clic de souris doivent pouvoir être déclenchés au clavier.

Évitez de n'utiliser que la couleur pour exprimer du sens

Les utilisateurs qui ne peuvent pas différencier les couleurs, les personnes aveugles ont besoin d'informations supplémentaires pour comprendre le sens si la couleur est utilisée comme fonction significative. Il faut aussi avoir à l' esprit que les couleurs peuvent avoir une signification différente dans les différentes cultures, ainsi les couleurs devraient être paramétrables dans les options ou en lien avec les fichiers de langue.

Rôle des liens de type bouton

Si un lien agit comme un bouton ( n'aboutissant pas à une autre page , ce qui est souvent le cas lorsqu'il est combiné avec Javascript ) , il convient de déclarer le rôle bouton attribut . En outre, comme un bouton est généralement déclenché par la barre d'espace, le Javascript doit ajouter les événements appropriés sur le lien pour accepter cette touche clavier.

Pour en savoir plus, voir sur Mozilla Developer Network : https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role

Standards du Web, lignes directrices et législation

RGAA Référentiel général d'accessibilité pour les administrations : http://references.modernisation.gouv.fr/rgaa-accessibilite

WCAG 2.0 exigences de conformité : http://www.w3.org/Translations/WCAG20-fr/#conformance-reqs

Ressources

Docteur Moodle au MoodleMoot de Troyes en 2010 : http://moodlemoot2010.utt.fr/mod/forum/discuss.php?d=60 Groupe de travail AccessiWeb : http://www.accessiweb.org/index.php/groupe-de-travail-accessibilite-web.html

Voir aussi