all html : Le portail des webmaster

liste des forums liste des discussions Participer à la discussion

Message publié le mercredi 02 août 2006 à 20 h 48 par albeth. In the Internet we trust

Salut,

Ca fait tout bizard de revenir ici pour poster un nouveau sujet c'est comme remonter a vélo après des années...

Je vient pour vous demander une critique sur l'accessibilité de la "nouvelle" version de tutoxconseil qui ne devrait pas tarder a remplacer l'existante.

J'aimerais donc savoir ce que j'ai fait comme erreurs, ce qu'il manque pour une meilleur accessibilité et tout et tout

Juste un truc je suis au courant que mes apges ne passes pas la validation mais c'est parsque les & ne fonctiones pas dans les actions de formulaires, je cherche actuellement une solution valable pour pallier a ca (et non je peut pas faire d'url rewriting)

Je vient vous voirs pour savoir si selon vous ce site est accesible a une très grande majorité des gens naviguants sur le web (100% me semblant utopiste)

Aller y sans les gants j'ai mon casque et mes coudiéres.

Tutoxconseil

++ et merci

• participer

Message publié le jeudi 03 août 2006 à 00 h 24 par boulaneige. Le mauvais goût a son droit autant que le bon goût [Friedrich Nietzsche] - http://www.boulaneige.com

Salut Albeth,

Bon, je précise tout de suite, je ne suis absolument pas spécialiste dans l'accessibilité ! Je vais donc te faire part de mes petits tests effectués sous Firefox (win).

Première chose et non des moindres à mon sens : le site n'accepte qu'une seule fois le grossissement du texte. Au-delà, le menu de gauche est illisible.

Si l'on désactive les images, dans le menu de gauche apparaît "fond_menu" sous chaque fin de rubrique : laisse le alt vide puisque l'image est purement décorative.

Si l'on désactive les styles, on se tape tout le menu, puis la pub google, puis enfin du contenu.

Il manque l'attribut summary du tableau.

Tes formulaires doivent certainement pouvoir être améliorés, mais bon, je maîtrise encore moins ce domaine (honte, oui je sais...). Tu trouveras plein d'infos à ce sujet sur openweb.

Question sémantique, il y a beaucoup de choses à améliorer. Tout d'abord, pourquoi des choses comme <span class="titre_news">Avancement</span><br /> au lieu d'utiliser un hx ?

Dans le texte d'intro, tu utilises 2 br pour créer des semblants de paragraphes. Pourquoi ne pas mettre tout simplement <p> ???

Bref, je pense que tu peux encore énormément alléger ton code (de nombreux div pourraient être remplacés par des balises sémantiquement adaptées).

Comptes-tu mettre des raccourcis clavier (accesskey) ?

Il faut aussi que tu te trouves un correcteur ;-)

Voilou pour un début, bonne continuation

• participer

Message publié le jeudi 03 août 2006 à 00 h 39 par koala64. http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS

'lut ^^

groumpf ! et zut... :( Je vois que je me fais déjà grillé par Boulaccess... bon, tant pis y'aura des redites mais je vais pas tout retaper... :p

Je me lance... Je clique...

J'arrive sur le site... temps de chargement plutôt rapide... 1 bon point.

Je désactive le JS... Je sais... Pour toi, çà sert pas à grand chose :-))) mais t'en as un peu quand même. ;-)

Je désactive la feuille de style... Premiers soucis !

Que vois-je ?

Pas de titre ! :s (tu l'as vu ton bon point ? ben y'a plus ^^)

Pas de lien lié à l'accessibilité de tes pages (raccourcis,explication des fonctionnalités de divers navigateurs genre augmentation de la taille de police, etc...)

Un champ de recherche... pourquoi pas... Dans les premières positions, çà peut être sa place...

Pas de lien d'évitement... genre de quoi aller au contenu directement parce que là, le soucis, c'est que le menu se trouve juste après et quand tu navigues sur un navigateur oral ou un téléphone, ben faut te taper tout le menu sur chacune de tes pages... C'est long et çà fait fuir. La meilleure place pour le menu, c'est à la fin, que ce soit en terme d'accessibilité ou même de référencement. Généralement, on ajoute là aussi un lien d'évitement en début de page.

Pour la partie 'Mon compte', tu peux la remonter dans le haut du menu car si on souhaite accéder à toutes les fonctionnalités (et donc l'ensemble du menu) il vaut mieux que çà arrive en premier.

En fait, mis à part le titre et des liens d'évitement (le plus petit nombre possible), on devrait voir directement :

Bienvenue sur Tutoxconseil(s), ce site a pour but de vous apprendre a créer votre propre site web...

Les news... C'est bien voire même important mais mis directement sur la page d'accueil, çà fait conflit avec le texte de bienvenue. Lequel est le plus important ? le texte ou les news ? Aucun des deux si tu veux mon avis... Un utilisateur qui s'amène pour la première fois souhaiterais d'abord voir le texte de bienvenue alors qu'un habitué préfèrerait les news... Autrement dit, ce serait pas mal de mettre un lien d'accès rapide pour le report aux news ou à l'extrème, on passe sur deux pages distinctes. C'est important, surtout pour ceux qui sont contraints de tout lire avant d'arriver à une zone précise de ta page.

Allez hop, je passe sur le code source...

Dans l'ensemble, c'est pas trop mal... Le code est peu près sémantique et a peu de chance d'être mal compris... Celà dit, comme l'a précisé Boula', tu peux simplifier... ( les <br /> çà sert à rien ;-) )
Sinon, ben, aucun renseignement n'est mis dans les metas... Pas de description (utile pour que les utilisateurs puissent se faire une idée au sein même d'un moteur de recherche), (pas de mots clés) et on a peu de renseignements sur la page... (auteur & co.)

mmh... Les accesskeys ? Où sont-ils ? :)
L'ordre de navigation est-il logique ? Celà ne nécessite-t-il pas des tabindex ?

Les textes alternatifs pour tes images... Es-tu sûr qu'ils sont pertinents ? Quand je vois "fond_menu", çà fait plus code qu'autre chose alors qu'ils devraient être écris (en bon français :p) de manière à renseigner n'importe quel utilisateur non averti.

Le tableau de la page d'accueil... Tu devrais relire ton propre tuto à ce sujet... :D Il n'est pas des plus accessibles... ;-)

Je ressort du code...

Coup vache... je me dis que ma police par défaut... Je veux qu'elle soit blanche... :) ah ?! pas de bol... y'a plus les textes... ^^

Je rebranche et je désactive les images... C'est mieux... ;-)

Bon quand même, je me dis que c'est inadmissible... Faut que je te contacte ! euh... oui mais pourquoi y'a pas de lien contact sur la page d'accueil ? Je croyais qu'on devait le voir facilement sur chaque page... ;-)

Dans le même genre... le plan du site... c'est cool, lui il est là mais bon, faut le trouver dit ! Tu devrais le mettre plus avant et plus au début...

Je déforme la fenêtre dans tous les sens... C'est bon, pas de soucis... pas de scrollbars et compagnie...

J'agrandis les polices... un Ctrl + sous Fx, ah dommage le titre du menu qui se superpose ;-) ... deux Ctrl +... euh oué, là, le menu commence vraiment à partir en vrille... ^^
Je passe sous IE, je fais la même...
"police plus grande"-> ben là, le menu c'est mieux ;-) dégradation admissible, l'ensemble des textes est lisible...
"la plus grande"-> ben là, le fond du menu commence à bouffer les textes du cadre principal...
Ce serait pas mal de supporter un agrandissement avec vue complète des textes quelquesoit le navigateur. C'est un minimum... ;-)

Allez, c'est déjà pas mal... je te vois déjà tout triste... parce que oui, y'a quand même du boulot... :p

Celà dit, on a vu pire... ;-)

Pour les autres pages... Je laisse la main à d'autres... ^^

• participer

Message publié le jeudi 03 août 2006 à 09 h 58 par albeth. In the Internet we trust

Oula bien bien tout ça,

Alors certains de vos conseils seront pris en compte asser vites mais pour d'autres ca va être dur et donc attendra un second voir troisiéme temps.

Pour le grossisment de texte est-ce que proposer une feuille de style altérnative proposant des menus très adaptables suffirais?

Ensuite pour le menu qui vient après le contenu pour le moment ca se feras pas parsuqe ca demande de retoucher presque tous le site sauf si je met un include de plus ce que je n'est pas du tout envie de faire.

Pour les liens d'évitements et d'accessibilité pas de prob ce sera fait.

Pour les forumlaires eux je veut bien mais je voit aps trop trop quoi fiare de plus vu que je me suis baser sur open web pour les faires... Je regarderais mieux

<span class="titre_news"> je me demande bien ou tu a pu voir ca??? Bon ok j'avou c'est n'importe quoi je vais corriger de suite.

Pourquoi les <br /> au lieu des <p>? tout simplement parsque le contenu est dynamique et que je peut difficilement demander a mes visiteurs de définir des paragraphes, je verrais ce que je peut faire pour l'accueil mais pour les autres pages ca s'annonce difficile.

Pour les acceskey je pense en mettre sur les liens d'évitement, sur le formulaire de recherche et pour la feuille d'aide a la navigation ca suffit?

Pour les correcteur j'en est actuellement 6 qui travails sur les tutox mais c'est vrai qu'il m'en faudrait un pour les autres parties.

A la bestiole :

Le Js me sert pour ajouter le code dans les champs de formulaires et pour effacer le champ de recherche donc normalement tu ne perd pas que de la facilité mais pas d'actions...

Tout un morceau auquel j'ai déjà répondu, saut artistique... La partie mon compte tu la verrais plutot ou? J'ai penser la mettre la simplement car pour le visiteur non enregistrer (la majorité) les deux menus d'avant sont plus important après je sais pas...

Pour les news je vais refléchir a ca mais ca va devenir un lien d'évitement ou une page différente si le membre est logger, je réfléchis...

Les méta d'accord pour description et auteurs mais pas trop pour keyword, j'aime pas cette méta...

Les accesskey ca vient ca vient

Je trouve l'ordre de navigation logique, tu aurait commencer par le contenu?

Les images fond menu vont disparaitres mais j'ai un prob pour les enlever, aller savoir pourqoi lorsque je les mets dans un autre block j'ai une grosse amrge qui apparait, je cherche la solution.

Ecrire en bon français ca je vais pas pouvoir ;-)

Pour la police blanche je sait pas comment le contrer puisque la couleur est déjà définie dans ma css.

Le lien contact je saviat pas, je vais faire ça

Le problème pour l'ordre des liens c'est que je peut aps tous les mettres au début du menu forcement

Pour l'agrandissement du menu même que pour boula selon toi une feuille alternative permettant bien les aggrandissement suffirais?

Les autres pages on va retrovuer els même trucs donc je corrige aussi.

++ et merci

• participer

Message publié le jeudi 03 août 2006 à 11 h 43 par koala64. http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS

Re, :)

Pour le grossisment de texte est-ce que proposer une feuille de style alternative proposant des menus très adaptables suffirais ?

Si tu fais le styleswitcher en php, pourquoi pas... Celà dit, il vaudrait mieux revoir le CSS... Tu dois pouvoir faire sans en contrôlant les polices pour qu'elles ne se superposent pas.

Ensuite pour le menu qui vient après le contenu pour le moment ca se feras pas parsuqe ca demande de retoucher presque tous le site sauf si je met un include de plus ce que je n'est pas du tout envie de faire.

Pour les liens d'évitements et d'accessibilité pas de prob ce sera fait.

Dans ce cas, mets donc un lien pour accéder directement au contenu. Il faut éviter de se taper le menu à chaque lecture.

Pour les forumlaires eux je veut bien mais je voit aps trop trop quoi fiare de plus vu que je me suis baser sur open web pour les faires... Je regarderais mieux

En parlant de çà, le fait de mettre des divs au lieu de mettre des p pour les inputs, çà le fait. Laurent Denis, que j'ai interpellé à ce sujet m'a dit que lui aussi, c'est ce qu'il faisait. Le principal, c'est d'avoir tous les éléments du formulaire inclus dans des balises de type bloc. On est pas obligé de les séparer, plusieurs input par div, çà le fait. Je regarde pas ton code source là mais je crois que c'est ce que tu avais fait. Attention à ne pas oublier les fieldsets et les labels (encore une fois, je l'ai pas sous les yeux, çà se trouve, c'est fait)

Pourquoi les <br /> au lieu des <p>? tout simplement parsque le contenu est dynamique et que je peut difficilement demander a mes visiteurs de définir des paragraphes, je verrais ce que je peut faire pour l'accueil mais pour les autres pages ca s'annonce difficile.

Le contenu étant dynamique, tu dois pouvoir repérer les sauts de ligne et donc être capable d'inclure les textes dans des paragraphes. Cà me semble jouable.

Pour les acceskey je pense en mettre sur les liens d'évitement, sur le formulaire de recherche et pour la feuille d'aide a la navigation ca suffit?

Pour les accesskeys, regarde donc l'article d'Openweb... Ils donnent la liste des accesskeys "standardisés". il ne faut pas mettre n'importe quoi pour ne perturber les visiteurs. Tu pourras par exemple en ajouter pour le formulaire de contact et les news.

Pour les correcteur j'en est actuellement 6 qui travails sur les tutox mais c'est vrai qu'il m'en faudrait un pour les autres parties.

euh... Je me dédouble pas. ^^

Le Js me sert pour ajouter le code dans les champs de formulaires et pour effacer le champ de recherche donc normalement tu ne perd pas que de la facilité mais pas d'actions...

Je n'ai pas dit le contraire... C'est juste que çà fait parti des tests... :)

Tout un morceau auquel j'ai déjà répondu, saut artistique... La partie mon compte tu la verrais plutot ou? J'ai penser la mettre la simplement car pour le visiteur non enregistrer (la majorité) les deux menus d'avant sont plus important après je sais pas...

C'est l'une des premières actions qu'effectue le visiteur régulier donc, personnellement, je le metterais en premier... limite en entête.

Pour les news je vais refléchir a ca mais ca va devenir un lien d'évitement ou une page différente si le membre est logger, je réfléchis...

A toi de voir... Faut juste qu'on puisse y arriver rapidement.

Les méta d'accord pour description et auteurs mais pas trop pour keyword, j'aime pas cette méta...

euh... Je sais qu'on dit que la méta keywords est moins importante qu'avant mais je peux t'assurer qu'elle influence encore pour le référencement. C'est comme tu veux...

Je trouve l'ordre de navigation logique, tu aurait commencer par le contenu?

Oui parce que le visiteur vient avant tout pour obtenir du contenu, pas de la navigation... Pour çà, il a Google. ;-)

Pour la police blanche je sait pas comment le contrer puisque la couleur est déjà définie dans ma css.

A moins que ce soit ma webdeveloper qui déconne, j'ai pourtant bien réussi à mettre tout ton texte en blanc. C'est donc qu'il manque quelquechose... quelquepart... :)

Le lien contact je saviat pas, je vais faire ça

Y'a même des sites qui disent qu'il faut donner la possibilité de te contacter par différentes manières... Une c'est le minimum et çà doit être facielement accessible (donc accesskey)

Juste une chose, les liens d'évitement en début de page ne doivent pas être nombreux... Il ne s'agit pas là de refaire un menu sinon c'est contre productif... L'important, c'est de pouvoir accéder aux grands ensembles de ta page le plus rapidement possible donc il faut jongler entre ces liens et les raccourcis. ;-)

• participer

Message publié le jeudi 03 août 2006 à 12 h 55 par albeth. In the Internet we trust

Alors ce qui a était fait depuis ce matin :

Lien d'évitement
Page de contact (mail, msn et et skype)
Page de politique d'accessibilité
Accesskey mais pas les officiels qui semble pas mal critiqué (notament s)
Modifcation de quelques balises pour la sémantique
Modification du tableau de l'accueil
Rajout de méta sur toutes les pages.

Il me reste donc a voir la taille du texte, je ne pense pas toucher a la navigation pusiqu'il suffit de cliquer sur aller au contenu (key 2) pour avoir la navigation sur le contenu. Pour les paragraphes c'est jouable mais trop lourd a mon avis, je l'est fiat sur les pages fixes. Pour les label je n'en met pas lorsqu'il n'y a pas de commentaires pour les champs parsque je n'en voit pas l'intéret, si il y en as un je les met de suite, pareil pour les fieldset.

Pour la couleur des textes j'ai ca dans ma css :

body{
margin:0;
padding:0;
font-size:0.8em;
font-family:Arial,Verdana,Helvetica,sans-serif;
background-color:#fff;
color:#000;
background:url('images/fond.gif') no-repeat fixed center;}

Je pensais que ca suffisait mais doit falloir le mettre dans *

Pour la méta keyword je vais essayer de faire une liste correcte. Pour les correcteurs pour tout je sais bien mais je cherche quelqu'un de confiance pour lui donner des droits sur tout le site, il faut en plus une personne dispo et doué en orthographe autant dire que c'est dur...

Aller j'y retourne, ++

• participer

Message publié le jeudi 03 août 2006 à 13 h 33 par koala64. http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS

Les fieldsets servent à regrouper les grandes zones du formulaire. Dans un formulaire qui ne contient qu'une grande zone, çà n'a pas vraiment d'utilité mais si les champs peuvent être regroupés par type de renseignement, çà ajoute de la clarté.

Les labels servent à la fois de légende pour chaque champ et de raccourci via leur attribut for. Lorsque tu cliques dessus, le focus va directement dans le champ auquel il s'applique. Cà, c'est plus important que le fieldset et mis à part pour le bouton de soumission, çà ne devrait pas être omis.

Sinon, pour les couleurs de texte, le color: #000; mis sur le body (associé à un background, çà va de soi) est censé suffir... donc là, je ne vois pas trop pourquoi j'ai pu le mettre en blanc... Faut que tu fasses des tests... Soit y'a une erreur, soit c'est chez moi que çà faisait n'importe quoi... ;)

• participer

Message publié le jeudi 03 août 2006 à 13 h 36 par koala64. http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS

Tiens, tant que j'y suis...

Pour les tailles de texte, il vaut mieux définir une taille en % sur le body puis définir chaque entité en em. L'association des deux permet un meilleur contrôle des em en fonction des différents navigateurs (moins de différence entre chaque) et empêche les textes de devenir trop petit lorsqu'on diminue la taille.

• participer

Message publié le jeudi 03 août 2006 à 15 h 05 par albeth. In the Internet we trust

Alors pour le menu j'ai bricoler un truc qui tinet pas trop mal la route selon moi et ca m'a permis de découvrir un bug trange de IE, en mettant des sauts de lignes pour l'indentaiton dans mon code entre les li il me met des sauts de lignes donc en attendant d'en savoir plus j'ai virer l'indentation (je sais c'est pas bien)

Sinon pour les forumlaires quand j'ai pas de légende pour un champ, exemple pour le formulaire de recherche je doit quand même mettr eun label? Si oui je met quoi dedans?

Pour la couleur de texte j'arrive pas a le passer en blanc dsl et pour les tailles de texte je verrais ce que je fait.

Quoi d'autre et qu'est ce que j'ai oublier dans vos remarques?

++

• participer

Message publié le jeudi 03 août 2006 à 15 h 19 par koala64. http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS

Sinon pour les forumlaires quand j'ai pas de légende pour un champ, exemple pour le formulaire de recherche je doit quand même mettr eun label? Si oui je met quoi dedans?

Tu peux par exemple mettre un truc dans le genre:
<form action="recherche.php" method="post"> <fieldset><legend>Recherche</legend> <div> <label for="cherche">Mots clés : </label> <input type="text" id="cherche" name="cherche" size="40" /> </div> <div> <input type="submit" id="submit" name="submit" value="Rechercher" /> </div> </fieldset> </form>

Pour la couleur de texte j'arrive pas a le passer en blanc dsl...

Ah ? Ben c'était peut-être un bug alors... Je rééssaierais histoire de...

• participer

Message publié le jeudi 03 août 2006 à 15 h 34 par albeth. In the Internet we trust

Et ouai mais j'ai pas du tout envit d'avoir un texte a coter de mon champ de recherche, enfin si il faut vraiment je vais essayer de penser ca autrement alors...

• participer

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.