Accessibilité pour les mal-voyants [Résolu]

laurentSc · 26/03/2011, 21h55

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é.

ornitho13 · 27/03/2011, 10h01

Salut,

il existe des outils qui te permettent d'évaluer ton site en terme d'accessibilité.
Fait une recherche sur google :

http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=am%C3%A9liorer+accessibilit%C3%A9+site+web

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)

M1000 · 28/03/2011, 17h25

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.

polymorphisme · 28/03/2011, 17h41

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.

laurentSc · 28/03/2011, 21h06

Citation:

soucis d'accentuation

c'est-à-dire ?

Citation:

* 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);

qu'est-ce que ça veut dire, changer de palette ?

Citation:

* vérifie que tes raccourcis claviers sont en place et explique comment ils fonctionnent.

Comment ça, des raccourcis clavier ?

polymorphisme · 28/03/2011, 21h24

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 ?

vaneck · 29/03/2011, 14h46

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.

DjSteph · 07/04/2011, 20h43

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/

laurentSc · 15/04/2011, 09h15

Citation:

définitivement, il faut éviter les TABLE et utiliser des DIV

Ca ne fait que une ou deux semaines que j'ai appris cette possibilité, mais quel rapport avec les mal-voyants ?

Citation:

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.

Toutes ces balises, c'est du html5 ? Et c'est décrit où ?

Citation:

Un bon site de ressource à ce sujet...

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 ?

ornitho13 · 15/04/2011, 13h45

justement http://accessibiliteweb.com/fr/ est un site accessible

(le contraire aurait été très dommage

)

laurentSc · 17/04/2011, 22h59

Citation:

justement http://accessibiliteweb.com/fr/ est un site accessible

(le contraire aurait été très dommage

)

C'est vrai que ça aurait été bête

. 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)

ornitho13 · 17/04/2011, 23h24

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/

laurentSc · 17/04/2011, 23h30

OK, ni HTML5, ni ARIA, mais grâce à quoi ce site est-il accessible ?

ornitho13 · 17/04/2011, 23h52

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.

Citation:

* 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;

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)

Citation:

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;

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 lisible

Citation:

* raccourci clavier

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.

Sur le site, tu peux également voir que tu peux choisir la taille de la police.

Etc.

laurentSc · 18/04/2011, 10h58

Citation:

Sur le site, tu peux également voir que tu peux choisir la taille de la police.

J'imagine que sur IE, c'est view/text size, mais comment fait-on au niveau du code ?

Citation:

Sur le site, ils utilisent une police qui aura le même rendu sur la plupart des navigateurs

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 ?

Citation:

En utilisant le alt pour décrire une image lorsqu'elle est manquante.

Mais quand on maintient longtemps la souris au-dessus de l'image du bandeau, il n'y a pas d'info-bulle...

Citation:

et bien en utilisant des attributs tels que "title" pour décrire un lien ou une image ou encore une iframe.

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) ?

Bisûnûrs · 18/04/2011, 11h16

Citation:

Envoyé par laurentSc

J'imagine que sur IE, c'est view/text size, mais comment fait-on au niveau du code ?

Et sinon, tu as vu qu'il y avait un A- et un A+ sur la page ?

Citation:

Envoyé par laurentSc

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 ?

Tu as déjà entendu parler de "CSS" ?

Citation:

Envoyé par laurentSc

Mais quand on maintient longtemps la souris au-dessus de l'image du bandeau, il n'y a pas d'info-bulle...

Ce n'est pas le rôle de l'attribut alt.

Citation:

Envoyé par laurentSc

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) ?

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.

laurentSc · 18/04/2011, 13h37

Citation:

Et sinon, tu as vu qu'il y avait un A- et un A+ sur la page ?

Effectivement, pas avant que tu ne me le dises. Mais peux-tu me donner quelques détails ? J'imagine qu'avec ce lien

Citation:

http://accessibiliteweb.com/fr/?taillePolice=200

, 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 ?

Citation:

Tu as déjà entendu parler de "CSS" ?

OK, ne le faisant jamais, je n'y avais pas pensé, mais, avec IE, est-il possible de voir ce CSS ?

Citation:

Ce n'est pas le rôle de l'attribut alt.

Ca, c'est justement la faute de IE, qui fait que si on renseigne l'attribut alt, on a une info-bulle...

Citation:

Dans le cas d'un lecteur d'écran, il est aussi utilisé pour décrire vers quoi le lien fait référence

N'ayant jamais vu de lecteur d'écran, que fait-il avec les attributs "title", il les lit à voix haute ?

Bisûnûrs · 18/04/2011, 14h18

Si tu regardes le coude source de la page en question, tu verras qu'un fichier CSS est chargé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" href="squelettes/police200.css" type="text/css" media="screen" />

Et c'est dans celui-là que la taille de la police est définie.

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.

laurentSc · 18/04/2011, 15h14

Citation:

Si tu regardes le coude source de la page en question, tu verras qu'un fichier CSS est chargé...

C'est bizarre, dans le source que je regarde, il n'intègre que police100.css...

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 :

Citation:

Mais peux-tu me donner quelques détails ? J'imagine qu'avec ce lien

Citation:

http://accessibiliteweb.com/fr/?taillePolice=200

, 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 ?

Bisûnûrs · 18/04/2011, 15h27

Citation:

Envoyé par laurentSc

C'est bizarre, dans le source que je regarde, il n'intègre que police100.css...

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 :

Citation:

Envoyé par laurentSc

Tu ne m'as pas répondu à ça :

Citation:

Mais peux-tu me donner quelques détails ? J'imagine qu'avec ce lien

Citation:

http://accessibiliteweb.com/fr/?taillePolice=200

, 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 ?

J'y ai répondu en fait avec :

Citation:

Envoyé par Bisûnûrs

Si tu regardes le coude source de la page en question, tu verras qu'un fichier CSS est chargé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" href="squelettes/police200.css" type="text/css" media="screen" />

Et c'est dans celui-là que la taille de la police est définie.

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) :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php
$css = ( isset( $_GET['taillePolice'] ) ) ? $_GET['taillePolice'] : '100';
?>
<link rel="stylesheet" href="squelettes/police<?php echo $css; ?>.css" type="text/css" media="screen" />

Mais ce n'est plus le forum approprié pour parler de ça.

26/03/2011, 21h55	#1
laurentSc Débutant Laurent Webmaster Inscription : octobre 2006 Messages : 2 873 Détails du profil Informations personnelles : Nom : Laurent Âge : 48 Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Webmaster Secteur : Industrie Informations forums : Inscription : octobre 2006 Messages : 2 873 Points : 1 320 Points : 1 320	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é.
	00

27/03/2011, 10h01	#2
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Salut, il existe des outils qui te permettent d'évaluer ton site en terme d'accessibilité. Fait une recherche sur google : 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 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)
	00

28/03/2011, 17h25	#3
M1000 Membre habitué Développeur Web Inscription : novembre 2003 Messages : 194 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : novembre 2003 Messages : 194 Points : 133 Points : 133	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. __________________ M1000 Le savoir se partage et le partage est un savoir...
	00

28/03/2011, 17h41	#4
polymorphisme Modérateur Grégory Roche GED (Gestion Electronique de Documentation) Inscription : octobre 2009 Messages : 1 067 Détails du profil Informations personnelles : Nom : Grégory Roche Âge : 38 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : GED (Gestion Electronique de Documentation) Informations forums : Inscription : octobre 2009 Messages : 1 067 Points : 1 445 Points : 1 445	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. __________________ polymorphisme.com Article : Installation de Cocoon Je ne réponds pas aux MP à caractère technique.
	00

28/03/2011, 21h24	#6
polymorphisme Modérateur Grégory Roche GED (Gestion Electronique de Documentation) Inscription : octobre 2009 Messages : 1 067 Détails du profil Informations personnelles : Nom : Grégory Roche Âge : 38 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : GED (Gestion Electronique de Documentation) Informations forums : Inscription : octobre 2009 Messages : 1 067 Points : 1 445 Points : 1 445	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 ? __________________ polymorphisme.com Article : Installation de Cocoon Je ne réponds pas aux MP à caractère technique.
	00

29/03/2011, 14h46	#7
vaneck Membre du Club Inscription : novembre 2010 Messages : 80 Détails du profil Informations forums : Inscription : novembre 2010 Messages : 80 Points : 51 Points : 51	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.
	00

07/04/2011, 20h43	#8
DjSteph Nouveau Membre du Club Stéphane Demers Consultant E-Business Inscription : juin 2009 Messages : 60 Détails du profil Informations personnelles : Nom : Stéphane Demers Localisation : Canada Informations professionnelles : Activité : Consultant E-Business Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : juin 2009 Messages : 60 Points : 38 Points : 38	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/
	00

15/04/2011, 13h45	#10
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	justement http://accessibiliteweb.com/fr/ est un site accessible (le contraire aurait été très dommage)
	00

17/04/2011, 23h24	#12
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	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/
	00

17/04/2011, 23h30	#13
laurentSc Débutant Laurent Webmaster Inscription : octobre 2006 Messages : 2 873 Détails du profil Informations personnelles : Nom : Laurent Âge : 48 Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Webmaster Secteur : Industrie Informations forums : Inscription : octobre 2006 Messages : 2 873 Points : 1 320 Points : 1 320	OK, ni HTML5, ni ARIA, mais grâce à quoi ce site est-il accessible ?
	00

18/04/2011, 14h18	#18
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Si tu regardes le coude source de la page en question, tu verras qu'un fichier CSS est chargé : Code : Sélectionner tout - Visualiser dans une fenêtre à part <link rel="stylesheet" href="squelettes/police200.css" type="text/css" media="screen" /> Et c'est dans celui-là que la taille de la police est définie. 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.
	10

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email