[Amateur] Médiathèque Louis Aragon

Bonjour,

Après plusieurs semaines de travail acharné (si, si ), j'aimerais avoir des avis sur le site d'une Médiathèque municipale (celle de mon petit village).

Il ne s'agit que du blog sur lequel je fais des tests (le blog définitif sera sur un nom de domaine qui lui est consacré). Autrement dit, les retours qui m'intéressent ne sont pas, pour l'instant, sur le fond des articles, qui ne sont que factices. Ce serait plutôt sur la pertinence du code dans mes pages, et sur leur côté "attractif" ou non.

J'ai tenté de suivre au mieux les directives d'Opquast (ce n'est pas terminé). Je précise que je ne suis néanmoins qu'un bidouilleur-amateur du dimanche, volontaire pour créer ce modeste site web

Merci à tous ceux qui prendront quelques minutes pour me donner leur avis !
Modifié par Fix (14 Mar 2011 - 19:19)

Je reconnais que donner un avis général sur un site n'est pas forcément évident

Je me permets donc de préciser un peu mes attentes : je découvre petit à petit les contraintes liées à l'accessibilité, et j'aimerais en particulier avoir vos retours concernant mon site sur ce point précis... même si je serais ravi de lire des avis sur d'autres sujets également

Merci et bonne soirée à tous !

Vite fait :
Le titre en vert fluo, c'est pas top !
Simple à prendre en main, pour l'utilisateur lambba, c'est parfait.
Après, je laisse voir les pros, mais j'ai donné mon avis.

Pour le titre, je n'ai pas eu le choix : c'est le lettrage de la médiathèque tel qu'il a été fourni par l'architecte, et tel qu'il figure dans la réalité sur le mur extérieur de la Médiathèque.

Idem pour les autres couleurs : elles m'ont été imposées (gentiment) par la directrice, car ce sont celles qui sont utilisées à l'intérieur de la médiathèque. J'ai donc essayé de composer avec elles, en les testant grâce au site Contrast-A, ce qui m'a fait arriver à la conclusion que seul le noir, pour le texte comme pour les liens, offrait un contraste suffisant avec toutes ces couleurs si différentes.

Mais là aussi je suis ouvert à toute suggestion !

Bonsoir,

Concernant l'accessibilité, puisque c'est la question .

Mineur : La phrase "Les champs marqués d'une étoile sont obligatoires." du formulaire de contact serait mieux en haut de celui-ci.

Mineur : Le marquage du focus via le seul 'outline' sur les boutons des formulaire n'est pas très visible lors de la navigation au clavier. Le doubler avec un changement de couleur serait un petit plus.

Plus gênant : L'animation dans "Notre actualité" pose des problèmes lors d'une navigation au clavier, on s'y perd. Il faudrait peut-être l'annuler lorsqu'on navigue à l'intérieur. Et puis c'est gênant aussi si on commence à lire une phrase et que l'animation fait passer à l'actualité suivante sans qu'on ait fini de lire la précédente.

Après un rapide coup d'œil, c'est tout ce que j'ai remarqué. Dans l'ensemble c'est largement mieux que ce que l'on voit d'habitude.

Un grand merci pour cet avis !

Shunkin a écrit :
Mineur : La phrase "Les champs marqués d'une étoile sont obligatoires." du formulaire de contact serait mieux en haut de celui-ci.

Maintenant que tu me le dis, ça me paraît évident C'est corrigé.

Shunkin a écrit :
Mineur : Le marquage du focus via le seul 'outline' sur les boutons des formulaire n'est pas très visible lors de la navigation au clavier. Le doubler avec un changement de couleur serait un petit plus.

C'est juste. Je vais voir ça. Ce ne devrait pas être trop dur...
Edit : c'est réglé.

Shunkin a écrit :
Plus gênant : L'animation dans "Notre actualité" pose des problèmes lors d'une navigation au clavier, on s'y perd. Il faudrait peut-être l'annuler lorsqu'on navigue à l'intérieur. Et puis c'est gênant aussi si on commence à lire une phrase et que l'animation fait passer à l'actualité suivante sans qu'on ait fini de lire la précédente.

Alors là, en revanche ça me semble poser un gros problème :
1. D'abord, j'ai corrigé ça... en partie seulement, en faisant en sorte que le carousel s'arrête si le curseur de la souris se trouve au-dessus ou si l'on a cliqué sur "Billet suivant" ou "Billet précédent".
2. Néanmoins, pour la navigation au clavier, mes modifications précédentes ne servent à rien. Mais voici mon problème :
- d'abord les flèches/liens "Billet suivant" et "Billet précédent" sont ajoutés dynamiquement via jQuery ; par conséquent la navigation au clavier ne les prend pas en compte ! Premier problème, que je peux néanmoins résoudre en ajoutant ces liens "en dur" dans mon code. À ce moment là, néanmoins, un utilisateur qui navigue avec autre chose qu'un navigateur ayant le javascript activé verra deux liens qui ne lui serviront à rien... Alors qu'est-ce qu'il vaut mieux ? Liens dynamiques ou liens en dur ?
Edit : ces liens "en dur" seraient également inutilisables pour quelqu'un utilisant sa propre CSS...
- d'autre part, comment naviguer au clavier avec ce type de lien ? Mettons que je sois, en navigant au clavier, sur le lien "Billet précédent"... Comment je fais si je veux voir le billet suivant ? Je me retape à naviguer à travers tous les liens de la page juste pour revenir au lien précédent, qui me permettra d'accéder au billet souhaité ? Existe-t-il une solution à ce problème ?
- enfin, je ne parviens pas à faire en sorte que le carousel s'arrête, au minimum, si je suis en train de lire un billet du carousel tout en navigant au clavier : si le titre de l'un des billets du carousel a le "focus", alors il faudrait interrompre le défilement du carousel. J'ai tenté cela par :

jQuery('#carousel-editos .post-title').focus(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); });

mais cela reste sans effet. J'ai pourtant repris les fonctions permettant d'interrompre le carousel lors du survol de la souris. Peut-être quelqu'un de plus calé que moi en javascript verrait-il ce qui cloche ? (il s'agit du script jCarousel)
Modifié par Fix (17 Mar 2011 - 07:05)

Bonjour,

Je trouve votre site pas mal.
La seul critique que je me permet de vous dire, sera que vous avez trop de couleurs, vous en avez plus de 5.. vous devriez vous contenter de 3 voir 4 couleurs.

Cordialement,

Shunkin a écrit :
Mineur : Le marquage du focus via le seul 'outline' sur les boutons des formulaire n'est pas très visible lors de la navigation au clavier. Le doubler avec un changement de couleur serait un petit plus.

Je pensais que j'avais résolu cela... mais apparemment, sous IE ça ne fonctionne pas... J'ai ajouté les états "hover"/"active"/"focus" dans ma CSS, et pourtant rien ne se passe sous IE :

input:hover.submit, input:active.submit, input:focus.submit, input:hover.preview, input:active.preview, input:focus.preview { background: #9CC; }

Quelqu'un saurait-il pourquoi le bouton n'est pas stylé sous IE ?

Shunkin a écrit :
Plus gênant : L'animation dans "Notre actualité" pose des problèmes lors d'une navigation au clavier, on s'y perd. Il faudrait peut-être l'annuler lorsqu'on navigue à l'intérieur. Et puis c'est gênant aussi si on commence à lire une phrase et que l'animation fait passer à l'actualité suivante sans qu'on ait fini de lire la précédente.

Après pas mal de temps passé dessus, et une discussion avec l'auteur de jCarousel sur gitHub, je crois avoir résolu ce problème également :
1. L'animation à l'intérieur du carrousel s'arrête si le curseur de la souris est dessus OU si l'on utilise les boutons "Billet suivant"/"Billet précédent" OU si le billet a l'intérieur du carousel a l'état "focus" (pour la navigation au clavier) ;
2. Les flèches du clavier sont utilisables dans le carousel : la touche "tab" permet d'accéder au premier billet du carousel, puis les flèches du clavier permettent d'afficher les autres billets, puis la touche "tab" permet de sortir du carousel.
Est-ce que ça semble satisfaisant du point de vue de l'accessibilité ?

Je suis, d'autre part, preneur de tout autre avis sur mon site ! Merci d'avance !
Modifié par Fix (20 Mar 2011 - 17:49)

Bonsoir,

Pour cette ligne :

input:hover.submit, input:active.submit, input:focus.submit, input:hover.preview, input:active.preview, input:focus.preview { background: #9CC; }

Essayer plutôt ça :

input.submit:hover, input.submit:active, input.submit:focus, input.preview:hover, input.preview:active, input.preview:focus { background: #9CC; }

En ce qui concerne le Carrousel, ça à l'air nettement mieux.
Avec un peu de Javascript on doit pouvoir encore l'améliorer.
Pas le temps ce soir mais je vais y réfléchir (en espérant que d'autres y réfléchissent avant moi )

Le code CSS modifié fonctionne avec IE8... mais pas avec IE6 ou 7. Y a-t-il une raison ?

Shunkin a écrit :
En ce qui concerne le Carrousel, ça à l'air nettement mieux.
Avec un peu de Javascript on doit pouvoir encore l'améliorer.

L'améliorer dans quel sens ?

Merci et bonne soirée à tous !