1178 sujets

Accessibilité du Web

Pages :
Bonjour, je viens de "finir" mon blog, que j'ai codé à la main...

Mon Blog

ayant mis un accent sur l'accessibilité de ses contenus, j'ai voulu le faire passer à différents validateur...

commençons par les bonnes choses... qd je passe sur le validateur de l'apinc, je passe sans problème les 3 priorités je n'ai que quelques avertissement pas bien méchant et qui ne posent pas problèmes...

quand je vais sur Ocawa, c'est à peu prêt pareil, aucune remarques, si ce n'est que certaines de mes images n'ont pas de dimensions de précisé, je vais agir sur ce point très rapidement... mais j'avoue que la tout de suite, prendre ma rêgle et mon compas pour mesurer les images ne m'enchante guère Smiley langue (mais je vais le faire, promis)

par contre, quand je vais sur le validateur de Watchfire, je m'en sort avec une grosse erreur en priorité 3 qui me dit que j'utilise des phrases de liens identiques sur des liens pointant vers des endroits différents... j'ai essayé de voir, ou se trouvais le problèmes, j'ai effectivement trouvé quelques liens identique, j'ai précisé des Title sur mes liens pour les différencier, mais l'erreur perdure...

d'ou mes questions, quel validateur croire le mieux ? celui qui dit que j'ai des erreurs ? ou celui qui dit que tout vas bien ? (j'ai bien peut qu'il ne s'agisse de celui qui me dise que je suis dans l'erreur...
et finnalement, puis je revendiquer les triple AAA, en matière d'accessibilité ? ca irais bien avec ma CSS valide et mon XHTML 1.0 Strict je trouve Smiley langue

Merci à (aux) personnes qui prendront le temps de m'aiguiller.

<moderé par Véro>

P.S.2 : j'ai pas trop cherché, mais si une répose se trouve déja quelques part, j'en suis désolé, mais j'autorise la modération de ce topic...
Modifié par Vero (21 Jun 2006 - 10:13)
Si tu as plusieurs liens du type "lire la suite" sur la même page, il est effectivement mieux de les changer par un texte plus explicite.

Aucun validator n'a totalement raison, et l'accessibilité n'est pas une histoire de validation seulement.
ben le problème c'est qu'il est vrai que j'avais plusieurs liens pointant vers une même page n'ayant pas le même intitulé --> par exemple VOIR et POSTER et le PERMALIEN d'un article pointe tous vers la même page, j'ai donc ajouté des titles différents explicitant quel est le but du lien...

mais si j'en croit ce que raconte le validateur, ce ne devrai pas être ca qui pose problème

d'autre part, cela pourrai provenir des lien de pagination 1 2 3 .... etc qui portent à confusion avec les liens des dates du calendrier, la en effet, le même texte est utilisé pour deux choses différentes et pointant vers un contenu différents... de la même façon j'ai identifié ces liens grace à un title donc normalement je devrai valider l'erreur, mais ca ne passe pas au validateur, j'en perd un peu mon latin...

Je sais bien que l'accessibilité n'est pas qu'une question de validateur, mais ca me permettrais déja de franchir une premiere étape... une fois que mes contenus serons valide, je pourrai m'attacher plus serainement à la création d'une CSS spécialement conçu pour les personnes déficientes visuelle...
Modifié par Viper82 (20 Jun 2006 - 21:51)
Attention!

Ce n'est pas parce que les """"validateurs"""" d'accessibilité prétendent que ton site est accessible que c'est le cas!

Il y a même fort à parier que c'est faux...

Il n'existe pas, il ne peut pas exister de validateurs de l'accessibilité d'un site. Bon nombre des problèmes d'accessibilité proviennent en effet de points que ne peuvent et ne pourront jamais tester des outils automatiques. La pertinence des alternatives textuelles des images en est un exemple typique. Ce n'est pas parce qu'on met des alt que ces derniers sont corrects!

De plus, la création d'une CSS pour les personnes déficientes visuelles est une fausse bonne idée. Il faut en priorité se concentrer sur le contenu de tes pages... Les personnes que tu vises personnalisent en effet souvent les feuilles de style: il ne faut jamais imposer quoi que ce soit dans ce sujet, et surtout pas proposer ce que toi, tu penses être le mieux.

La meilleure synthèse sur ce sujet que j'aie trouvé est en anglais et s'intitule Automated testing - How useful is it? À lire absolument avant que tu n'aies envie de placer un logo sur ta page!!!
Modifié par Gilles (21 Jun 2006 - 09:04)
Il y a bien plus que deux ou trois points à corriger! Il y a eu des efforts, mais malheureusement, comme je le craignais, le résultat est typique de la confiance aveugle accordée aux outils en ligne.

Ton blog est inacessible, et il y a énormément de chose à reprendre. Voici ce que j'ai trouvé en une demi-heure d'inspection et une demi-heure d'écriture Smiley cligne

1. plein de alt non pertinents: "logo box.net", des alt écrits en anglais sans attribut lang="en" avec, des alt="big cheese" au lieu de "grand sourire" (plus le problème de la langue), tous les alts vers les affiches de film: ce sont des images décoratives et non informatives, donc alt="", alt="Logo du site" devrait aussi être alt="" (mets-toi dans la peau d'un aveugle... cela ne lui apporte rien du tout), le pire alt="addtomyyahoo4"
2. la vidéo: il en faut une alternative accessible...
3. le lien vers la pub orange est beaucoup trop long: les personnes utilisant des lecteurs braille doivent en consulter l'intitulé en entier
4. de nombreux liens ne sont pas explicites: les liens sur la droite sur les boutons (au moins, les mettre en français!), les numéros en bas de page, ceux qui commencent par #100... Franchement, en quoi "dièse 100 titre de l'article" est-il plus intéressant que "titre de l'article"?
5. encore des liens non explicites, les pires de tous: ceux dont l'intitulé est l'URL! Imagine ce que cela peut donner à la lecture!
5. tous les title que tu as mis sur les liens sont à revoir. Certes, ils sont différents les uns des autres; mais quand j'entends "poster un commentaire pour l'article : 100", est-ce que je sais de quel article il s'agit? Absolument pas. Il faut reprendre au moins un raccourci du titre de l'article
6. liens "Suiv" (?), liens "«" et "»". Ils sont peut-être visuellement intéressants, mais totalement incompréhensibles à l'oral ("Guillemets ouvrants")
7. Dans le calendrier;les title!="Jour 2006-06-02" gagneraient à être libellés en "2 juin 2006", tu ne trouves pas?
8. attention aux changements de langue, une vraie plaie pour les synthèses vocales: les liens sur la droite, et la longue citation de Gates seront lus comme s'il s'agissait de français.
9. raccourcis clavier: cf. post précédent et le lien vers OpenWeb!
10. la page est beaucoup trop lourde, notamment à cause des images. 190ko! Pense aux connexions bas débit!
11. Les titres de ta page ne sont pas correctement imbriqués: "Juin 2006" ne devrait certainement pas être en h2, mais probablement en h3. En h2, il est plus important que "calendrier" en h3 dont il dépend pourtant...
12. le texte prérempli dans le champ de formulaire est une guideline qui est maintenant abandonnée, car elle pose plus de problèmes d'accessibilité quelle n'en résout. À éviter donc.
13. Quand on désactive les styles, il est impossible de savoir sur quelle page on se trouve: le menu de navigation laisse en effet cliquable le lien vers la page que l'on est en train de lire!
14. Il faut éviter les tailles de police exprimées en pixel, car elles sont non redimensionnables sous IE
15. Quand on augmente la taille des caractères sous FireFox, le calendrier se désaligne et devient n'importe quoi. Une solution simple consisterait à faire de ce calendrier un tableau de données.
16. La taille des caractères du menu n'est pas redimensionnable, car de sont des images dans la CSS. Très mauvais.
17. Dans le formulaire de contact, la mention du fait que * fait d'un champ un champ obligatoire doit apparaître avant le formulaire. Sinon, elle ne sert à rien pour les synthèses vocales.
18. Pour le CV en PDF, il faudrait indiquer la taille du fichier, son type et un lien vers le téléchargement d'Acrobat Reader
19. Il y a plein de texte en majuscules! Ce n'est pas facile à lire pour certains handicaps cognitifs
20. Il faut utiliser les éléments <abbr> et <acronym> quand cela est nécessaire, ce qui n'est jamais fait.

Je dirais donc qu'en priorité, il te faudrait corriger tout ce qui concerne les liens, puis les problèmes de redimensionnement des polices, les changements de langue et les abréviations.

Pour te consoler, dis-toi bien qu'aucun site n'est réellement "accessible": c'est un processus d'amélioration continue...

Bon courage!
Modifié par Gilles (21 Jun 2006 - 10:10)
Ouaip Ouaip, je sais bien que j'ai pas mal de point à vérifier qui ne sont pas vérifiable au validateur...

ce que je disais c'est que je voulais dans un premier temps essayer de remplir un maximum de point requis par les validateur... de cette façon j'aurais déja une base...

Pour ce qui est des acces key, je suis tout a fait d'accord que ca n'est pas le pied... cela dit... ils sont tous sur es liens d'évitement... donc au pire les gens ne sont pas obligés de s'en servir...

pour le contenur flash, je suis d'accord que "objet flash" ne soit pas une bonne alternative... mais bon, j'utilise tinymce comme editeur de texte... et ce dernier ne me permet pas d'entrer une description alternative... il faudrais donc que je prenne le temps de retoucher l'éditeur pour permettre cette fonction (fiou, ca va être rigolo ca)

pour ce qui est du formulaire de recherche pourquoi vaut il mieux virer le contenu ? j'avais justement lu (sur un des validateur) que dans un champs de formulaire, il fallais préciser ce qu'il fallais y entrer...

mais merci pour ces quelques précisions...

mais.... si les validateur ne sont au final pas réellement crédible... comment faire pour être sur de pouvoir se revendiquer un niveau d'accessibilité ? s'auto évaluer ne me semble que très peu réaliste... je pense qu'a un moment ou un autre, il faudrais avoir recours à un juge neutre non ?

EDIT : Un grand merci à Gilles qui à l'air d'avoir passé pas mal de temps sur l'analyse de mon site, merci beaucoup pour ces précieux conseils... je vais faire mon possible pour prendre en considérations ces remarques, c'est déja bon a savoir... bon globalement, je ne sais pas si beaucoup de personnes handicapées viennent sur mon site, mais j'avoue que ces conseil m'ont remis dans le droit chemin Smiley cligne
Modifié par Viper82 (21 Jun 2006 - 10:16)
Viper82 a écrit :

mais.... si les validateur ne sont au final pas réellement crédible... comment faire pour être sur de pouvoir se revendiquer un niveau d'accessibilité ? s'auto évaluer ne me semble que très peu réaliste... je pense qu'a un moment ou un autre, il faudrais avoir recours à un juge neutre non ?


C'est justement ce que je viens de faire Smiley cligne Il est possible de s'auto-évaluer... à condition d'avoir suivi une formation au préalable, et de savoir ce que l'on évalue, et surtout pourquoi on le fait...
ouaip biensur...
perso mon but, c'est de pouvoir justifier de connaissances dans le domaine...
je ne pense pas que mon site soit visité au quotidien par des personnes déficientes visuellement entre autre...

donc, il est vrai que c'est une démarche assez "autosatisfaite" et c'est pour ca que je ne voudrais pas trop "m'auto-évaluer", parce que je pourrai être trop permissif envers moi même Smiley langue , cela dit j'aimerai qd même bien afficher un triple AAA sur mon site mdr Smiley langue

allez, encore quelques efforts a fournir, je vais voir ce que je peux faire et ce qui sera judicieux de mettre en place dans les prochains temps Smiley smile

merci beaucoup...
Quelques remarques à propos des points évoqués ci-dessus :

5. Je confirme : les liens dont l'intitulé sont l'url sont assez indigestes ... mais ce n'est qu'un moindre mal par rapport aux images inutiles dont on entend l'url car le webmaster n'a pas mis d'alt.

6. La moindre des choses est d'indiquer "suivant" ou "précédent" vant les guillemets fermants/ouvrants. Avec l'habitude on sait de quoi il s'agit, mais ce n'est effectivement pas forcément évident quand on est novice.
8. A noter que les synthèses vocales comme jaws sont parfaitement capables de changer de langue en cours de lecture si les attributs lang sont correctement renseignés. (En outre, il faut également que le changement automatique de langue soit activé et que la langue désignée soit installée bien sûr).
9. Les accesskey ne sont pas une nécéssité absoluent mais constituent effectivement un plus non négligeable.
12. A la longue, il est très exaspérant de supprimer les valeurs par défaut inscrites initialement dans le but d'aider. +1 pour éviter, ou au moins veiller à ce que cette valeru par défaut s'efface automatiquement lorsque le champ prend le focus.
17. Les informations inscrites hors label et après le champ auquel se rapporte celle-ci sont souvent perçues par les synthèses comme étant celles pour le champ suivant. Un problème connu par exemple sur phpdebutant, où, lorsqu'on parcourt le formulaire pour poster, l'information est décalée : jaws lit "e-mail" lorsqu'il s'agit du champ pseudo, "titre" lorsqu'il sa'git de l'e-mail, et "message" lorsqu'il s'agit du titre ...
19. Je rajouterais que les majuscules donnent l'impression que l'on crie. (cependant pour une synthèse vocale, aucune différence)
QuentinC a écrit :

5. Je confirme : les liens dont l'intitulé sont l'url sont assez indigestes ... mais ce n'est qu'un moindre mal par rapport aux images inutiles dont on entend l'url car le webmaster n'a pas mis d'alt.


Pour ma part, les liens dont l'intitulé est l'url ne sont la qu'a caractère indicatif pour permettre de facilement crée un lien vers l'article en cours... donc l'intitulé du lien étant l'url du lien est logique, car l'information que je souhaite placer à cet endroit est justement l'url de l'article...

pour ce qui est des images du menu... elle sont placées en CSS, par conséquent elle ne sont pas prises en compte par les lecteur de synthèses vocales (SI ? NON ?), mais normalement le texte "caché" en dessous est lui interprété... cela dit, je vais rendre le menu texte "invisible" plus clair au niveau de la partie en cours Smiley smile
Viper82 a écrit :


Pour ma part, les liens dont l'intitulé est l'url ne sont la qu'a caractère indicatif pour permettre de facilement crée un lien vers l'article en cours... donc l'intitulé du lien étant l'url du lien est logique, car l'information que je souhaite placer à cet endroit est justement l'url de l'article...


Mais c'est extrêmement désagréable sur une synthèse vocale, sans compter qu'il y en a plusieurs dans la page! Je te le fais court:
"h t t p deux points slash slash lucmullé point freu point fre slash blog slash index point p h p point d'interrogation article égal 100 tiret moteur tiret de tiret recherche".
Et ça, répété autant de fois qu'il y a d'articles dans la page, quand la personne navigue de lien en lien. Honnêtement, qu'en penses-tu?


a écrit :
pour ce qui est des images du menu... elle sont placées en CSS, par conséquent elle ne sont pas prises en compte par les lecteur de synthèses vocales (SI ? NON ?), mais normalement le texte "caché" en dessous est lui interprété... cela dit, je vais rendre le menu texte "invisible" plus clair au niveau de la partie en cours Smiley smile


Aucune image n'est prise en compte par une synthèse. Et tu viens de mettre le doigt sur un point gênant: il se trouve que les synthèses tiennent parfois compte du display:none pour... ne pas lire le texte correspondant. Préfère un décalage en relatif (par exemple, de 300 pixels vers le haut ou le bas).
Mais ce n'est pas de cela que je parlais. Je parlais des gens qui consultent la page en redimensionnant les caractères. C'est totalement impossible de le faire comme tu l'as codé, quel que soit le navigateur graphique utilisé. Il faut vraiment corriger ce grave point d'accessibilité (le menu, ça ne peut pas être ignoré)
a écrit :

"h t t p deux points slash slash lucmullé point freu point fre slash blog slash index point p h p point d'interrogation article égal 100 tiret moteur tiret
de tiret recherche".

Ca rallonge encore le tout quand on sait que jaws en français dit par défaut "barre oblique" et non "slash".
ouaip, je comprend bien que c'est chiant...
mais alors comment faire si l'objet de l'information que l'on souhaite transmettre est clairement "la syntaxe" de cette adresse web précise ???

mouaip, limite je pourrai mettre un texte alternatif genre <ahref="l'adresse">Permalien de cet article</a>
Modifié par Viper82 (21 Jun 2006 - 18:16)
Bonjour,

J'avoue ne pas bien comprendre ton objectif.
Le libellé d'un lien doit donner une indication sur le contenu de la page vers laquelle il pointe.
Si tu veux simplement donner un exemple de syntaxe d'une URL, fais-le sans lui donner la fonction de lien.
Tiens, ça c'est un truc que je n'ai jamais compris.
Ca sert à quoi ces "permalien", "lien permanent", "permalink", "#" qu'on voit partout ?
ben dans les blog... le plus souvent tu arrive sur la premiere page... et ou sur une apge annexe, d'une catégories qui évolue au fil du temps...

donc... si tu fais un lien sur la "page" ou se trouve l'article ben au fil du temps ton lien ne sera plus valide...

il faut donc pouvoir identifier chaque article par une page unique qui puisse être liée, n'importe quand...
donc tu fait un lien pointant directement vers la page de l'article...
et le plus souvent sur ce lien, tu trouve un rapel du titre, ce qui permet d'optimiser le référencement de l'article...

donc dans l'absolute, une solution serais de soit donner l'url sans le lien... oubien alors d'explicier dans le libelle du lien qu'il s'agit du lien permanant de l'article...

à méditer!

EDIT quentinC : les liens avec # ce sont des liens internes à la page, mais je ne pense pas d'apprendre quelques chose avec ca, enfin, je le rajoute qd même je trouvais ca etonnant d'avoir un # après ta suite de permalien...
Modifié par Viper82 (21 Jun 2006 - 21:13)
Oui mais alors indiquer "permalien" ou un des synonymes indiqués ci-dessus sur la page même de l'article, c'est complètement inutile ?
IL y a déjà un lien pour chaque article d'un blog : en général, les titres sont cliquables. C'est encore autre chose, ou j'ai rien compris.

a écrit :

EDIT quentinC : les liens avec # ce sont des liens internes à la page, mais je ne pense pas d'apprendre quelques chose avec ca, enfin, je le rajoute qd
même je trouvais ca etonnant d'avoir un # après ta suite de permalien...

Je ne parlais pas des liens contenant un # dans l'URL, mais des liens ayant comme intitulé un simple #. J'en ai même déjà trouvé ici sur le forum ou sur le blog...
ben disons que la présence du permalien dans la page même de l'article c'est vrai qu'elle est inutile...
mais globalement c'est le même script qui construit l'article dans la version BLOG>Page que dans la version BLOG>ARTICLE donc le permalien se retrouve, cela dit, ce serais pas bête de faire un test pour savoir ou on se trouve...

je pense que préciser clairement une adresse sur lakelle faire un lien dans une page présentant plusieur articles, peut justement éviter de faire une manip du genre, ajouter au favoris, en pensant retrouve rle même article par la suite... alors que l'on aura ajouter une page du blog dans ces favoris, mais pas l'article en question...
Pages :