1178 sujets

Accessibilité du Web

Ca va peut-être être une question récurrente pour vous. Mais à l'heure actuelle, je ne connais pas trop les outils (je ne veux pas jaws (trop cher)) pour tester mes pages HTML.
Sachant bien sûr que dès le départ je développe ces pages dans un soucis d'accessibilité, de référencement, et aux normes. Mais je peux parfois oublier/zapper des choses et pour être sûr que je ne laisse rien passer, je cherche un outil qui me permettrait de tester une page (puis le site Smiley lol ) comme si j'étais non voyant.

Peut-être en passant par de la reconnaissance vocale, mais un peu long quand même, ou bien des outils qui restranscriraient l'ensemble du contenu.

Après je me heurte à un autre problème qui est le Javascript et l'affichage de popin (en gros un layer qui vient pardessus le contenu et qui affiche du texte). Comment gérer cela de manière efficace.

Si je suis pas clair, n'hésitez pas à poser des questions Smiley biggol

Merci
Bonjour,
Pour tester l'"accessibilité" de mes pages (pas uniquement pour les mal/non voyants), je fais plusieurs tests notamment grâce à l'excellente extension de firefox Web Developer Toolbar :

Avant de démarrer l'intégration de mes pages, je passe les maquettes en niveaux de gris, vérifie les contrastes, les différences de couleurs et les différences d'intensité (Colour Contrast Analyser).

Je désactive les scripts "js" et vérifie que j'accède toujours à toutes les pages et informations présentes sur le site.

Je teste la navigation par tabulation (bon fonctionnement des ancres, ...).

Je désactive les feuilles de styles et vérifie que mes pages sont correctement balisées et "sémantiquement" cohérentes (hiérarchisation des titres, ...).

Je désactive les images de fond et m'assure d'avoir prévu des couleurs de substitution à ces dernières.
J'affiche l'ensemble des "alt" des images et vérifie leurs pertinences.

Je teste l'affichage et le bon comportement du site sur les navigateurs suivants : IE6, IE7, Firefox3, Safari et Opéra.

Je vérifie que mon site n'est pas trop gourmand en ressources cpu (poids/vitesse de chargement des pages) grâce à l'extension firebug de firefox (onglet réseau).

Et depuis peu, j'utilise le lecteur d'écran en ligne gratuit suivant : WebAnywhere.

En espérant avoir répondu quelques peu à ta question et que d'autres personnes partageront leurs expériences.
Modifié par mecho (22 Sep 2008 - 15:03)
Si je reprend chacun de tes points, je vais mettre ceux que je vérifie :

mecho a écrit :
Bonjour,
Pour tester l'"accessibilité" de mes pages (pas uniquement pour les mal/non voyants), je fais plusieurs tests notamment grâce à l'excellente extension de firefox Web Developer Toolbar :

T'inquiète pas c'est le premier outil qui est installé chez moi Smiley lol

mecho a écrit :

Avant de démarrer l'intégration de mes pages, je passe les maquettes en niveaux de gris, vérifie les contrastes, les différences de couleurs et les différences d'intensité (Colour Contrast Analyser).

Pour les couleurs/contrastes j'ai jamais la main au niveau de la créa Smiley decu , mais _ça va, on a le controle en général. Jvais testoyer l'outil

mecho a écrit :

Je désactive les scripts "js" et vérifie que j'accède toujours à toutes les pages et informations présentes sur le site.

Par défaut je code en mode : j'affiche tout sans JS, les éléments sont cachés via un jeu subtile où une classe CSS est mise par JS sur l'élément HTML :

document.documentElement.className+=' hasJS';

ensuite via cette classe, je cache les éléments en les préfixant dans la CSS :

.hasJS .monElm {display:none;} /* ou le code CSS nécessaire à laisser ça accessible */

mecho a écrit :

Je teste la navigation par tabulation (bon fonctionnement des ancres, ...).

Toujours aussi, je mets un lien, dès qu'il y a une action que ce soit JS ou pas.

mecho a écrit :

Je désactive les feuilles de styles et vérifie que mes pages sont correctement balisées et "sémantiquement" cohérentes (hiérarchisation des titres, ...).

Toujours fait au moment où je code

mecho a écrit :

Je désactive les images de fond et m'assure d'avoir prévu des couleurs de substitution à ces dernières.
J'affiche l'ensemble des "alt" des images et vérifie leurs pertinences.

Oui je ne le fais pas forcément, mais faudra que je m'y mette Smiley lol

mecho a écrit :

Je teste l'affichage et le bon comportement du site sur les navigateurs suivants : IE6, IE7, Firefox3, Safari et Opéra.

Toujours aussi, sachant que j'ai tous ces navigateur en version portable Smiley lol
Ca m'évite de devoir les installer et pourrir une machine.

mecho a écrit :

Je vérifie que mon site n'est pas trop gourmand en ressources cpu (poids/vitesse de chargement des pages) grâce à l'extension firebug de firefox (onglet réseau).

Pour firebug c'est normal, bien sur avec Yslow c'est encore mieux.
Mais sinon j'utilise charles proxy en simulant une ligne 56K histoire de voir si mon site se charge proprement sur une ligne bas débit


mecho a écrit :

Et depuis peu, j'utilise le lecteur d'écran en ligne gratuit suivant : WebAnywhere.

Jvais regarder ça, j'ai pas que pour un site qui est en local sur ma machine, il ne me soit d'aucune utilité.



mecho a écrit :

En espérant avoir répondu quelques peu à ta question et que d'autres personnes partageront leurs expériences.

Merci Smiley lol
Bonjour,

Il existe la possibilité d'installer JAWS en version d'évaluation.

Il permet de travailler par sessions de 40 minutes.
knarf a écrit :
Bonjour,

Il existe la possibilité d'installer JAWS en version d'évaluation.

Il permet de travailler par sessions de 40 minutes.

ah ?
interesting, mais j'ai trouvé webIE
et aussi Thunder de Sensory Software : http://www.screenreader.net/
Modérateur
lu' ! Smiley crazy

Gatsu35 a écrit :
Après je me heurte à un autre problème qui est le Javascript et l'affichage de popin (en gros un layer qui vient pardessus le contenu et qui affiche du texte). Comment gérer cela de manière efficace.
Perso, je te dirais en mettant, dans un premier temps, un système de détection de CSS qui te permet de savoir si tu as la possibilité de restituer ce layer ou non.

Si ce n'est pas le cas, tu n'affectes aucun gestionnaire d'événements sur le lien et tu pointes sur une nouvelle page.

Si, en revanche, tu disposes de CSS, tu crées ton fond transparent puis un conteneur unique en fin de page que tu remplies au moment du clic en faisant une requête Ajax récupérant le contenu de la page correspondante.

Et pour compléter le tout, il peut être utile d'ajouter un loader lorsque le contenu n'est pas encore chargé afin d'indiquer à l'utilisateur qu'il se passe quelquechose.
Modifié par koala64 (22 Sep 2008 - 17:50)
koala64 a écrit :
lu' ! Smiley crazy

Perso, je te dirais en mettant, dans un premier temps, un système de détection de CSS qui te permet de savoir si tu as la possibilité de restituer ce layer ou non.

on est d'accord

koala64 a écrit :

Si ce n'est pas le cas, tu n'affectes aucun gestionnaire d'événements sur le lien et tu pointes sur une nouvelle page.

Faut créer la page Smiley bawling

koala64 a écrit :

Si, en revanche, tu disposes de CSS, tu crées ton fond transparent puis un conteneur unique en fin de page que tu remplies au moment du clic en faisant une requête Ajax récupérant le contenu de la page correspondante.

J'ai pas pigé pourquoi tu me parles de fond transparent.
Mais ce conteneur unique faudrait balancer une sorte de focus histoire de dire au lecteur d'écran : "hey connard, ça se passe ici maintenant dans mon petit layer". Ou alors j'ai pas trop pigé

koala64 a écrit :

Et pour compléter le tout, il peut être utile d'ajouter un loader lorsque le contenu n'est pas encore chargé afin d'indiquer à l'utilisateur qu'il se passe quelquechose.

Ouais ça c'est la moindre des choses.
A ce sujet là www.ajaxload.info pour ceux qui cherchent des loaders
Modérateur
a écrit :
Faut créer la page Smiley bawling
En effet... et donc rappeler aux graphistes et consultant(e)s avec qui tu travailles qu'il n'y a pas qu'une façon de naviguer et qu'il serait donc souhaitable qu'ils prévoient ces cas car ça change ta méthode de travail; cela devrait être pris en compte dès le départ et non dans une démarche d'accessibilité tardive. Smiley smile

a écrit :
J'ai pas pigé pourquoi tu me parles de fond transparent.
C'est par habitude, en rapport à un script de layer dont tu te sers régulièrement. Smiley cligne

a écrit :
Mais ce conteneur unique faudrait balancer une sorte de focus histoire de dire au lecteur d'écran : "hey connard, ça se passe ici maintenant dans mon petit layer". Ou alors j'ai pas trop pigé
C'est une bonne idée, oui, que de donner le focus après avoir cliqué sur le lien... En revanche, ce n'est pas pour le lecteur d'écran, puisque celui-ci accède à la nouvelle page et ne voit pas le layer (la détection de css l'empêchant de passer par cette voie)
Modifié par koala64 (23 Sep 2008 - 11:36)
Pour ceux qui aimeraient tester un lecteur d'écran mais qui cherchent une alternative à jaws, il existe NVDA (Non-Visual Desktop Access). Le rendu textuel est étonnamment très proche, hormis que NVDA utilise les voix standard SAPI5 alors que jaws à sa synthèse propre (élocance).
Sinon le texte lu et les métainformations sont très semblables. Ne vous privez pas c'est open source.
Modifié par QuentinC (23 Sep 2008 - 14:21)
QuentinC a écrit :
Pour ceux qui aimeraient tester un lecteur d'écran mais qui cherchent une alternative à jaws, il existe NVDA (Non-Visual Desktop Access). Le rendu textuel est étonnamment très proche, hormis que NVDA utilise les voix standard SAPI5 alors que jaws à sa synthèse propre (élocance).
Sinon le texte lu et les métainformations sont très semblables. Ne vous privez pas c'est open source.

Qui pourrait-être mieux placé que toi sur le sujet Smiley love Smiley love Smiley love Smiley love
Merci Smiley love Smiley love Smiley love
NVDA est un logiciel de bombe de balle.

Smiley love Smiley love Smiley love

PS : ceci a été écrit avec les yeux fermés.
PS2 : QuentinC pourrais-tu me dire pourquoi lorsque je souhaite naviguer dans un champ texte pendant l'édition du formulaire, je ne peut pas le faire lorsque NVDA est lancé.

Exemple : je suis en mode édition d'un message et lorsque je souhaite naviguer dans mon message à l'intérieur d'un <textarea> ou d'un <input> je ne peux pas.

Saurais-tu pourquoi ?

Edit : j'ai trouvé pourquoi. C'est tout simplement le mode formulaire qu'il faut activer en utilisant la combinaison de touche NVDA+ESPACE.

A+
Modifié par Gatsu35 (25 Sep 2008 - 07:19)
Bonjour,

J'avoue être très réservé sur les Thunder et autres NDVA, dont la maturité est loin d'être évidente et dont la "représentativité" est, disons, pour le moins discutable.

En termes de maturité, outre les difficultés récurentes pour l'utilisateur non geek (pour ma part, je n'ai jamais réussi à obtenir un fonctionnement utilisable dans la vie réelle pour NVDA, et pourtant, je passe pour un utilisateur relativement compétent dans ce domaine), se posent les questions :
* de conformité UAAG, pourtant évidentes
* de fonctionnalités. La clé d'un lecteur d'écran est la capacité à explorer le contenu et à y naviguer. Aucun lecteur d'écran hormis les trois grand commerciaux (Jaws, Windows Eyes, et Supernova, la petite bête qui monte) ne m'a jamais convaincu au point de passer à une utilisation quotidienne.

En termes de représentativité, je crains qu'on ne confondent ici, involontairement, ce qui existe et ce qui est utilisé. Lors du passage obligé à des tests utilisateurs dans le cadre d'un audit accessibilité (en europe occidentale), Jaws/HAL restent le point obligé. Pour les sceptiques, faire un tour sur les sites des fournisseurs de solutions tels que CECIAA en France.

Enfin, en termes d'intégration, les solutions alternatives bénéficieront de ce qui est fait pour ces solutions tête de liste, mais l'inverse est totalement incertain et n'a pas de valeur lors d'une évaluation. Ce qu'on peut résumer en forme de clin d'oeil par: ce n'est pas parce que ça marche dans Firevox que c'est concrètement accessible dans le contexte screen readers.

En bref: n'oubliez pas ces solutions alternatives, mais basez-vous sur Jaws et éventuellement Supernova/Hal (dans un cadre européen).

<edit> j'oubliais: Jaws français en version d'évaluation (mode 40 minutes) et Supernova (Hal) (mode 30 jours). Il va de soi que je n'ai aucun intérêt financier blabla...</>
Modifié par Laurent Denis (25 Sep 2008 - 08:13)
Gatsu35 a écrit :
pour être sûr que je ne laisse rien passer, je cherche un outil qui me permettrait de tester une page (puis le site Smiley lol ) comme si j'étais non voyant.


Pour continuer les interventions rabat-joie, attention à ne pas confondre accessibilité et aveugle avec lecteur d'écran.

Tester l'accessibilité = se baser sur une méthode d'évaluation type RGAA / accessiweb / etc. dont le rôle est justement de faire abstraction de l'aide technique spécifiquement utilisée (ici, le lecteur d'écran).

Que l'accessibilité aboutisse à des sites "optimisé pour..." serait assez curieux Smiley cligne . Les solutions techniques type Jaws n'ont qu'un rôle limité (mais important) dans l'évaluation d'accessibilité.

En d'autres termes, c'est un métier. Et sinon, il y a des outils pour ceux dont ce n'est pas le métier, faits par des gens dont c'est le métier Smiley cligne
@Gatsu35 > Parce que tu as réussi à saisir du texte dans un champ sans activer le mode formulaire avant ? Bizarre, je n'ai jamais vu que c'était possible ça.

@LD > Oui, effectivement, au niveau de la maturité, NVDA a encore beaucoup de chemin à faire. Je ne l'utilise pas quotidiennement, et pour cause : pas de curseur jaws (très pratique !) et surtout la réactivité est médiocre, normal car les voix SAPI sont beaucoup plus lourdes qu'élocance (mêm eespeak)
NVDA reste néanmoins une bonne bouée de secours quand jaws n'est pas disponible pour une raison X ou Y. C'est aussi une bonne bouée pour qui ne veut pas ou ne peut pas débourser 1000 euros.

En gros, perso, j'utilise NVDA... pour installer jaws, comme vous utilisez IE pour installer firefox.
Gatsu35 a écrit :
Comment se mettre à la place d'un mal/non voyant ?

Pour ma part, je ne pense pas qu'on puisse.
Aussi, pour y pallier, tu peux te tourner auprès d'un établissement spécialisé pour aveugles et mal-voyants, expliquer ton travail et demander à ce qu'on teste celui-ci.
Ta démarche sera très certainement favorablement accueillie.

Laurent Denis a écrit :
Tester l'accessibilité = se baser sur une méthode d'évaluation type RGAA / accessiweb / etc. dont le rôle est justement de faire abstraction de l'aide technique spécifiquement utilisée

Oui, il faut connaitre et utiliser au moins une de ces méthodes d'évaluation.

Laurent Denis a écrit :
En d'autres termes, c'est un métier.

Certes, on a souvent tendance à l'oublier Smiley cligne