Bonsoir,
je m'occupe du site d'un club handisport, donc pas mal de mal-voyants le visitent. Je voudrais savoir ce que je peux faire pour améliorer son accessibilité.
Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter
Accessibilité pour les mal-voyants
Bonsoir,
je m'occupe du site d'un club handisport, donc pas mal de mal-voyants le visitent. Je voudrais savoir ce que je peux faire pour améliorer son accessibilité.
Salut,
il existe des outils qui te permettent d'évaluer ton site en terme d'accessibilité.
Fait une recherche sur google :
[ame="http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=am%C3%A9liorer+accessibilit%C3%A9+site+web"]http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=am%C3%A9liorer+accessibilit%C3%A9+site+web[/ame]
Il existe également les Règles pour les Contenu Web (WCAG) établit par le W3C et WAI qui recensent les règles à respecter pour l"acccessibilité :
http://www.w3.org/Translations/WCAG20-fr/ (version française)
Bonjour,
En général pour ma part je m'efforce d'utiliser des taille de police en em ce qui te permet de faire les zoom a+/a- plus facilement avec des proportions.
Bonjour,
voici quelques points à voir :
* la lisibilité (de taille des caractères, espacement entre les lignes (interlignage), soucis d'accentuation, ...);
* les couleurs : l'information transmise ne doit pas subir de perte lorsque tu change de palette de couleurs (par exemple, tes images en couleurs doivent avoir la même signification en noir et blanc);
* vérifie que tes raccourcis claviers sont en place et explique comment ils fonctionnent.
Tu peux aussi voir du côté de la documentation du RGAA pour trouver quelques idées.
c'est-à-dire ?soucis d'accentuation
qu'est-ce que ça veut dire, changer de palette ?* les couleurs : l'information transmise ne doit pas subir de perte lorsque tu change de palette de couleurs (par exemple, tes images en couleurs doivent avoir la même signification en noir et blanc);
Comment ça, des raccourcis clavier ?* vérifie que tes raccourcis claviers sont en place et explique comment ils fonctionnent.
Bon alors,
* accentuation : il existe des fontes pour lesquelles les diacritiques (dont les accents) se distinguent pas facilement. Par exemple, parce qu'ils sont petits, "collé", d'une forme relativement fantaisie;
* palette de couleur : on a par exemple noir et blanc, niveau de gris, palette des couleurs HTML, ... une image n'aura pas le même rendu suivant la palette qu'on lui associe;
* raccourci clavier : l'attribut tabindex de l'élément a en HTML ca ne te dis rien ?
Normalement , suivre les derniers standard html suffit a permet l'accessibilité pour les handicapé , vu qu'ils ont été prévu pour ça.
Il y a plusieurs points importants a retenir:
Ton site est structuré avec des tableaux. L'une des principale raison de l'abandon de ce genre de construction est du au fait... qu'il était inaccessible pour les mal-voyant. Dans ton cas , il ne faut surtout pas hésité a n'utiliser que de l'html5, sans se soucier de la compatibilité avec les anciens navigateurs. L'html5 permet en effet de structuré le document en fonction de son sens (l'html5 est donc sémantique), il sépare ainsi la partie du titre <header/> , la partie de l'article <article/> , les colonnes sur les coté <aside> etc... Le lecteur d’écrans peut ainsi trouver rapidement les info dans la page.
Enfin, il faut aussi utiliser les attribut Aria , qui sont de infos rajoutée aux balises qui ont été prévu par les lecteur d’écran pour faciliter la lecture.
Il n'est pas nécessaire d'utiliser le HTML 5 pour arriver à un site accessible, mais définitivement, il faut éviter les TABLE et utiliser des DIV. Oui il faut coder selon les normes, mais il y a certains principes à respecter en plus. Un bon site de ressource à ce sujet : http://accessibiliteweb.com/fr/
Aussi, tu peux tester ton site avec le navigateur Lynx http://lynx.isc.org/
Ca ne fait que une ou deux semaines que j'ai appris cette possibilité, mais quel rapport avec les mal-voyants ?définitivement, il faut éviter les TABLE et utiliser des DIV
Toutes ces balises, c'est du html5 ? Et c'est décrit où ?L'html5 permet en effet de structuré le document en fonction de son sens (l'html5 est donc sémantique), il sépare ainsi la partie du titre <header/> , la partie de l'article <article/> , les colonnes sur les coté <aside> etc... Le lecteur d’écrans peut ainsi trouver rapidement les info dans la page.
Enfin, il faut aussi utiliser les attribut Aria , qui sont de infos rajoutée aux balises qui ont été prévu par les lecteur d’écran pour faciliter la lecture.
C'est la 2e fois dans ce fil qu'on me donne cette référence, mais il y a beaucoup de choses à lire et je ne suis pas sûr après lecture d'en retirer quelque chose d'utile ; pourrait-on plutôt me donner des liens vers des sites "accessibles" pour que je puisse voir ce qui a été fait et essayer de m'en inspirer ?Un bon site de ressource à ce sujet...
justement http://accessibiliteweb.com/fr/ est un site accessible(le contraire aurait été très dommage
)
C'est vrai que ça aurait été bêtejustement http://accessibiliteweb.com/fr/ est un site accessible. Mais quelles sont les dispositions prises pour le rendre accessible ? Utilise-t-il, par exemple, le html5 ? Y a-t-il des balises Aria (que je viens de découvrir)
Il suffit de regarder le code source.
Le site n'utilise pas HTML5 (car c'est encore une spécification en draft) ni les balises ARIA (en tout cas j'en ai pas vu).
La promesse de l'HTML5 et du ARIA est de rendre un site internet plus accessible, encore faut il bien le mettre en place. (utiliser les attributs ARIA "role" quand il le faut, le "aria-required" dans les formulaires et j'en passe)
Si tu veux en savoir plus sur l'HTML5 et ARIA, lit cette spécification du W3C qui est très intéressante : http://dev.w3.org/html5/markup/aria/
Il y aussi ce site qui est une bonne introduction à l'accessibilité en HTML5:
http://on-air.hiseo.fr/html5/html5-a...-microformats/
OK, ni HTML5, ni ARIA, mais grâce à quoi ce site est-il accessible ?
et bien en utilisant des attributs tels que "title" pour décrire un lien ou une image ou encore une iframe.
En utilisant le alt pour décrire une image lorsqu'elle est manquante.
En utilisant les <h1> à <h6> pour bien hiérarchiser son site pour montrer l'importance des contenus pour les lecteurs visuels.
Sur le site, ils utilisent une police qui aura le même rendu sur la plupart des navigateurs et que tous les ordinateurs possèdent (en tout cas la plupart)* accentuation : il existe des fontes pour lesquelles les diacritiques (dont les accents) se distinguent pas facilement. Par exemple, parce qu'ils sont petits, "collé", d'une forme relativement fantaisie;
Une police de couleur grise sur un fond blanc n'est pas très lisible pour quelqu'un qui a des difficultés de lecture. Ce site utilise des couleurs vive sur fond blanc ce qui fait que le contenu est parfaitement lisiblepalette de couleur : on a par exemple noir et blanc, niveau de gris, palette des couleurs HTML, ... une image n'aura pas le même rendu suivant la palette qu'on lui associe;
Certains utilisateurs ne peuvent pas utiliser de souris donc il faut mettre en place certaines actions par des raccourcis clavier, par exemple ctrl + P fera un play sur une vidéo. Pour d'autre quand on utilise un slide ou une vidéo, il faut pouvoir mettre des commandes de pause pour que la personne qui a du mal à lire puisse pouvoir faire pause pour pouvoir prendre le temps de lire ce qui est le cas sur le site.* raccourci clavier
Sur le site, tu peux également voir que tu peux choisir la taille de la police.
Etc.
J'imagine que sur IE, c'est view/text size, mais comment fait-on au niveau du code ?Sur le site, tu peux également voir que tu peux choisir la taille de la police.
Comment est fait le choix de la police, vu que si on fait une recherche de "font" sur le code, il n'y aucun résultat ?Sur le site, ils utilisent une police qui aura le même rendu sur la plupart des navigateurs
Mais quand on maintient longtemps la souris au-dessus de l'image du bandeau, il n'y a pas d'info-bulle...En utilisant le alt pour décrire une image lorsqu'elle est manquante.
Quel est le rôle de cette balise, à part de spécifier le texte du clic droit/propriété (qui n'existe pas pour les iframes) ?et bien en utilisant des attributs tels que "title" pour décrire un lien ou une image ou encore une iframe.
Et sinon, tu as vu qu'il y avait un A- et un A+ sur la page ?Envoyé par laurentSc
Tu as déjà entendu parler de "CSS" ?
Ce n'est pas le rôle de l'attribut alt.
C'est un attribut, pas une balise, et il est utilisé pour créer une infobulle (tiens, ça serait pas ce que tu voulais juste au-dessus ?). Dans le cas d'un lecteur d'écran, il est aussi utilisé pour décrire vers quoi le lien fait référence et c'est ce qui sera lu pour aider les mal-voyants dans leur navigation.
Effectivement, pas avant que tu ne me le dises. Mais peux-tu me donner quelques détails ? J'imagine qu'avec ce lien , on passe la valeur 200 à la variable taillePolice qui se trouve à l'adresse http://accessibiliteweb.com/fr/ (ça marcherait comme ça si l'adresse était celle d'un fichier PHP), mais que fait-on avec cette variable ?Et sinon, tu as vu qu'il y avait un A- et un A+ sur la page ?
OK, ne le faisant jamais, je n'y avais pas pensé, mais, avec IE, est-il possible de voir ce CSS ?Tu as déjà entendu parler de "CSS" ?
Ca, c'est justement la faute de IE, qui fait que si on renseigne l'attribut alt, on a une info-bulle...Ce n'est pas le rôle de l'attribut alt.
N'ayant jamais vu de lecteur d'écran, que fait-il avec les attributs "title", il les lit à voix haute ?Dans le cas d'un lecteur d'écran, il est aussi utilisé pour décrire vers quoi le lien fait référence
Si tu regardes le coude source de la page en question, tu verras qu'un fichier CSS est chargé :
Et c'est dans celui-là que la taille de la police est définie.
Code : Sélectionner tout - Visualiser dans une fenêtre à part <link rel="stylesheet" href="squelettes/police200.css" type="text/css" media="screen" />
Oui, c'est possible avec IE de voir le CSS. Soit tu affiches la source, récupères l'URL du fichier et l'entres dans ton navigateur, soit tu fais F12 ce qui ouvre le Developer Tools de IE.
Tu as l'air de ne jurer que par IE, utilise un autre navigateur pour développer, et corrige les problèmes ensuite sur IE, et non l'inverse.
Oui, un lecteur d'écran lira les attributs title à voix haute. Dans l'idéal, il est optionnel quand le texte du lien est exactement celui du title, pour que le visiteur n'ait pas deux fois la même information.
C'est bizarre, dans le source que je regarde, il n'intègre que police100.css...Si tu regardes le coude source de la page en question, tu verras qu'un fichier CSS est chargé...
F12, c'est pratique, car on a d'un coup tous les CSS, mais on est pollué par plein de balises nulles...
IE, c'est une habitude que je ne vais pas changer : c'est le navigateur par défaut de ma boîte et mon PC est professionnel...
Tu ne m'as pas répondu à ça :Mais peux-tu me donner quelques détails ? J'imagine qu'avec ce lien
, on passe la valeur 200 à la variable taillePolice qui se trouve à l'adresse http://accessibiliteweb.com/fr/ (ça marcherait comme ça si l'adresse était celle d'un fichier PHP), mais que fait-on avec cette variable ?
100 est la valeur par défaut, si tu n'as pas la variable dans l'URL c'est ce fichier là qui sera chargé.
Concernant :
J'y ai répondu en fait avec :
Il est facile en PHP de récupérer la valeur du paramètre "taillePolice" et de charger le fichier correspondant ..
Exemple (très) rapide (sans aucune vérification) :
Mais ce n'est plus le forum approprié pour parler de ça.
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
2
3
4
Répondre avec citation
Partager