Attention : vous consultez actuellement la documentation dédiée aux versions 2.x de Moodle. La documentation pour les versions 3.x de Moodle est consultable ici : Accessibilité et celle pour Moodle 4.x est consultable là : Accessibilité.

« Accessibilité » : différence entre les versions

De MoodleDocs
Aller à :navigation, rechercher
(Annulation des modifications 4108 de Rezeau (discussion))
Ligne 96 : Ligne 96 :
== Voir aussi ==
== Voir aussi ==
* La [[:dev:Accessibility|version anglaise]] de cette page
* La [[:dev:Accessibility|version anglaise]] de cette page
[[en:dev/Accessibility]]

Version du 13 février 2014 à 10:56

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 concernant l'accessibilité qui définissent ce qu'est l'accessibilité, pourquoi elle est importante, ainsi que des conseils pratiques.

Web Accessibility Initiative' (english) Introduction à l'accessibilité du Web

Mark Pilgrim Plongez dans l'accessibilité

Construire des sites web accessibles livre de Joe Clark


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 affectent 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 Alt pour les Images et title

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

  • Si un lien est enveloppant un <img> , <img> n'a pas besoin d'un attribut title si le lien a 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 alt et title attributs 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 les éléments "label" et "input" Le contexte peut facilement être perdu sans une présentation visuelle . Les éléments "label" sont nécessaires sur tous les éléments "input" (à l'exception des boutons ) pour décrire leur fonction dans un formulaire. Les labels doivent être unique sur une page . Les éléments répétés doivent avoir un label 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 naviguer sur tous les éléments d'une page en utilisant un clavier . Les actions importantes déclenchées par un clic de souris doivent pouvoir être déclenchés au clavier.

Évitez d'utiliser la couleur seule pour donner 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 ( non-transmission à 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. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role


Pour en savoir plus allez 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

http://references.modernisation.gouv.fr/rgaa-accessibilite

Outils Ressources


WCAG Web Content Accessibility Guidelines RGAA Référentiel général d'accessibilité pour les administration

http://www.accessiweb.org/index.php/groupe-de-travail-accessibilite-web.html




Voir aussi