« Accessibilité » : différence entre les versions
(Création de la page) |
Aucun résumé des modifications |
||
Ligne 1 : | Ligne 1 : | ||
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 titre : <h1> , <h2> , <h3> ... , utilisés 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 car 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, nous devrions éviter d'avoir deux boutons ou liens qui permettent d'atteindre la même action dans le même secteur . Cela peut être gênant et 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 | |||
J DEMIAUX dans http://moodlemoot2010.utt.fr/mod/forum/discuss.php?d=60 | |||
Non, aucun groupe de travail sur ce sujet ne s'est encore déclaré à la Communauté francophone de Moodle et je n'ai pas non plus de connaissance particulière sur le sujet. | |||
Cependant, il me semble, à la lecture de ce RGAA* (qui renvoie au WCAG*), que ce ne soit pas Moodle, qui n'est que le moteur d'un futur site, que l'on doive analyser mais ce que l'on fait avec lui. | |||
L'homologation d'une perceuse et son aptitude à produire des trous bien ronds ne me sera d'aucune utilité si je m'en sers pour repeindre mon plafond et je ne vois pas dans les principales règles à respecter ci-dessous, lesquelles sont dépendantes du moteur qu'est Moodle respectueux (bien plus que Microsoft) des standards W3C. | |||
Mais, bien sur, il ne faut pas pour autant négliger ces fonctionnalités. | |||
Principe 1 : perceptible | |||
Proposer des équivalents textuels à tout contenu non textuel qui pourra alors être présenté sous d'autres formes selon les besoins de l'utilisateur : grands caractères, braille, synthèse vocale, symboles ou langage simplifié. | |||
Proposer des versions de remplacement aux média temporels. | |||
Créer un contenu qui puisse être présenté de différentes manières sans perte d'information ni de structure (par exemple avec une mise en page simplifiée). | |||
Faciliter la perception visuelle et auditive du contenu par l'utilisateur, notamment en séparant le premier plan de l'arrière-plan. | |||
Principe 2 : utilisable | |||
utilisable Rendre toutes les fonctionnalités accessibles au clavier. | |||
Laisser à l'utilisateur suffisamment de temps pour lire et utiliser le contenu. | |||
Ne pas concevoir de contenu susceptible de provoquer des crises. | |||
Fournir à l'utilisateur des éléments d'orientation pour naviguer, trouver le contenu et se situer dans le site. | |||
Principe 3 : compréhensible | |||
Rendre le contenu textuel lisible et compréhensible. | |||
Faire en sorte que les pages apparaissent et fonctionnent de manière prévisible. | |||
Aider l'utilisateur à éviter et à corriger les erreurs de saisie. | |||
Principe 4 : robustesse | |||
Optimiser la compatibilité avec les agents utilisateurs actuels et futurs, y compris avec les technologies d'assistance. | |||
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 == | == Voir aussi == | ||
* La [[:dev:Accessibility|version anglaise]] de cette page | * La [[:dev:Accessibility|version anglaise]] de cette page |
Version du 13 février 2014 à 09:01
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 titre :