Avis sur Accessibilité : http://theevilsnest.com

Bonjour,

Tout d'abord je salue et remercie le site alsacréation qui m'a été très utile dans l'apprentissage du développement web.

Mon site est consacré à une bande dessinée (requiem chevalier vampire) :
http://theevilsnest.com

Je précise tout de suite que le site ne supporte pas I.E 6 (Je n'ai aucune idée de l'affichage sous I.E 6). Je suis de ceux qui pensent que c'est en indiquant aux internautes toujours équipés de cet ancêtre qu'ils devraient se mettre à jour qu'on finira par enfin mettre I.E 6 à la retraite définitive.

Voilà bref, j'ai passé beaucoup de temps à optimiser les images et les temps de chargement, m'autorisant un peu de javascript de temps à autre (JQuery m'a réconcilié avec le javascript, ou plutôt m'a permis de ne plus me prendre la tête avec ).
Je m'intéresse à l'accessibilité / l'ergonomie du site. Je me rends bien compte que fermer la porte à I.E 6 (qui représente toujours quoi... 40% du marché?) et parler d'accessibilité pourra en faire sursauter quelques uns, mais on est presque en 2010 après tout...
Modifié par poppy (11 Dec 2009 - 09:38)

C'est que 11% : http://www.w3schools.com/browsers/browsers_stats.asp

Bonjour,

Ça y va fort d'emblée. Le "splashscreen" est à éviter au possible, d'autant plus lorsqu'il s'accompagne d'un son qui se lance automatiquement (j'avais le casque sur les oreilles, j'ai de la chance si mes tympans en sont sorti indemnes).

Passons.

Le background du site est trop contrasté au niveau des couleurs (contraste violent : du noir au rouge) et arbore un motif aux formes abruptes et répétitives; après avoir passé quelques minutes sur le site, l'image s'est imprimée sur ma rétine ..

Je parle au nom de la santé tant visuelle qu'auditive de mes camarades, je pense qu'il va falloir corriger ça avant d'espérer obtenir des avis plus complets.

Bonjour,

Mon dieu...

Un splash screen...

Un message débile...

Des liens en pagaille comme on le faisait en 1995...

Bref, un site qui pourrait avoir 15 ans vu son look, je m'attendrais presque à voir des tableaux dans le code.

Reflexion intense : est-ce que je dois mettre un avertissement "Âmes sensibles s'abstenir de lire la suite" ?


Ah au fait, le message pour que les gens mettent à jour IE, ce serait magique si le procédé fonctionnait; mais la personne qui a eu cette idée (il y a, quoi, plus d'un an ?) a juste oublié de conduire une petite étude de cible avant de concevoir son idée. Les gens qui utilisent encore IE6 actuellement ne sont pas des n00bs du web qui ne savent pas mettre à jour leur PC, juste des gens qui n'ont pas les droits d'admin sur celui-ci. Le message est donc totalement inutile et particulièrement énervant.



Niveau accessibilité puisque c'est ce qui t'intéresse : ce n’est pas brillant :
* Textes blancs et fins sur fond noir > très difficile à lire et extrêmement fatiguant pour les yeux.

* Textes verts tout aussi fins sur le même fond > même problème mais en plus ça jure avec le rouge du design

* Texte verts sur rouge > ah bah là problème inverse, le contraste est trop faible, mais les effets sont les mêmes : difficultés de lecture + fatigue.

* Les trucs qui bougent sont généralement une mauvaise idée, surtout si on ne peut pas les stopper. Ils détournent le regard du contenu important.

* Magnifique utilisation de alt et title :

<img alt="Banniere Requiem" src="../images_Site/main/banniereSite1.jpg" title="Resurrection, the Evil's nest" />

Alors : le title est inutile et le alt n'est pas correct... Title peut être utilisé sur les liens pour donner une information supplémentaire et nécessaire à propos du lien. Alt, lui, DOIT être utilisé, sur les images, pour apporter une alternative au texte porté par l'image. Le alt doit contenir la même information que l'image.

* Dans le même genre :

li><a href="http://theevilsnest.com/sources/accueil.php" title="Accueil, News">Accueil</a></li>

Les titles sont totalement inutiles puisqu'ils n'apportent rien, le titre du lien étant suffisamment explicite.

* Oh du target="_blank" ça aussi c'est très années 90. Les gens n'aiment pas que de nouvelles fenêtre ou onglets s'ouvrent sans leur avis. Accessoirement, ils savent très bien le faire eux même quand ils le veulent.

* La suite de liens inutiles et sans rapport avec le site sous le menu n'est pas accessible parce qu'elle prend une place considérable avant le contenu...


Allons faire un petit tour dans le code :
* Dans le titre le "bd" devrait être écrit en majuscules (puisque c'est un acronyme) ou mieux en toute lettres ; bon accessoirement "site bd" n'est pas des masses utile dans le titre... Le vrai titre du site serait plus approprié : "Resurection - the devil's nest"

* La description du site est, dans son état actuel, inutile ; je doute même que google (et les autres) l'utilise. Il faut la fournir un peu plus plutôt que de se contenter de paraphraser le titre.

* La meta revisit-after ne sert à rien

* La pléthore de code JS devrait se trouver en fin de documents et les scripts en lignes devraient être externalisés. Il serait également bien de diminuer le nombre de fichiers.

* L'utilisation de <p> pour baliser les paragraphes, c'est bien.

* Les styles en ligne, c'est pas bien.

Je m'arrête là parce que le code est vraiment lourd à lire.

Mais, en bref : tu as un site qui semble tout droit sorti des années 90 et qui refuse un navigateur de cette époque...


EDIT :

Akhilleus a écrit :
Je parle au nom de la santé tant visuelle qu'auditive de mes camarades, je pense qu'il va falloir corriger ça avant d'espérer obtenir des avis plus complets.

Je me coltine peut être un dinosaure, mais au moins je suis préservés des sons indésirables.

Du coup je vais en rajouter une couche : la musique qui se lance toute seule, ça aussi c'est très années 90...

EDIT : J'allais oublier, pour te mettre en conformité avec les règles de ce salon, que tu as, j'en suis sûre, lu attentivement, merci de bien vouloir éditer ton premier message et rajouter le nom ou l'URL de ton site dans le titre.
Modifié par Hermann (11 Dec 2009 - 19:39)

Hé bin... ça attaque dur !

Alors j'aurais quelques questions et réponses :

Qu'y as-t-il de si mauvais à utiliser une petite introduction en Flash sur la page d'entrée d'un site Internet ? Pour le son je comprend le point de vue (son retiré : ok) mais une intro en Flash pour un fansite, je ne vois pas bien en quoi c'est si dramatique... ?

J'avoue avoir tendance à trop forcer les contrastes, j'en prends bonne note et j'ai atténué le background.

Les liens en pagailles (toujours sur cette page d'Entrée) sont justement là pour le référencement et en les mettant là ça m'évite de les mettre ailleurs.

"Un site qui pourrait avoir 15 ans vu son look" - la critique est utile quand elle est intelligente...

En ce qui concerne I.E, c'est pas parce qu'on a pas les droits admin qu'on ne peut pas aller voir son gentil admin et lui demander de nous installer un navigateur plus récent et respectueux des normes.

Textes fins et trop / pas suffisamment contrasté. Je le note et tacherai d'améliorer ça.

Bon les trucs qui bougent qu'on ne peut pas stopper, je suppose qu'il s'agit de la galerie aléatoire et des news ? hmm... je dois pouvoir stopper la galerie au survol.

pour les alt et titre, ça chipote un peu mais pourquoi pas, je peux inverser les valeurs.

Pour le menu, les title me permettent de mettre des alternatives au texte (comme Trailer => Les bandes annonces)

Il n'y a pas de target="_blank", hors sujet.

La suite de liens dans le menu, je le note. Pareil pour les balises meta (revisit-after n'est pas du tout utilisé ?)

Pourquoi le JS devrait être en fin de document ? Le chargement du code javascript est important pour l'affichage des derniers articles, l'expérience de navigation est bien meilleure une fois le javascript téléchargé.

Enfin les styles en ligne, méa culpa, j'ai tendance à fixer les problème d'affichages ponctuels d'abord directement dans le code et oublier une fois terminer. Je m'en occuperai.

Bien, certaines remarques sont vraiment constructives, d'autre moins, et le ton n'est pas vraiment jovial, mais on avance !

merci pour tous ces conseils et la rapidité de réaction de ce forum.
Modifié par poppy (11 Dec 2009 - 10:07)

poppy a écrit :
Qu'y as-t-il de si mauvais à utiliser une petite introduction en Flash sur la page d'entrée d'un site Internet ? Pour le son je comprend le point de vue (son retiré : ok) mais une intro en Flash pour un fansite, je ne vois pas bien en quoi c'est si dramatique... ?

Que ce soit en Flash ou pas, ça reste un splash screen, une page totalement inutile, relativement pénalisante pour le référencement (aucune contenu) et qui force l'utilisateur à faire un clique suplémentaire (ou lui laisse une chance de partir, au choix). Je te conseille quand même de surveiller tes stats pour voir combien de visiteur sautent cette page (en arrivant directement sur la vraie pas d'accueil soit grace aux moteurs de recherche soit à des bookmarks) et ceux qui quittent le site avant même d'avoir vu la page suivante ; cela pourrait être instructif pour toi.

poppy a écrit :
Les liens en pagailles (toujours sur cette page d'Entrée) sont justement là pour le référencement et en les mettant là ça m'évite de les mettre ailleurs.

Si c'est pour le référencement... Aucun intérêt. Ca donne juste une page mal organisée.

poppy a écrit :
"Un site qui pourrait avoir 15 ans vu son look" - la critique est utile quand elle est intelligente...

... Il faut savoir accepter la critique. Ton site ressemble à ce qui se faisait en 1995. Je ne vois pas en quoi cette critique manque d'intelligence... de constructivité peut-être, et encore...

poppy a écrit :
En ce qui concerne I.E, c'est pas parce qu'on a pas les droits admin qu'on ne peut pas aller voir son gentil admin et lui demander de nous installer un navigateur plus récent et respectueux des normes.

Oui... Primo l'admin réseau il faut le trouver (les miens, je crois qu'ils sont en Inde, ou au sous-sol...) Secundo la réponse sera : Internet est sencé être utilisé pour votre travail par pour aller sur des sites de BD.

Pour quelqu'un qui cherche à se faire virer, ça peut être une bonne idée...

poppy a écrit :
pour les alt et titre, ça chipote un peu mais pourquoi pas, je peux inverser les valeurs.

Le problème n'est pas de les inverser mais de comprendre leur fonction. Title est inutile sur une image est l'est la plupart du temps sur les liens.

poppy a écrit :
Pour le menu, les title me permettent de mettre des alternatives au texte (comme Trailer => Les bandes annonces)

Dans ce cas, il est préférable de déclarer le changement de langue dans le code. La traduction n'est pas vraiment utile, elle apporte une redondance supperflue.

poppy a écrit :
Il n'y a pas de target="_blank", hors sujet.

T'es sûr de toi ? Si je les ai vu dans ton code c'est qu'il y en avait...

poppy a écrit :
Pourquoi le JS devrait être en fin de document ? Le chargement du code javascript est important pour l'affichage des derniers articles, l'expérience de navigation est bien meilleure une fois le javascript téléchargé.

Pour pouvoir permettre le chargement des éléments important de la page (le contenu, principalement) avant les éléments décoratifs.

poppy a écrit :
Bien, certaines remarques sont vraiment constructives, d'autre moins, et le ton n'est pas vraiment jovial, mais on avance !

Pour le ton non jovial, ça dépends de l'entrée en matière ; arriver pour parler d'accessibilité en annonçant se moquer des utilisateur d'un certain navigateur, ça n'aide pas.


Accessoirement, la compatibilité pour IE6 c'est loin d'être le calvaire que tout le monde croit... La preuve est que sans ton avertissement idiot on ne se rendrait presque pas compte que le site n'as pas été testé sous IE6.

Salut,

Quand tu viens présenter un site à la critique, il faut assumer le fait que certains commentaires ne sont pas faits pour te plaire. Mais ils ont été demandés. C'est toi qui choisi d'en prendre note, d'en tenir compte ou de les occulter.

Le splash screen ? Pourquoi pas ? Et bien :
- il n'apporte aucune information sur ce qu'on va trouver dans le site. Donc à ce moment là on est pas toujours sur qu'on va trouver celle qu'on cherche.
- elle nécessite un clic supplémentaire pour accéder à l'information recherchée.
- et vu la quantité d'éléments parasites et non mis en forme de ton splash, le visiteur va perdre du temps à parcourir du regard les différents éléments pour comprendre s'ils ont un intérêt ou non pour lui (il faut comprendre que le lien rouge est le lien d'accès, l'intitulé n'étant même pas suffisamment clair).
En l'état, si je cherche un site qui traite du sujet du tien sur google et que je tombe sur ça, je vais être honnête en te disant que je ne passe pas le splash screen et que je vais voir ailleurs.
Pourquoi ? Je suis un internaute, pressé par définition, et ton site me ralentit dans ma recherche d'information.

Une fois sur le site, ton fond, on ne voit QUE CA !!!! Il faut faire un effort surhumain de concentration pour avoir envie d'aller voir le contenu. Cette image doit valoriser le contenu, et non prendre l'attention du visiteur. Franchement, retire la ou atténue là à 10% d'opacité grand maximum !

On sait pas de quoi parle le site... Si je sais pas que c'est une bande dessinée, c'est pas ton site qui nous l'apprend. Il faut parcourir les informations pour lire les termes "comics", "tome 4", "auteur", et finir par comprendre de quoi il s'agit. Encore une fois, l'internaute n'a pas envie de lire le contenu de ton site s'il n'est pas sur qu'il soit intéressé !

Pour le reste, je trouve que tout est trop compliqué. Un filet blanc qui encadre le site, le même qui encadre le contenu. Un filet rouge en haut et en bas de la bannière, avec un espace laissé noir au dessus sous le filet blanc. Et un espace laissé aussi au dessus du blanc avec ces horribles chaines... Un menu avec des onglets arrondis occultés par un filet blanc qui vient casser les courbes. Un autre menu en dessus avec un style différent (forum et coup de coeur).
Ajouté à ça, une deuxième bannière sous la bannière au dessus du contenu (qu'apporte-t-elle ?), des icones dans tout les sens qui sont à la limite du compréhensible, ajouté à tous les liens type firefox, w3c, wri, etc. dont tes visiteurs se contrefoutent (pourquoi ne pas les mettre en bas de page dans le pied de page, en liens textuels ?), un trop grand nombre de typos (j'en ai compté 8 différentes sur la page d'accueil), de l'image animée peu lisible et qui n'apporte pas grand chose.

L'ergonomie des liens de page en bas est assez mauvaise, quelqu'un qui a des difficultés à manier sa souris aura bien du mal à aligner son curseur sur ces petits chiffres minuscules pour passer à la page suivante. Il serait bien d'agrandir les zones cliquables, ou d'ajouter des liens pages suivantes / pages précédentes qui seront globalement plus utilisées.

Je pense que vu le sujet il n'est peut être pas nécessaire de faire un site épuré façon google, mais il faudrait quand même l'épurer pour le rendre simple et facile d'accès. Structurer l'information dans la page pour que le visiteur comprenne au premier coup d'oeil ou est celle qui l'intéresse. Bref je pense que tu as encore beaucoup à faire.

"poppy" a écrit :
Entre l'Inde et le sous-sol (séparé du reste du batiment ?), dans tous les cas on se demande comment dépanner l'ordinateur le jour où il y a un problème, si personne n'a accès en admin sur place...

Pour ce qui est du dépanage des PC 1. on a pas besoin d'un admin réseaux sur place pour dépanner la plupart des bug, 99% du temps le help desk peut résoudre le problème à distance ; le % restant un technicien viendra sur place, mais c'est pas un admin réseaux...

"poppy" a écrit :
Pour le second point il est absolument hors de propos, de nombreux sites ne sont pas / plus optimisés pour I.E 6 ou s'afficheront mal. Et citer mon site en exemple pour demander une meilleure expérience de navigation à son administrateur réseau n'est pas très réfléchi. Des arguments pour demander un meilleure navigateur il y en a des tonnes. Et que se passe-t-il si les plug-ins ne sont pas installé sous I.E 6 ? Là non plus on ne demande de rien, des fois que l'administrateur est le droit de vous licencier sous motif "demande de meilleurs outils de travail?"

Alors, premièrement ce n'est pas "l'admin réseaux" qui choisi les logiciels installés sur les machines et à partir du moment où les sites "de travaillent" fonctionnent pourquoi changer de navigateur ? Faut pas se leurer avec IE7 ou 8 les intranet ne fonctionneront plus car ils ont été codé avec les pieds et que les remodeller prendrait trop de temps et d'argent.

"poppy" a écrit :
J'ai déjà dis et je le répète : la critique est utile quand elle est intelligente. Si c'est pour me donner ce genre de remarques, merci mais je m'en passerai volontiers.

Le problème c'est du tu as du mal à comprendre la situation réelle des utilisateurs actuels d'IE6 ; je ne pense pas me tromper en disant que si tu travaille, tu ne travaille pas dans une grande entreprise.

"poppy" a écrit :
PS: le target=_blank est dans le code du cadre I.E 6 no more. Pour un navigateur de 2001 ça n'est pas si inapproprié après tout l'emploi d'un bon vieux target ...

Bah si tu te console de ça...


Je confirme donc mon point de vue, l'avertissement pour IE6 est la pire erreur qui soit.

Après que tu considère la critique comme non intelligente parce qu'elle ne va pas dans ton sens ou que tu ne la comprend pas...

Laurie-Anne a écrit :
Alors, premièrement ce n'est pas "l'admin réseaux" qui choisi les logiciels installés sur les machines et à partir du moment où les sites "de travaillent" fonctionnent pourquoi changer de navigateur ? Faut pas se leurer avec IE7 ou 8 les intranet ne fonctionneront plus car ils ont été codé avec les pieds et que les remodeller prendrait trop de temps et d'argent.

Le problème c'est du tu as du mal à comprendre la situation réelle des utilisateurs actuels d'IE6 ; je ne pense pas me tromper en disant que si tu travaille, tu ne travaille pas dans une grande entreprise.

Bon, je ne suis pas bien sûr de savoir pourquoi je réponds, mais voilà :

Tout d'abord mon site ne s'adresse pas, comme vous avez pu vous en apercevoir, à des personnes sur leur lieu de travail de toute façon, d'autant que j'avais précisé ne pas prendre en compte I.E 6. Je me demande bien comment on a pu en arriver là !

Deuxio, pourquoi changé ? Peut-être tout simplement pour des raisons de sécurité (il me semblait que c'était particulièrement inportant dans les grandes entreprises.), ou encore parce qu'il ne sera bientôt plus supporté, même pas par Microsoft... Enfin bon si les applis mal codé et caduques fonctionnent...
Il faudra bien remodeler un jour de toute façon.

Enfin bref, on s'écarte complètement du sujet. J'ajouterai simplement que ce n'est pas parce qu'on travail dans une grande entreprise que tout dialogue devient impossible (ou alors les syndicats sont vraiment inutiles). Et si les employés ne sont pas supposé utiliser autre chose que l'Intranet, alors vos remarques sont irrecevables car le cas de se promener sur des sites persos ne devrait pas se présenter. En fait on se demande même pourquoi l'internet est ouvert dans l'entreprise à ce moment là...

poppy a écrit :
Tout d'abord mon site ne s'adresse pas, comme vous avez pu vous en apercevoir, à des personnes sur leur lieu de travail de toute façon, d'autant que j'avais précisé ne pas prendre en compte I.E 6. Je me demande bien comment on a pu en arriver là !

C'est un peu de ton fait à vrai dire... Nous sommes ici sur un forum qui défend les standards (garant d'inter-opérabilité des sites sur les différents navigateurs) et l'accessibilité (garant du "même" accès à l'information quelles que soient les conditions de consultation de l'information).
En venant proposer, sur ce forum, ton site qui occulte un navigateur aussi détestable soit-il (représenté par 1 utilisateur sur 10), il est donc normal que cela suscite polémique, ce qui ne serait pas arrivé sur un forum plus généraliste.

Sincèrement, je pense que si tu es venu ici pour parler de standardisation et d'accessibilité, c'est que même si tu semble à l'heure actuelle ne pas avoir de notion réelle en la matière, tu en conçois la nécessité. Donc peut être serait-il bon de te dire que les commentaires qui te sont fait ne sont pas uniquement pour casser du sucre sur ton dos, mais certainement pour élargir ton esprit. Surtout que vu ton site, le rendre compatible IE6 ne serait pas forcément bien compliqué, même si bien évidemment ça nécessite un effort supplémentaire.

Même si tout le monde attend la disparition définitive d'IE6, il est encore malheureusement là et il faut faire avec.

Tu parle de "dialogue qui devient impossible" mais pour le moment, c'est toi qui fait la sourde oreille à tout ce que nous cherchons à défendre sur ce forum. Que le dialogue soit ouvert ne dépend que de toi.
Modifié par Mikachu (11 Dec 2009 - 13:53)

Laurie-Anne a écrit :

Niveau accessibilité puisque c'est ce qui t'intéresse : ce n’est pas brillant :
* Textes blancs et fins sur fond noir > très difficile à lire et extrêmement fatiguant pour les yeux.

Un peu comme un texte blanc sur un fond presque noir
http://laurie-anne.bourdain.name/

Laurie-Anne a écrit :
Title est inutile sur une image

Si, il devrait servir (rarement certes) à afficher des meta-données (format de l'image...) a condition bien sûr qu'elle ne soit pas incluse dans un lien comprenant lui même un title.

Pour l'aspect du site bien comme déjà dit, au risque de te paraître désagréable, il est has been.
Là je te parle en tant que Web Designer et pour cette partie je te conseil vivement de suivre les conseil de Mikachu (du métier comme moi).
Ton imagination et ta manière d'appréhender un site est trop calquée sur les sites d'il y a 10 ans, si ton site est déjà dépassé, dis toi qu'il le sera encore plus dans 2 ou 3 ans
Tu devrais passer un moment à visiter des galleries CSS (cssbeauty, cssvault...) et les tendances graphiques actuelles pour t'en imprégner. Le graphisme a beaucoup évolué depuis (en bien). Exemple: http://www.webdesignerwall.com/trends/best-of-css-design-2009/

> Premier gros problème: la hiérarchie et la surcharge visuelle
ton fond est trop présent en plus d'être très lourd visuellement, et puis les fonds de ce type sont complètement dépassés... Pense que l'œil a besoin de se reposer et que la forme n'est mise en valeur qu'à partir du vide qui l'entoure or les vides sont cruellement absents.

> Ton bandeau identitaire (header)
les éléments iconiques qui le composent sont assez sympathiques et les montages assez réussis dans l'ensemble MAIS comme tout est traité au même niveau, la hiérarchie visuelle est absente et aucun d'entre eux n'est par conséquent vraiment mis en valeur. Même chose pour le titre (Résurrection...) il est trop fondu avec le reste et ne se lit pas bien.

Ensuite dans l'ensemble ça manque de blanc tournant (des vide autour des textes...), ton menu gauche est graphiquement dépassé et le texte vert sur fond noir c'est pas très beau

Bon courage!
Modifié par Hermann (12 Dec 2009 - 14:29)

Bien bien, j'attaque les modifications et je vous ferai part des changements. Bon évidemment ce ne sera toujours pas fashion 2009 mais je vais me concentrer sur l'accessibilité (aussi bien visuelle que physique).

Merci pour les suggestions !

Concernant le splash, vous avez dit :

a écrit :
- elle nécessite un clic supplémentaire pour accéder à l'information recherchée.

Je vois pas en quoi le fait de faire un clic de plus va être gênant pour les utilisateurs, faut pas abuser non plus.

Et pourtant, face à un splash screen, les visiteurs ne cliquent pas toujours, alors que le site aurait potentiellement pu les intéresser. Je suis sûre qu'on peut retrouver des études du comportement des utilisateurs sur la toile qui le démontrent.

Les seuls cas où un splash screen peut être utile c'est pour offrir un choix au visiteur (langue généralement), mais même dans ce cas il faut être très prudent pour ne perdre personne en route.

Je pense en effet que le splash screen ne sert à rien.
Sinon, moi le truc qui me choque sur ton site, c'est le fond d'écran. Il est beaucoup trop agressif. En 16850*1024, je ne vois que ça !
Je suis sûr qu'en le changeant (après tu peux aussi l'assombrir ou l'éclaircir pour le rendre moins pétant), les premières impressions sur ton site pourraient changer.