Que pensez-vous de l'accessibilité de ce site ? - Forum Alsacréations : CSS et Standards Web

Auteur
Akhilleus	# 29 Apr 2008 - 10:48:58
48 Posts	Bonjour, je suis entrain de développer un moteur de blog perso et j'aurais voulu avoir votre avis quant à l'accessibilité et l'ergonomie de ce dernier. Je vous le dis d'emblée, actuellement il n'y a que la page "blog" qui soit visible (les autres pages étant basées sur un code source quasiment identique l'intérêt d'en voir plusieurs est moindre) mais le travail sur l'accessibilité est selon moi terminé. Ca se passe ici : http://andreloconte.com/blog/ Points forts/faibles, suggestions, critiques, je prends tout ! Modifié par Akhilleus (29 Apr 2008 - 10:50)
48 Posts
Shunkin	# 29 Apr 2008 - 11:56:35
36 Posts	Bonjour, Dans l'ensemble les règles d'accessibilité me semblent respectées. Quelques points à corriger cependant : - Même si ce n'est pas directement de l'accessibilité, il y a plusieurs erreurs XHTML, autant les corriger tant qu'on est dans la phase de développement. - L'alternative texte sur le logo doit décrire le rôle du lien et non l'image. - Il manque un label pour le champs de recherche. - Les changements de langue ne sont pas précisés (exemple : Windows Live Messenger). - Les acronymes ne sont pas définis (exemple : RSS). Peut-être d'autres choses à corriger mais je n'ai pas le temps d'approfondir pour l'instant.
36 Posts
yodaswii	# 29 Apr 2008 - 12:10:18
The sky's the limit! 500 Posts	L'alternative texte sur le logo doit décrire le rôle du lien et non l'image. Oui et non . Les deux en fait : retranscrire le contenu textuel de l'image et préciser le rôle du lien. Un exemple dans ce cas : "Se rendre à l'accueil de Achille's world blog". Si tu te tapes la tête contre une cruche et que cela sonne creux n'en déduit pas que c'est la cruche qui est creuse... Ancien proverbe chinois.
The sky's the limit! 500 Posts
Akhilleus	# 29 Apr 2008 - 12:13:48
48 Posts	Merci bien, je viens de corriger les problèmes de conformité au standard Edit : je viens également de me rendre compte d'une énormité au niveau de la façon dont j'appelais mes feuilles de style et qui provoquait un bug sous IE. Corrigé ! Modifié par Akhilleus (29 Apr 2008 - 15:27)
48 Posts
Ericf	# 29 Apr 2008 - 14:02:22
118 Posts	Bonjour, J'ai vu rapidement ta page, c'est pas mal dans l'ensemble. J'ai relevé 4 points litigieux : - manque la balise acronym sur RSS : <acronym title="Really Simple Syndication">RSS</acronym> - supprimer "Rechercher" dans l'input texte, qui est plus gênant qu'autre chose - certains contrastes de couleurs ne sont pas suffisants - il faut indiquer les changements de langue dans la page Modifié par Ericf (29 Apr 2008 - 14:07)
118 Posts
Benjamin D.C.	# 29 Apr 2008 - 14:23:36
Modérateur 2177 Posts	Ericf a écrit : - manque la balise acronym sur RSS : <acronym title="Really Simple Syndication">RSS</acronym> Une abréviation, c'est bien aussi. This is the way, step inside.
Modérateur 2177 Posts
skywalk3r	# 29 Apr 2008 - 14:28:23
"Je suis son fils!!!" 279 Posts	Salut, rapidement : - innaccessible au non-latinophones... []->ok, je sors de la rubrique, je suis encore loin de pouvoir donner des conseils en matière d'accéssibilité... C'est l'taaaaalent ça M'sieur dame!!!
"Je suis son fils!!!" 279 Posts
Ericf	# 29 Apr 2008 - 14:37:17
118 Posts	Benjamin D.C. a écrit : Une abréviation, c'est bien aussi. Mea culpa, tu as parfaitement raison, il s'agit ici d'une abréviation !
118 Posts
mecho	# 29 Apr 2008 - 14:48:37
90 Posts	Bonjour, Il manque un 'alt' du type 'Lancer la recherche' sur le bouton 'ok'. +1 pour : supprimer "Rechercher" dans l'input texte, qui est plus gênant qu'autre chose Il manque un label pour le champs de recherche Utiliser un label explicite et l'attacher (for="") au champ de saisie. Pour l'intitulé du 'alt' du logo : 'Achille's world blog' peut suffire : voir http://www.pompage.net/pompe/bien-utiliser-le-texte-alternatif/
90 Posts
yodaswii	# 29 Apr 2008 - 14:55:27
The sky's the limit! 500 Posts	Pour l'intitulé du 'alt' du logo : 'Achille's world blog' peut suffire En effet, reste à voir quelle information on doit faire passer à mon sens cela peut être intéressant d'indiquer la destination du lien par la même occasion. Si tu te tapes la tête contre une cruche et que cela sonne creux n'en déduit pas que c'est la cruche qui est creuse... Ancien proverbe chinois.
The sky's the limit! 500 Posts
Akhilleus	# 29 Apr 2008 - 23:11:58
48 Posts	@skywalk3r : Label ajouté au formulaire de recherche et intégration de ce dernier Je vais maintenant tenter de travailler sur le rendu des éléments du formulaire qui comme toujours varie de manière conséquente d'un navigateur à l'autre. Par contre la traduction de "Windows Live Messenger", je ne suis pas d'accord, il s'agit ici de la marque d'un produit, je me vois mal traduire ça par "La messagerie instantanée de Microsoft" Merci pour vos conseils Modifié par Akhilleus (29 Apr 2008 - 23:29)
48 Posts
yodaswii	# 30 Apr 2008 - 09:15:32
The sky's the limit! 500 Posts	Par contre la traduction de "Windows Live Messenger", je ne suis pas d'accord ... Comme spécifié il s'agit d'un "changement de langue" (utile notamment pour les lecteurs d'écrans) et non d'en faire une traduction. Si tu te tapes la tête contre une cruche et que cela sonne creux n'en déduit pas que c'est la cruche qui est creuse... Ancien proverbe chinois.
The sky's the limit! 500 Posts
knarf	# 30 Apr 2008 - 15:20:09
742 Posts	Bonjour, Attention à tous les h2 déclarés en display:none cela risque de ne pas être visible même par les principaux intéréssés, celui-ci pouvant être pris en compte par certaines synthèses vocales et donc de ce fait être également invisible pour celles-ci. Je ne suis pas certains que cela soit une bonne idée d'encapsuler le label dans un h3. Pour les liens d'évitements est-ce vraiment porter préjudice au design que de les laisser visible (couleur du hover par exemple)? EDIT : La feuille alternative permettant de permuter contenu et menu visuellement, ne sera visible que par certains navigateurs, à moins de rajouter un style switcher pour ceux ne le permettant pas. De là, découle autre chose, dans le cas d'une labelisation (accessiweb, rgaa je ne pense pas) par exemple, un thème passera alors que l'autre non. La raison est que le flux ne suis pas l'agencement graphique dans le premier cas. De mémoire si cela est toujours d'actualité c'est le 10.3. Mais beaucoup de discussion ont lieu autour de ce critère. Dans le cas présent ce n'est pas dramatique on ne parle pas de labelisation mais je trouvais amusante cette situation d'un même site risquant d'être labellisable et non labellisable en même temps. Tiens d'ailleurs quel serait l'avis et les conseils d'un expert la dessus si ce critère est toujours d'actualité? EDIT 2: J'ai par curiosité désactivé les couleurs, à ce moment là l'on perds l'information de la rubrique en cours, il serait peut être utile de mettre un mécanisme supplémentaire comme par exemple le texte en gras. Modifié par knarf (01 May 2008 - 15:15)
742 Posts
Akhilleus	# 30 Apr 2008 - 15:33:28
48 Posts	yodaswii a écrit : Comme spécifié il s'agit d'un "changement de langue" (utile notamment pour les lecteurs d'écrans) et non d'en faire une traduction. Je corrige @Knarf : pour le label dans le h3, je ne suis pas certain non plus mais label étant une balise inline ça ne devrait pas poser de problème.
48 Posts
knarf	# 30 Apr 2008 - 16:05:41
742 Posts	Pour la validité non puisque apperement le site est validé mais dans la construction du document il y a quelquechose que je ne trouve pas logique. Les niveaux de titre et les labels sont deux balises "sémantiquement" porteuses de sens et là on donne un sens différent au même élément textuel.
742 Posts
Akhilleus	# 30 Apr 2008 - 16:32:17
48 Posts	@knarf :le styleswitcher est prévu De là, découle autre chose, dans le cas d'une labelisation (accessiweb, rgaa je ne pense pas) par exemple, un thème passera alors que l'autre non. La raison est que le flux ne suis pas l'agencement graphique dans le deuxième cas. Pourrais-tu me donner des un/des lien(s) relatif à ce sujet ? (je t'avoue que je suis un peu perdu su ce point) Modifié par Akhilleus (30 Apr 2008 - 16:38)
48 Posts
Hermann	# 01 May 2008 - 12:15:05
Modérateur 2435 Posts	knarf a écrit : Pour les liens d'évitements est-ce vraiment porter préjudice au design que de les laisser visible (couleur du hover par exemple)? +1 D'autre part, il est toujours bénéfique (personnes ayant une vue réduite) de coupler le a:hover d'un a:focus pour mettre d'avantage en exergue les lien qui ont le focus en accès clavier. Je ne pense pas que le lien "aller au menu" soit nécessaire puisqu'on y accède très rapidement en accès clavier. knarf a écrit : De là, découle autre chose, dans le cas d'une labelisation (accessiweb, rgaa je ne pense pas) par exemple, un thème passera alors que l'autre non. La raison est que le flux ne suis pas l'agencement graphique dans le deuxième cas. J'ai l'impression qu'Accessiweb a fait un interprétation un peu restrictive du point 6.1 des WCAG : 6.1 ...Lorsque le contenu est organisé de manière logique, il sera restitué de manière compréhensible lorsque les feuilles de style sont désactivées ou non supportées. Pour moi c'est d'avantage une question de logique et de cohérence de contenu que d'ordre cohérent, d'ailleurs ça me semble plus pertinent non? Il est peut-être préférable de placer le contenu avant la sidebar pour le référencement mais bon ce n'est que mon point de vue. Tu devrais ajouter un titre a ta page (Blog ici) en H1 et supprimer l'unique H1 correspondant au nom du site, cela ne va pas forcément améliorer le référencement du nom s'il est similaire ou title. C'est le title qui est important. La FAQ répond aux questions fréquemment posées. Vérifiez qu'elle ne contient pas une réponse à votre problème.
Modérateur 2435 Posts
knarf	# 01 May 2008 - 15:11:42
742 Posts	Akhilleus a écrit : Pourrais-tu me donner des un/des lien(s) relatif à ce sujet ? (je t'avoue que je suis un peu perdu su ce point) Comme je ne savais pas sur quoi portait exactement ta demande sur le flux ou sur les critères donc voici les critères accessiweb.criteres_accessiweb Pour le flux,c'est la maniére dont est agencé ton code brut (ordre d'apparition des éléments css désactivée). Dans 1 cas tu aura un flux : header - menu - contenu et un ordre graphique (de gauche à droite) : header - menu -contenu Dans l'autre tu auras un flux : header - menu - contenu et un ordre graphique (de gauche à droite) header - contenu - menu Hermann a écrit : J'ai l'impression qu'Accessiweb a fait un interprétation un peu restrictive du point 6.1 des WCAG : Oui, d'ailleurs je l'ai bien précisé c'est un critère souvent discuté même entre experts (il doit y avoir quelques posts sur ce forum qui aborde le sujet d'ailleurs). Modifié par knarf (01 May 2008 - 15:12)
742 Posts
Akhilleus	# 05 May 2008 - 07:51:42
48 Posts	C'était concernant le flux Merci pour ta réponse.
48 Posts
Akhilleus	# 05 May 2008 - 15:02:28
48 Posts	Petite MAJ : knarf a écrit : J'ai par curiosité désactivé les couleurs, à ce moment là l'on perds l'information de la rubrique en cours, il serait peut être utile de mettre un mécanisme supplémentaire comme par exemple le texte en gras. - modification de la position des liens dans le menu - modification de l'effet :hover sur les liens du menu Hermann a écrit : D'autre part, il est toujours bénéfique (personnes ayant une vue réduite) de coupler le a:hover d'un a:focus pour mettre d'avantage en exergue les lien qui ont le focus en accès clavier. - ajout de la pseudo-classe :focus pour les éléments du menu et les liens d'évitement knarf a écrit : Pour les liens d'évitements est-ce vraiment porter préjudice au design que de les laisser visible (couleur du hover par exemple)? - corrigé - suppression du lien d'évitement "Aller au menu" - ajout de ligne pointillées entre les éléments du bloc "découvertes" - ajout d'un footer - ajout d'un lien retour en haut de page dans le footer - changement de la couleur du thème - ajout d'un dégradé à la base des liens du menu survolés ou qui ont le focus - ajout d'un commentaire conditionnel "lte IE 6" pour ne pas afficher le dégradé (PNG) Prochaine étape, optimisation du footer (réalisé à la volée) et création de la mise en forme pour les billets. Ca se passe au même endroit : http://andreloconte.com/blog/ Modifié par Akhilleus (07 May 2008 - 16:03)
48 Posts
Prévenir un modérateur