Mon site est-il parfaitement accessible ?

Bonjour à tous,
Je viens de terminer un site pour une association s'occupant de personnes handicapées et je souhaite votre avis sur son accessibilité.
J'ai bien entendu testé le code et le css, mais je veux un avis orienté "purement accessibilité".
Pourriez-vous prendre quelques minutes de votre temps précieux et me donner vos conseils d'amélioration?
L'adresse, c'est http://www.alphasucy.com
Merci par avance de ce service !

Bonjour zamoy

La démarche est louable et le site fort sympathique mais je doute que tu reçoives beaucoup de réponses En effet, vérifier une démarche d'accessibilité pour un site prend beaucoup de temps.

Je te souhaite quand même que certains aient le temps de repérer quelques éléments qui pourraient perturber la visite des pages...

Oui, je sais bien .
Mais c'est un tout petit site (15 pages) et j'ai tout vérifié scrupuleusement, mais j'ai besoin d'un avis extérieur, alors je croise les doigts qu'une âme charitable veuille bien me donner son avis...
Merci à cette potentielle âme charitable!!!

dans l'ensemble c'est plutot bien, certains alt pourraient etre plus pertinent. Meme si elles sont bien altée avec un alt="" beaucoup d'image de déco pourrait etre mise dans la css.
En terme de css y a une tendance à la classite aigue.

La "classite aigue"?!? C'est à dire? Il y a trop peu d'éléments définis en général mais à qui j'ai attribué une "class"?
Bon, sinon, je vais voir ce que je peux faire pour les alt...
En tout cas, un grand merci d'avoir pris le temps de checker tout ça!!!

Hello,

Une "classite aigue" signifie que tu as nommé beaucoup (trop) d'éléments à l'aide de "class" alors qu'il siffit en général de les désigner selon leur hierarchie, ce qui évite d'encombrer le code HTML.

On voit souvent ce cas :

<ul class="menu">
	<li><a href="" class="lienmenu">Menu 1</a></li>
	<li><a href="" class="lienmenu">Menu 2</a></li>

	<li><a href="" class="lienmenu">Menu 3</a></li>
	<li><a href="" class="lienmenu">Menu 4</a></li>
	</ul>

Ici la class="lienmenu" est parfaitement inutile par exemple. Il suffit de désigner les liens ainsi :

ul#menu li a {
...
}

Bonjour Zamoy

Sympa ton site

As-tu vérifié les ratios luminosité/contraste pour les mal-voyants ?
http://juicystudio.com/services/luminositycontrastratio.php#specify

Pour les accesskeys, peut-être lire la page "accessibilité/navigation" de Quentin
http://quentinc.net/accessibilite/

Puis faire un tour sur WebXACT
Tu auras facile de règler les quelques problèmes qui se posent et éliminer certains warnings

Bon boulot

Eric

goetsu a écrit :
dans l'ensemble c'est plutot bien, certains alt pourraient etre plus pertinent. Meme si elles sont bien altée avec un alt="" beaucoup d'image de déco pourrait etre mise dans la css.
En terme de css y a une tendance à la classite aigue.

Bonjour Goetsu,

Ca c'est une question que je me pose ! Mettre la déco dans la css...

Evidemment, il n'y a plus de alt ou de longdesc mais ne cache-t-on pas la des éléments aux personnes non voyantes ?
D'un autre côté, elles ne sont pas obligées non plus de consulter le longdesc si elles ne le souhaitent pas.

Si je prends la ligue braille belge, je lis dans cette page : http://www.liguebraille.be/fr/cond_acces.asp

"ici, voyants, malvoyants et aveugles ont accès aux mêmes informations et au même langage !"

Vraiment, je m'interroge...



Eric

> Raphael : ok docteur, je vais voir ce que je peux faire pour soigner ma "classite aigue"!!! Je n'ai pas mis de "#quelquechose", à part pour les divs uniques parce que je pensais que cette façon de faire ne permettait qu'un seul élément dans la page, or là, il y a au moins 2 listes...
> Eric : oui, j'ai vérifié les contrates grâce à la toolbar AIS et ça passe "fingers in the nose"... Pour ce qui est des accesskeys, j'ai consulté bon nombre de pages expliquant l'échec des accesskeys et le fait qu'on se posait la question de les garder ou pas, et j'ai décidé de mettre ceux-là... A voir...
En tout cas, great thanx à tous, vous ne savez pas à quel point vous m'aidez!!!

eric1725 a écrit :
Evidemment, il n'y a plus de alt ou de longdesc mais ne cache-t-on pas la des éléments aux personnes non voyantes ?
D'un autre côté, elles ne sont pas obligées non plus de consulter le longdesc si elles ne le souhaitent pas.

Pour ma part (et sans être le moins du monde expert ou même correctement averti sur les problématiques d'accessibilité), je trouve la volonté de « rendre exactement le même contenu » un peu douteuse et dangereuse. En particulier pour les images.

La limite entre image décorative et image de contenu n'est pas tout à fait évidente à déterminer. Les images de type « puce » qui précèdent le texte d'un titre, par exemple, pourraient être rejetées dans la CSS... mais si on les garde dans le code HTML, alors un attribut alt vide est nécessaire, comme tu le fais :

<h2><img src="imgs/carres.gif" alt="" height="13" width="31"> Nous connaître</h2>

Pour le coup, cette petite image aurait pu être une image de fond du h2 (avec un padding-left sur le h2, du coup).

Par contre, je m'interroge sur sur certaines images « illustratives » qui accompagnent des contenus.

Exemples :

<img src="imgs/logo.jpg" alt="logo de l'association" class="gauche" height="150" width="76">Alpha-Sucy
est une association para-municipale dont le but est l'aide et
l'insertion
dans la vie quotidienne des personnes handicapées, quel que soit leur âge
et leur handicap.

(en passant, un petit paragraphe pour ce flot de texte, peut-être ?).
Quel est l'intérêt de faire passer l'information « logo de l'association », ici ? Faire savoir à un non-voyant que les voyants verront un logotype, ce qui lui fait une belle jambe ?

D'une, un logotype est quelque chose d'essentiellement visuel, censé aider à associer un visuel facilement reconnaissable à une entité moins facilement définissable (association, entreprise, marque, gamme). Il vise uniquement un public voyant, et me semble donc parfaitement inutile pour des non-voyants... ou tout contexte dans lequel l'image ne serait pas affichée. Pour ma part, j'opterais plutôt pour un attribut alt vide.

Deuxième exemple :

<img src="imgs/inter_p.jpg" alt="Une bénévole et une jeune fille" class="droite" height="155" width="150">Les rencontres inter générations&nbsp;: les personnes bénévoles
de l'Atelier du lundi se
mettent à la disposition des jeunes pour leur apprendre à tricoter

Un autre « cas d'école » : une illustration thématique accompagnant un texte.
Ce type d'illustration n'est pas indispensable : il est utilisé, pour l'essentiel, pour attirer l'oeil du lecteur, dont on sait (ou dont on suppose) que le texte brut, sans images, le barbe profondément. En dehors de cette fonction principale, on ne peut pas non plus affirmer que l'illustration n'apporte pas de sens... mais ce sens (qui confine à l'impression, à l'ambiance) est-il sensible via une description en une phrase ? Ne faudrait-il pas jouer l'économie, plutôt que de fournir une description sommaire, n'apportant pas vraiment d'information, et potentiellement perturbante pour le lecteur ?

Bref, j'aurais tendance à être prudent pour les alternatives textuelles sur des images de type « illustratif ».

Hum hum, large débat on dirait...
Finalement, il doit y avoir autant d'avis sur ce sujet que de personnes concernées non?
Pour ma part, je ne suis pas une experte en accessibilité mais je suis plongée dedans depuis un moment et surtout sensibilisée à ce sujet et notamment aux navigatueurs à synthèse vocale et je pense qu'il faut continuer de décrire les images "illustratives". Cela dit, il est possible que je ne le fasse pas bien et que dans ce cas, ça n'apporte rien... Mais j'y tiens, je pense que c'est le moyen de faire le moins de différence entre valides et personnes handicapées... Ne demandent-ils pas à ce qu'on leur décrivent les choses que nous valides voyons? Si, ça arrive souvent...
Mais j'peux m'tromper!!!

Bonjour,

Pour appuyer les remarques de florent :

Quel est le texte qui te semble le plus clair entre :

a écrit :

Nous connaitre
Logo de l'association
Alpha-Sucy est une association para-municipale dont le but est l'aide et l'insertion dans la vie quotidienne des personnes handicapées, quel que soit leur âge et leur handicap.

et

a écrit :

Nous connaitre
Alpha-Sucy est une association para-municipale dont le but est l'aide et l'insertion dans la vie quotidienne des personnes handicapées, quel que soit leur âge et leur handicap.

Autre exemple (page nos horaires)

a écrit :

Nos horaires
Permanences

* lundi : de 9 h 30 à midi et de 14 heures, à 17 heures,
* mardi : de 9 h 30 à midi et de 14 heures, à 17 heures,
* mercredi : sur rendez-vous,
* jeudi : de 9 h 30 à midi et de 14 heures, à 17 heures,
* vendredi : de 9 h 30 à midi et de 14 heures, à 17 heures,
* samedi : sur rendez-vous.
Horaires

Lorsque tu lis ce texte, comment interprètes tu le mot "horaires" :
- Il y à d'autres horaires
- Il y à une faute de frappe
- Il y à quelque chose que je ne comprends pas...

a écrit :
Mais j'y tiens, je pense que c'est le moyen de faire le moins de différence entre valides et personnes handicapées

C'est très louable mais le but de la description alternative des images n'est pas de faire voir avec des mots mais d'aider l'utilisateur à comprendre le rôle et le sens ajouté par l'image au contenu.

Il faut comprendre qu'un utilisateur de synthèse vocale ne sait pas que la description alternative concerne une image, cela lui est rétrocédé comme une partie du texte qu'il est en train d'écouter et rien de plus.

Du coup, dans les deux exemples, les descriptions alternatives sont inutiles : elles n'ajoutent rien au sens du contenu et à sa compréhension et ne font qu'alourdir et pertuber l'écoute, voire dans le second cas poser un problème de compréhension.

Ces images sont utilisées à titre décoratif, elle ne doivent pas être décrites.

En revanche dans la page contact :

Ton contenu " hors image " se présente comme :

a écrit :

Alpha Sucy
9ter, rue Maurice Berteaux
94370 SUCY-EN-BRIE
01 45 90 75 16
alpha.sucy@wanadoo.fr

C'est suffisant pour le comprendre, mais tu à décidé d'identifier chaque partie par une icone afin de rendre l'ensemble visuellement plus clair.
Dans l'utilisation que tu en fait; ces images, bien que formellement décoratives, ajoutent du sens en créant un effet de "structure" :

a écrit :

Alpha Sucy
Adresse
9ter, rue Maurice Berteaux
94370 SUCY-EN-BRIE
Telephone
01 45 90 75 16
Mail
alpha.sucy@wanadoo.fr

Tu à eu raison de leur donner une description alternative.

Dernier exemple :

Dans la page "action", deux images sont décrites dans la liste.

Prenons la première, décrite avec "Stand à la journée des associations", ce qui rends le contenu suivant :

a écrit :
Participation à des rencontres locales (Journée des Associations, Journée Solidarité...) Voir la Fête des associations 2006. Stand à la journée des associations

A la lecture de ce paragraphe, n'y à-t-il pas quelque chose qui "coince" ?

Quel est le "sens ajouté" à cette partie de texte par la description alternative ?

Si je replace ce paragraphe dans son contexte :

a écrit :

# Prêt ou don de matériel,
# Sensibilisation,
# Participation à des rencontres locales (Journée des Associations, Journée Solidarité...) Voir la Fête des associations 2006. Stand à la journée des associations.
# Participation à différentes actions collectives (Téléthon...)
# Conférences (organisation de conférences-débats...)

A la lecture, "Stand à la journée des Associations" c'est quoi au juste :
- Une phrase tronquée ?
- Un item de la liste loupé ?
- Quelque chose que je ne comprends pas ?

Question :

Il faut décrire cette image ou ne pas la décrire ?

La réponse n'est pas aussi évidente, cette image peut tout aussi bien être décrite ou pas, cela dépends de ton intention, de ce que tu voulais dire ou montrer en choisissant cette image et pas une autre.

Mais il y à une chose qui est certaine : La description actuelle est insuffisante ou inutile...
Jean-Pierre
Modifié par jpv (09 Oct 2006 - 22:00)

Merci Jean-Pierre pour avoir développé et précisé mon embryon de réflexion.

zamoy a écrit :

Finalement, il doit y avoir autant d'avis sur ce sujet que de personnes concernées non?

:) Correct !

A titre de comparaison, si je veux me rendre quelque part, qui d'autre que moi peut décider que les béquilles, mon gado ou mon scooter électrique sont les plus appropriés ?????
Bien entendu, je veux décider seul. Même si je me casse la figure.
Des collègues sepiens n'ont bien entendu pas la même perception des choses mais c'est leur problème...

Donc j'aurais tendance, dans ce que je vis personnellement, à prôner le libre arbitre.

Si la personne non-voyante ne souhaite pas consulter le longdesc, ben il passe tout simplement dessus en pressant sa flèche bas ou en pressant la lettre "p" (etc).

Nous, nous aurons fait notre boulot et ce sera à eux de choisir... non ?



a++++

Eric

Bonjour,

Je partage tout à fait l'avis de Mpop et Jcv, car la description d'une image par les mots, n'est premièrement pas le but des attributs alt et longdesc. Il n'apporte pas réellement d'intérêt d'avoir une description qui de toute manière ne réfletera pas la réalité. En si peu de caractères autorisés par ces deux attributs, il sera impossible de "raconter", et j'utilise ce mot volontairement, le contenu d'une image. Qu'il ait une petite description d'un élément que de toute manière il ne voit pas n'apportera rien au sens de ce qu'il va lire autour. A l'inverse, quelqu'un qui voit bien, aura le loisir de regarder attentivement l'image, et en percevra forcément plus que cette description par alt ou longdesc qu'il ne verra en l'occurence pas. La perception entre les deux personnes sera de toute manière différente, sauf que l'une aura suffisamment d'information à se faire lire par son navigateur pour ne pas avoir passer x descriptions d'images inutiles. A fortiori dans des sites ou le contenu est important.

Pour une certaine partialité de l'accessibilité autant pour les gens opérationnels que pour les non-opérationnels, je pense que si légender cette photo est important, il faudrait le faire par une légende dans le texte, et à ce moment la laisser l'attribut alt vide. Mais ce n'est là que mon avis de graphiste frustré par le fait que certains ne peuvent pas voir les images que je mets sur mon site ou mon blog, qui seraient autant pour eux que pour d'autres.

a écrit :

Nous, nous aurons fait notre boulot et ce sera à eux de choisir... non ?

Non !

Ton travail consiste à déterminer, selon la nature des images et leur contexte d'utilisation si il faut ou il ne faut pas leur donner une description alternative.

Il faut décrire une image chaque fois qu'elle apporte du sens au contenu ou qu'elle contient des informations qui sont nécessaire à sa compréhension.

Il ne faut pas décrire une image quand elle n'est utilisée qu'à des fins purement décorative.

Ce n'est pas une question "philosophique" : lors d'une procédure d'audit, une image illustrative décrite de manière indue sera relevée comme un élément d'invalidation.

Par ailleurs, la simple écoute avec un lecteur d'écran d'une page qui contient des images qui ne devraient pas être décrites suffit généralement pour comprendre la pollution importante que cela génère, jusqu'à dans les cas extrèmes (description systématique) rendre le contenu partiellement ou toalement incompréhensible.

Au sujet de alt et longdesc :

L'attribut Alt sera systématiquement lu, par défaut, par un lecteur d'écran, certes l'utilisateur peut décider de ne pas lire les attributs alt, mais il ne peut pas le faire de manière sélective.

L'attribut longdesc ne contient pas la description alternative mais l'adresse url d'une page qui contient la description.
L'utilisateur peut, dans ce cas, décider de consulter ou pas la description alternative.
Mais il le fera car il ne sait pas si la description longue est nécessaire ou pas à la compréhension du contenu.
Par ailleurs l'attribut longdesc dans son implémentation actuelle est quasi inutilisable et il faut le doubler d'un lien en dur également appelé D-link.

Donc l'idée, développée par eric d'une description "au cas où" et de reporter la décision de la consulter ou pas sur l'utilisateur est une très mauvaise idée.

Jean-pierre

Salut,

Expliqué comme ça... d'accord !

Ce fut long lol

Merci

Eric

Bonjour à tous,

Je trouve ce site clair et facile d'accès ... juste des détails à peaufiner :

La navigation par tabulations suit un ordre logique, mais difficile de savoir où est le curseur, il manque des a:focus en complément des a:hover

a:hover [b]a:focus[/b] {
color : #033; 
background-color: #cfc;
text-decoration: underline;
}
a.menu:hover [b]a.menu:focus[/b] {
color : #fff; 
font-weight : bold; 
background-color: #033;
text-decoration: underline;
} 

Un title devrait avertir que le lien "Webmaster" ouvre le logiciel de messagerie :

<a href="mailto:***@yahoo.fr" class="menu" [b]title="Envoyer un mail"[/b]>webmaster</a>

Bonne suite.

Oui oui, j'ai bien noté toutes les suggestions, mais je n'ai malheureusement pas encore eu le temps d'y apporter la moindre modif... Ce n'est qu'une question de temps et les journées ne sont malheureusement composées que de 24 heures (dont quelques unes destinées au repos)!
Mais en tout cas, merci à tous de vos remarques, je vais pouvoir bien améliorer ce site... quand j'aurai 2 minutes de libres!