Que pensez-vous de l'accessibilité de ce site ?

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)

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.

a écrit :
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".

Merci bien, je viens de corriger les problèmes de conformité au standard

http://validator.w3.org/images/valid_icons/valid-xhtml10

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)

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)

Ericf a écrit :
- manque la balise acronym sur RSS : <acronym title="Really Simple Syndication">RSS</acronym>

Une abréviation, c'est bien aussi.

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

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 !

Bonjour,

Il manque un 'alt' du type 'Lancer la recherche' sur le bouton 'ok'.

+1 pour :

a écrit :
supprimer "Rechercher" dans l'input texte, qui est plus gênant qu'autre chose

a écrit :
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/

a écrit :
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.

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

a écrit :
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.

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)

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.

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.

@knarf :le styleswitcher est prévu

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.

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)

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 :

a écrit :
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.

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)

C'était concernant le flux
Merci pour ta réponse.

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)