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
Aucun résumé des modifications
Aucun résumé des modifications
 
(7 versions intermédiaires par le même utilisateur non affichées)
Ligne 7 : Ligne 7 :
   
   


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.  
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)' [http://www.w3c.fr/a-propos-du-w3c-france/la-mission-du-w3c/]
* Le World Wide Web Consortium (W3C)' [http://www.w3c.fr/a-propos-du-w3c-france/la-mission-du-w3c/]
Ligne 19 : Ligne 19 :


:Il est conseillé de séparer le contenu HTML de sa mise en forme  en utilisant lse CSS .  
: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.
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  
Évitez d'utiliser des images de fond pour des informations importantes  
Ligne 25 : Ligne 25 :
: 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.
: 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  
Attributs d'images alt et title  


Un attribut alt est nécessaire ( même  vide ) sur toutes les images.
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.
* 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 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.
* 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  
Liens et les boutons doivent pouvoir être sélectionnés et facilement cliquables  
Ligne 50 : Ligne 50 :




Utilisez les éléments "label" et "input"
Utilisez des étiquettes "label" avec des entrées "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.
 
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
http://www.alsacreations.com/astuce/lire/6-utiliser-element-label-input-formulaires.html




Utilisez des titres de page appropriés
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.
 
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
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
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.
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
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 :
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
https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role


== Standards du Web, lignes directrices et législation ==
== 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  
http://references.modernisation.gouv.fr/rgaa-accessibilite


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


== Ressources ==


WCAG Web Content Accessibility Guidelines
Docteur Moodle au MoodleMoot de Troyes en 2010 : http://moodlemoot2010.utt.fr/mod/forum/discuss.php?d=60
RGAA Référentiel général d'accessibilité pour les administration
Groupe de travail AccessiWeb : http://www.accessiweb.org/index.php/groupe-de-travail-accessibilite-web.html
 
http://www.accessiweb.org/index.php/groupe-de-travail-accessibilite-web.html


== Voir aussi ==
== Voir aussi ==
* La [[:dev:Accessibility|version anglaise]] de cette page
* La [[:dev:Accessibility|version anglaise]] de cette page
[[Category:Développement]]

Dernière version du 18 février 2014 à 09:11

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