Magdales : jeu adapté aux non-voyants. http://www.magdales.com

Bonjour,

Je vous soumet mon site à vos critiques.
http://www.magdales.com
(changement de nom de domaine )

Il s'agit du portail du jeu Magdales pour lequel nous travaillons en amateur depuis maintenant 3 ans.
Nous venons d'achever la refonte graphique du portail en utilisant le CSS. La charte graphique a été réalisée par l'association Illusion Design.
Notre objectif a été de supprimer les tableaux qui sont une invention très difficile pour les non-voyants. En effet, les aveugles voient les tableaux cases après cases, ce qui, lorsque les tableaux sont mis en place uniquement pour formater l'agencement des images, est un calvaire sans nom pour en ressortir une information utile.

Si après vos critiques (que j'espère nombreuses), le bilan est positif, nous modifierons alors l'intérieur même du jeu dans la même orientation full CSS and No-Table.

J'ai pris certaines libertés au niveau du CSS et du HTML de mon portail, mais j'ai essayé avec une synthèse vocale et une tablette braille, et bilan est concluant. (testé avec Jaws 7.0 et Jaws 8.1)

Actuellement, je traques les dernières imperfections du code, je fais valider OR chez OCAWA et je viens de m'inscrire à Mon-Opquast comme suggéré dans le préambule de ce topic.

Je vous remercie d'avance et vous souhaite une très bonne journée. En anticipation, un bon WE prolongé pour les veinards qui peuvent en profiter.

Kéké.
Modifié par keke (14 May 2009 - 12:05)

Salut,

Sur l'entête, ça ne colle pas: Si on désactive CSS, la première chose qu'on voit est le menu; le titre du site disparait ainsi que les liens du menu haut. En fait, tes images devraient se trouver dans le html (avec un texte alternatif pertinent) et non en background CSS.

Je ne vois pas de liens d'accès rapide, ce qui permettrait par exemple, de sauter tous les liens du menu pour accéder rapidement au contenu, chose qui intéresse le plus l'utilisateur.

Pour ton menu, tu pourrais diminuer légèrement les polices afin de mettre un peu plus en avant le contenu.

Tu peux aussi laisser des marges plus conséquentes entre le bord du menu et les liens qui s'y trouvent; de même pour le contenu -> des marges pour se détacher du bord du fond rouge "clair". Ca augmenterait la lisibilité.

Le contraste sur les liens du contenu me semble un peu léger par rapport au fond non ?

Et au niveau des titres, tu pourrais mettre une sorte de picto' afin d'enrichir la charte graphique. Personnellement, je diminuerais légèrement leur taille aussi.

Sur la page des remerciements, entre autres, l'espace supérieur et inférieur de ces titres est trop prononcé par rapport au reste. Je pense, mais ça c'est à voir une fois que tu auras augmenté les autres marges, qu'il faudra diminuer un peu celles-ci.

Sur les pages avec des images (dessins, photos, fonds d'écran), il faudrait aérer un peu en ajoutant des espaces, quitte à diminuer légèrement la taille des vignettes. Tu pourrais aussi travailler un peu plus leur encadrement car bien que la bordure rouge ne choque pas, elle ne met que moyennement l'image en valeur. Le placement des images lorsque deux sont côte à côte et qu'une est en portrait et l'autre en paysage interpelle aussi. Ca donne l'impression d'être posé à la va-vite sur la page, sans travail de mise en page.

Sinon, le formulaire de recherche n'est pas assez mis en avant -> seulement sur la page partenaire (fallait le trouver ! ); ce serait pas mal de le rendre disponible à partir de chaque page pour aider le visiteur à trouver l'information au plus vite.

Enfin, le plan du site est très mal placé (fin de la page et à peine visible). Ce lien devrait, à l'inverse, être mis en avant car on a du mal à savoir où on se trouve. Un fil d'ariane pourrait d'ailleurs faciliter la compréhension du site.

Ceci mis à part, la charte graphique est en accord avec le thème du site et ça laisse une impression générale plutôt correcte.

Bon courage pour la suite.
Modifié par koala64 (31 Oct 2007 - 13:43)

Bonjour,

Merci pour toutes ces remarques ^^ et merci d'avoir scruté tout le site.

Je vais recopier ta réponse sur notre forum. Ainsi j'aurais un avis des joueurs quand aux modifications esthétiques.
Concernant le retrait du CSS je suis très étonné. Je m'étais représenté que les tablettes braillent n'utilisaient pas le CSS d'une page. Et pourtant, elles permettent de voir le menu du haut de ma page... J'avoue ne même pas avoir pensé à faire ce test tout bête de retirer complètement le CSS ^^.

Je vais modifier en ce sens et merci pour cette info ! J'espère qu'elle sera utile à d'autres !

Concernant les images/photos/fond d'écran bonus, j'ai fais un tour rapide pour valider selon W3C, mais j'ai pas encore pris le temps de les retravailler. Je pensais en postant sur ce forum, que les gens allaient uniquement regarder la première page.

Merci d'avoir pris le temps de me faire une réponse aussi complète. Je te MP dès que j'aurais fais les retouches... et à charge de revanche !

Salut !
Kéké.

Salut keke,

Tout d'abord, je précise qu'on ne traite pas les questions via MP afin que ceux qui ont le même problème que toi puissent profiter de la réponse.

Je retransmets donc la question que tu m'as posé :

a écrit :
Coucou,

Je suis le Web admin de Magdales. C'est un projet personnel sur lequel j'accorde beaucoup d'attention, cependant pour l'instant je n'ai pas eu beaucoup de temps à me consacrer sur le portail extérieur (la partie du site accessible sans être connecté.)

Je voulais juste voir avec toi une question : Tu parles dans ton message de
'Je ne vois pas de liens d'accès rapide, ce qui permettrait par exemple, de sauter tous les liens du menu pour accéder rapidement au contenu, chose qui intéresse le plus l'utilisateur.'
( http://forum.alsacreations.com/topic-18-30312-1-Magdales--jeu-adapte-aux-non-voyants-httpmagdalesstar-warznet.html)


Tu penses aux HKEY ? ou tu penses à un mini menu qui serait en début de page ? Dans ce second cas, tu penses que ce menu devrait être visible par les voyants ? ou utilise tu un système tel que DISPLAY:none pour qu'il existe et qu'il n'apparaissent pas.

Techniquement, j'ai fais le site en relation avec un joueur non-voyant. pas de soucis.
Merci

Le lien d'accès rapide dont je te parlais, c'est un lien du type "Aller au contenu" à mettre en amont comme ici par exemple :
http://www.jusdecitron.net/2006/03/23/3-a-quoi-servent-ces-liens-en-haut-de-page-aller-au-menu-aller-au-contenu (billet complétant mes remarques)

Il faut que ces liens soient visibles afin que l'utilisateur sache qu'il peut s'en servir car si celui-ci ne dispose pas de souris par exemple, il lui est utile de savoir quel lien est actif. De même, le display: none; est à éviter car bon nombre de lecteurs d'écrans l'interprètent; dans ce cas, ce lien serait inactif alors que ces supports sont bien ceux à qui ça sert le plus.

Pardon Koala64. Je pensais que ma question était trop newbee, comme il s'agissait uniquement d'un problème de compréhension.

L'idée de faire un lien directement au contenu me semble envisageable, bien que pas très esthétique... Enfin, c'est à moi de me débrouiller pour que çà colle correctement à l'ambiance de mon site ! (dommage que je sois si-mauvais en design.) Je vais donc faire un menu équivalent au tiens : accueil, contenu, aller au menu, plan de site, rechercher... L'idée me semble intéressante. Je pense même à la transposer à l'intérieur du jeu. (J'ai pensé aux joueurs non voyants, mais pas aux joueurs sans souris.)

Je n'ai pas eu trop le temps d'avancer sur le portail, car un développement un peu lourd sur le jeu lui-même m'occupe assez régulièrement (il s'agit de former des groupes dans le jeu pour accélérer les conversions religieuses ... tout un programme.)

Je te tiens au courant dès que tous les points mentionnés dans la première partie sont OK.

Salut !
kéké.

Coucou,

J'ai mis en place le menu en haut. J'avoue avoir recopier une grande partie de ton code. M'autorises-tu à le laisser ainsi ?

J'ai aussi rajouter les images dans mes menus de haut de page. Cependant, je me heurte à un problème technique : le :hover sous IE n'est pris en compte que par les balises <a>

bilan, sous IE, il n'y a plus de sur lignage... J'ai réussi à contourner le problème par une solution qui n'est pas brillante : mettre des display:none sur les images. Ainsi : graphiquement on voit les dimensions du cadre sont gérées par le CSS, l'image est géré par le CSS grace au background. En cas d'impossibilité d'affichage de CSS, les fonds d'images sont inutilisés, mais l'image qui avait l'attribut display:none s'affiche alors.

C'est tiré par les cheveux. Ca fait un effet cohérent sous IE 6 et FF2. Cependant, cette solution me plait pas tellement plus que si j'avais mis un javascript à 2 sous.

Koala, aurais-tu une solution plus élégante pour mon problème ?

Je file chercher ma fille. @ ++ !

Kéké.
PS : J'ai aussi un bug bizard sous IE : Après l'ajout des images 'presentation', 'infos' et 'bonus' et malgrès le display:none, IE devait considérer que les images faisaient 1px de large. Bilan, la dernière image du menu sortant du cadre, glissait à la ligne du dessous. Si tu as une idée.

Bonsoir,
la mise en forme des textes demanderaient à être revue:
> la noir manque de contraste avec le fond > éclaircir le fond et modifier éventuellement la teinte pour obtenir une couleur plus chaleureuse.

> L'arial n'est pas adaptée pour une lecture écran, lui préférer la Tahoma, la trébuchet MS ou la verdana.

> Justifier ta colonne de texte (text-aign:justify) et ajouter un retrait en alinéa en début de paragraphe pour donner un peu de relief à tes paragraphes.

> Penser à bien interligner (line-height à 1.4 ou 1.5em) et diminuer un peu la taille du texte

> Ajouter la police générique en fin de liste (font-family:..., sans-serif)
Pas besoin de mettre arial entre double quotes, ça ne sert que pour les nom composés (Trebuchet MS)

> Ajouter une marges à gauche et à droite de ta colonne de texte.


Le menu n'est pas assez travaillé:
> Espacer les rub.
> Introduire un élément de séparation vertical entre chaque rub.
> Diminuer la taille des textes.
...
Modifié par Hermann (22 Nov 2007 - 14:32)

Hello,

a écrit :
J'ai mis en place le menu en haut. J'avoue avoir recopier une grande partie de ton code. M'autorises-tu à le laisser ainsi ?

Ben comme te l'a dit Hermann, il faut espacer un peu tout ça parce que pour le moment, ça ne s'intègre pas comme il faut.

Pour ces liens d'accès rapides, moins il y en a, mieux c'est. Il faut donc bien juger de leur utilité.

Par exemple, un visiteur, lorsqu'il va entrer la première fois sur ton site va avoir directement accès à l'aide... Bon, c'est chouette mais le problème, c'est qu'à chaque changement de page, ce sera la même chose. Je ne pense pas que ce soit vraiment nécessaire de le répéter systématiquement. Aussi, parmi ces liens, il serait préférable de le mettre après.
Une autre chose, toujours lorsqu'on arrive : On ne sait pas sur quel site on est. Il serait donc bon d'indiquer l'intitulé et, par la même occasion de le lier à la page d'accueil. En gros, ton début de page pourrait ressembler à quelquechose du genre :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
		<title>Principe du jeu - Magdales Jeu multijoueur gratuit</title>

<style type="text/css"><!--

@media screen, projection {
	.hide
	{
		position: absolute;
		left: 0;
		top: -500px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}
}

--></style>

	</head>
	<body>

<!-- ENTETE -->
<div id="entete">

   <!-- INTITULE DU SITE ET LIEN VERS LA PAGE D'ACCUEIL -->
   <h1>
      <a href="./index.php" title="retour à la page d'accueil"><img width="760" height="250" border="0" src="logo.png" alt="Magdales Jeu multijoueur gratuit"></a>
   </h1>

   <!-- LIENS D'ACCES RAPIDE -->
   <h2 class="hide">Liens d'accès rapide</h2>
   <p id="fast">
      <a href="#texte_intermediaire_lecture">Aller au contenu</a>
      <a href="i_plan_site.php" accesskey="3">Plan du site</a>
      <a href="i_regle.php" accesskey="6">Aide</a>
      <a href="#connexion">Se connecter</a>
   </p>

   <!-- FORMULAIRE DE RECHERCHE -->
   <form action="http://magdales.star-warz.net/i_resultat_google.php " id="searchbox_006608039920075199104:wz2eyeswo0m">
      <fieldset><legend>Formulaire de recherche</legend>
         <div>
            <input type="hidden" name="cx" value="006608039920075199104:wz2eyeswo0m">
            <input type="hidden" name="cof" value="FORID:11">
            <label for="q">Recherche</label>
            <input type="text" id="q" name="q" size="25" accesskey="4">
            <input type="submit" name="sa" value="Cherche">
         </div>
      </fieldset>
   </form>

   <!-- MENU HAUT -->
   <h2 class="hide">Menu de présentation</h2>
   <p id="menu_haut">
      <a href="./i_principe.php" title="Présentation générale"><img width="121" height="31" border="0" src="../images/speciale/presentation.gif" alt="Présentation"></a>
      <a href="./i_etat_religion.php" title="Informations utiles"><img width="218" height="31" border="0" src="../images/speciale/infos.gif" alt="Informations utiles"></a>
      <a href="./i_bonus.php" title="Bonus et liens utiles"><img width="133" height="31" border="0" src="../images/speciale/bonus.gif" alt="bonus et liens utiles"></a>
   </p>
</div>

<!-- CONTENU -->
<div id="contenu">

   <!-- ZONE GAUCHE -->
   <div id="gauche">

      <!-- MENU GAUCHE -->
      <h2 class="hide">Menu principal</h2>
      <ul id="menu">
         <li><a href="...">...</a></li>
         <li><a href="...">...</a></li>
         <li><a href="...">...</a></li>
         <!-- etc... -->
      </ul>

      <!-- FORMULAIRE DE CONNEXION -->
      <!-- etc... -->
   </div>

   <!-- ZONE DE CONTENU -->
   <div id="centre">
      <a href="#texte_intermediaire_lecture" name="texte_intermediaire_lecture" id="texte_intermediaire_lecture"></a>
      <h1>Principe du jeu</h1>
      <!-- etc... -->
   </div>
</div>

	</body>
</html>

Le mieux, en terme d'ergonomie, serait de faciliter la navigation en instaurant des titres supplémentaires. Par exemple, avec Opera, tu peux passer d'un titre à l'autre avec les touches "s" et "w" (pour les liens, c'est "a" et "q"). Maintenant, ces titres sont surtout utiles pour les lecteurs d'écrans et si, d'un point de vue esthétique, tu ne veux pas voir certains de ces titres, alors tu peux te servir de cette technique afin que seuls ces fameux lecteurs d'écran aient accès à ce mode de navigation.
(PS: Pour que ce soit plus clair, visualise le résultat du code ci-dessus dans ton navigateur - CSS actif ou non)

Pour ton menu, un script modifiant la source de chaque image lorsqu'on survole les liens serait plus adapté que ce que tu as fait et pour ton formulaire de connexion, tu n'es pas obligé de passer par un tableau; regarde par exemple ce document pour t'inspirer.

Un dernier point :
Dans ton plan de site, quelqu'un qui se sert d'un lecteur d'écran et qui cherche à naviguer rapidement va entendre :
"lien: règle... lien: règle... lien: règle... lien: règle... "
Le mieux serait de mettre l'intitulé directement plutôt que répéter "règle" à chaque coup.

Bref, pour tester ton site, il serait préférable que tu te mettes dans les conditions minimales (pas d'images, pas de CSS, pas de JS) puis que tu ajoutes progressivement ces différentes couches en t'assurant que les infos de base sont toujours accessibles (Le test sur un lecteur d'écran ne serait pas un luxe si tu souhaites réellement savoir ce qu'il se passe)

Hello,
Je n'ai pas lu toutes les remarques, alors excusez-moi s'il y a de la redite.

Je ne me suis pas inscrit au jeu (j'en ai déjà assez d'autres et puis je prévois de programmer le mien ce qui me prend pas mal de temps), mais le site est effectivement relativement bien accessible avec jaws.

Quelques remarques quand même :
- Il faudrait plus de titres <hn>, spécialement sur les pages comme l'aide, ça facilite la lecture et la navigation. (Rappel : IL est possible de passer d'un titre à l'autre en appuyant sur H)

- Je ne sais pas si c'est ma config de jaws qui fait ça, mais le champ de formulaire de recherche n'est pas annoncé avant le bouton. J'utilise la version 7.10, je suppose que c'est parce qu'il manque un label mais je n'en suis pas sûr.
- Pour les pages comme le plan, peut-être serait-il plus judicieux d'utiliser une liste non ordonnée

J'en aurai peut-être d'autres ultérieurement.

coucou ^^,

Merci pour vos remarques. Je vais les intégrer au fur et à mesure.
Koala, j'analyse ton code et les exemples fournis. J'avoue avoir un peu de mal à conceptualiser l'ergonomie du site pour non voyant. Les contraintes sont nombreuses et bien différente pour les voyants. Par exemple, un voyant trouvera une harmonie à avoir un logo en début de page, alors que peut-être, un DV sera saoulé d'entendre tout le temps, en début de page : "MAGDALES, aide, menu, ..."

Techniquement, j'ai peur de rien, mais il y'a a donc un juste équilibrage à faire.

Quentin a écrit :
: - Pour les pages comme le plan, peut-être serait-il plus judicieux d'utiliser une liste non ordonnée

J'ai peur de ne pas totalement comprendre cette dernière remarque. Pourrais-tu me donner plus de précision ? Ne pas mettre toutes les règles au début par exemple ?
Pour les menu H1, H2, Hn, je vais repenser le contenu pour obtenir ce découpage. Le travail promet d'être un peu long. Je peux refaire appel à toi vers mi-janvier ?

Kéké qui s'accroche pour satisfaire un max de monde ^^. Mais qui aime ça.
PS:le jeu ne prend pas plus de 5 minutes/jours. Cependant, il est vrai qu'en fin d'année ca fait une 30 aine d'heure.
Modifié par keke (26 Nov 2007 - 11:03)

Kéké a écrit :
Je peux refaire appel à toi vers
mi-janvier ?

Ca dépend de ce que tu me demanderas... je suis toujours open donc n'hésite pas mais il ne faut pas oublier que j'ai 4 examens à passer à cette période ...

Coucou,

Je suis quasiment à l'heure sur mon planning ^^
J'ai modifié une partie du site, corrigé certaines pages, pris en compte certains points énoncé.

a écrit :
Bonsoir,
la mise en forme des textes demanderaient à être revue:
> la noir manque de contraste avec le fond > éclaircir le fond et modifier éventuellement la teinte pour obtenir une couleur plus chaleureuse.

> L'arial n'est pas adaptée pour une lecture écran, lui préférer la Tahoma, la trébuchet MS ou la verdana.

> Justifier ta colonne de texte (text-aign:justify) et ajouter un retrait en alinéa en début de paragraphe pour donner un peu de relief à tes paragraphes.

> Penser à bien interligner (line-height à 1.4 ou 1.5em) et diminuer un peu la taille du texte

> Ajouter la police générique en fin de liste (font-family:..., sans-serif)
Pas besoin de mettre arial entre double quotes, ça ne sert que pour les nom composés (Trebuchet MS)

> Ajouter une marges à gauche et à droite de ta colonne de texte.


Le menu n'est pas assez travaillé:
> Espacer les rub.
> Introduire un élément de séparation vertical entre chaque rub.
> Diminuer la taille des textes.


Quelques remarques quand même :
- Il faudrait plus de titres <hn>, spécialement sur les pages comme l'aide, ça facilite la lecture et la navigation. (Rappel : IL est possible de passer d'un titre à l'autre en appuyant sur H)

- Je ne sais pas si c'est ma config de jaws qui fait ça, mais le champ de formulaire de recherche n'est pas annoncé avant le bouton. J'utilise la version 7.10, je suppose que c'est parce qu'il manque un label mais je n'en suis pas sûr.
- Pour les pages comme le plan, peut-être serait-il plus judicieux d'utiliser une liste non ordonnée


Pour ton menu, un script modifiant la source de chaque image lorsqu'on survole les liens serait plus adapté que ce que tu as fait et pour ton formulaire de connexion, tu n'es pas obligé de passer par un tableau; regarde par exemple ce document pour t'inspirer. smile

Dans ton plan de site, quelqu'un qui se sert d'un lecteur d'écran et qui cherche à naviguer rapidement va entendre :
"lien: règle... lien: règle... lien: règle... lien: règle... "
Le mieux serait de mettre l'intitulé directement plutôt que répéter "règle" à chaque coup. cligne

Les points que je n'ai pas pris en compte sont les suivants :

>> Justifier ta colonne de texte (text-aign:justify) et ajouter un retrait en alinéa en début de paragraphe pour donner un peu de relief à tes paragraphes.
J'ai fais quelques essais, mais ça rend pas super. Je vais y retravailler encore ... mais c'est long, il me faut tout reprendre, paragraphe, par paragraphe !

>> diminuer un peu la taille du texte
Je trouve que le texte a déjà une taille suffisamment peu importante. Faut vraiment que je le diminue encore ?

>> Introduire un élément de séparation vertical entre chaque rub
J'arrive pas à trouver un truc sympa visuellement. ligne, pointillé, autre ... Peux tu me donner une idée ?

>> Je ne sais pas si c'est ma config de jaws qui fait ça, mais le champ de formulaire de recherche n'est pas annoncé avant le bouton. J'utilise la version 7.10, je suppose que c'est parce qu'il manque un label mais je n'en suis pas sûr.
En fait, le bouton de Google, on n'a pas trop le droit de le modifier. Me suis fais viré de Ad-sens pour moins que ça. Je veux pas jouer la provoc.

>> Pour les pages comme le plan, peut-être serait-il plus judicieux d'utiliser une liste non ordonnée
J'ai éclaté le plan de manière à avoir des pages principales en haut, et les pages secondaires en bas. C'est à cela que tu pensais ?

>> Pour ton menu, un script modifiant la source de chaque image lorsqu'on survole les liens serait plus adapté que ce que tu as fait et pour ton formulaire de connexion
J'essayais de faire en CSS au lieu d'un javascript, vu qu'il s'agissait de mise en forme. J'aimerais autant que possible limiter le scripting lorsque ce n'est pas nécessaire.

J'ai normalement corrigé tous les autres points.
Comme proposé, si tu avais d'autres remarques à me formuler ?

Kéké.