Bonjour à vous,

Je vous ai déjà parlé de Natura-Tous dans un sujet précédent concernant l'accessibilité des fichiers proposés au téléchargement.

Je rappelle tout de même les faits :

Natura-Tous est une asso loi 1901 ayant pour but de permettre l'accessibilité des activités en plein nature à des personnes handicapées qui a déjà quelques années d'existence.

Montée par des amis, c'est tout naturellement que je leur ai proposé de leur coder un site internet propre, et surtout accessible, au vu du public visé.
Car si vous voulez jeter un oeil à leur site actuel (natura-tous.fr), vous verrez que ce n'est pas la panacée (Créé avec Izispot). Smiley sweatdrop

Lors du codage, je me suis imposé plusieurs contraintes :

-Accessibilité optimisée (Et là, je compte sur vous pour me donner des pistes pour pouvoir encore faire mieux)

-Légèreté. Etant moi-même contraint au 56k, j'affectionne de créer des sites qui ne prennent pas une après-midi à charger.

-Design extensible : Actuellement, la plus petite résolution nécessaire en largeur pour voir le site sans déformation ni contrainte est de 782 px.


J'aimerais donc recevoir des critiques constructives, me permettant d'améliorer encore le site et mes propres connaissances, que ce soit au niveau du design, de l'accessibilité, de l'ergonomie ou du code source en lui-même.

Pour l'instant, seules les pages d'accueil et de contact sont abouties. Mais ce n'est pas un problème, les autres pages étant construites sur le même modèle.

Il y a aussi un panneau d'administration afin de permettre à mes amis de pouvoir mettre à jour leur site sans avoir à passer par moi obligatoirement. Cette partie est presque finalisée, il ne me reste juste qu'à trouver un moyen pour eux de pouvoir créer facilement un diaporama.

Au niveau du design, la charte graphique est définie, mais il est susceptible d'être un peu modifié, même si l'essentiel y est.

Voilà, vous pouvez accéder au site que j'héberge sur mon propre hébergement en attendant de le finaliser :

Naturatous, site version bêta.

Merci de vos commentaires !
Quelques petites choses concernant l'accessibilité puise que c'est ce qui t'intéresse.

Au niveau des formulaire (formulaire de contact), tu as bien mis l'attribut "for" aux labels afin de les lier aux champs aux quels ils font référence, mais tu n'a pas mis l'attribut "id" aux champs. Du coup ça ne fonctionne pas. ^^

Exemple (plus clair) :
<p><label class="moyen" for="email">Mon adresse courriel :</label><br>
<input type="text" size="30" name="email" id="email"></p>


Pour constater que cela fonctionne, quand tu clic sur le label, le focus se positionne dans le champ référent.


Toujours le même formulaire. Le bouton submit est avant la fin du formulaire. Étourderie je suppose ^^.

Il manque l'attribut "title" sur le lien permettant d'accéder aux commentaires d'un articles (page d'accueil).

Pas de "title" non plus sur les logos des partenaires et un texte alternatif peu clair ("Menu").


Une petite astuce qui peut d'aider pour l'accessibilité :
Le plugin Firefox "Web Developer" permet de désactiver les styles CSS, désactiver les images, affichier les attributs title...etc
Ce qui donne un aperçu de la façon dont un site est perçu par un visiteur utilisant un lecteur d'écran par exemple.
Modifié par moust (07 Feb 2010 - 12:44)
Merci Moust.

Pour ce qui est du formulaire de contact, je regarde ça tout de suite, ainsi que le lien pour accéder aux commentaires en espérant avoir les capacités de modifier ce dernier.

Pour ce qui est des partenaires :
Toujours avec le soucis que mes amis puissent être autonomes dans la mise à jour de leur site, j'utilise un script javascript pour afficher les logos un par un.
Or, si mes connaissances me permettent de modifier un script php ou javascript, elles ne me permettent pas vraiment d'en créer ou de rajouter des fonctions.
Si j'attribue un titre générique comme "Voir ce partenaire" et un texte alternatif comme "Partenaire", est-ce que cela serait acceptable ?


Effectivement, j'utilise "Web developper". J'ai visualisé mes pages sans stye ni images, mais je ne m'étais pas rendu de cela !
Bonjour,
en vrac:
> niveau accessibilité ça m'a l'air plutôt pas mal mais attention au niveau de contraste, en 800px de large tes citations par exemple ne se lisent pas bien puisque l'abre passe dessous même si ça n'est pas dramatique dans cet exemple là.
Vérifier le niveau de contraste suffisant avec le color contrast checker

> Vous devez baliser les citation courtes à l'aide de l'élément q en suivant ce modèle:
<p><q>Citation courte</q><cite>Auteur</cite></p>

Attention de ne pas oublier le guillemet fermant.

> Veiller à baliser vos paragraphe par un élément p pour pouvoir les manipuler via CSS (ou un autre langage) et permettre au navigateur d'insérer des marges au dessus et en dessous du paragraphe en l'absence de CSS et garantir ainsi un affichage aéré et cohérent.
Cela vous évitera de devoir passer par un br (break) qui ne sert pas à espacer visuellement des paragraphes mais à forcer une coupure de ligne à l'intérieur d'un texte.

> Attention au titre du type <et Voila>.
Le sens du titre doit être auto-suffisant en plus d'introduire de manière explicité le contenu qui le suit.

> Ne pas oublier l'attribut lang="fr" dans l'élément HTML puisque JAWS (principal logiciel de synthèse vocale) ne sait pas lire l'attribut xml:lang

> La syntaxe de certains éléments de votre code est encore en HTML (et non en XHTML)
Je vous conseil d'aller jeter un oeil au réles de compatibilités : http://www.la-grange.net/w3c/xhtml1/#guidelines


S'agissant du design il y a pas mal de chose à améliorer, j'y reviendrai sans doute plus tard Smiley cligne
Bonjour Hermann;

Hermann a écrit :
en 800px de large tes citations par exemple ne se lisent pas bien puisque l'abre passe dessous même si ça n'est pas dramatique dans cet exemple là.

Oui, effectivement, c'est un soucis que j'avais remarqué. Mais comme la citation aléatoire n'est qu'une sorte "d'embellissement", je m'étais dit que cela n'aurait pas grande importance. De plus, l'arbre n'est peut-être pas destiné à rester.
Est-ce vraiment si gênant que cela ?

Hermann a écrit :
Vous devez baliser les citation courtes à l'aide de l'élément q en suivant ce modèle:
<p><q>Citation courte</q><cite>Auteur</cite></p>


Très bien, je vais essayer ces balises. Peut-on leur attribuer une classe ?

Hermann a écrit :
Veiller à baliser vos paragraphe par un élément p pour pouvoir les manipuler via CSS (ou un autre langage) et permettre au navigateur d'insérer des marges au dessus et en dessous du paragraphe en l'absence de CSS et garantir ainsi un affichage aéré et cohérent.
Cela vous évitera de devoir passer par un br (break) qui ne sert pas à espacer visuellement des paragraphes mais à forcer une coupure de ligne à l'intérieur d'un texte.

Je suppose que vous faites référence à la partie "Et voilà".
Cette section est en fait remplie grâce à un éditeur de texte wysiwyg dans la parie administration. Lorsque mes amis rédigeront leur contenu (cette partie sera essentiellement destinée à l'actualité de l'asso), j'essayerai de leur indiquer les bonnes pratiques (Il y a la possibilité de faire des paragraphes dans l'éditeur).

Hermann a écrit :
Attention au titre du type <et Voila>.
Le sens du titre doit être auto-suffisant en plus d'introduire de manière explicité le contenu qui le suit.

Effectivement. mais le message écrit est adressé à mes amis, afin de les informer de l'évolution. Une fois le site mis en place définitivement, les titres seront bien plus explicites puisqu'ils correspondront à la teneur de leur contenu.

Hermann a écrit :
Ne pas oublier l'attribut lang="fr" dans l'élément HTML puisque JAWS (principal logiciel de synthèse vocale) ne sait pas lire l'attribut xml:lang

C'est fait !

Hermann a écrit :
La syntaxe de certains éléments de votre code est encore en HTML (et non en XHTML)

J'imagine que vous faites allusion à certaines balises en majuscule ou à l'absence de guillement sur certains attributs.
Je m'en suis rendu compte à l'instant, en corrigeant ma section artenaires. Je vais voir cela plus en profondeur.



[Edit]
Je viens de passer mes pages au validateur.. Et horreur !
72 erreurs...
La plupart d'entre elles sont causées par l'éditeur wysiwyg de la partie administration.
je ne sais pas si je vais arriver à le modifier afin que cela soit valide.

Le script d'affichage de citations aléatoires m'en génère pas mal aussi...
Modifié par GreenGrass (07 Feb 2010 - 14:38)
GreenGrass a écrit :

Très bien, je vais essayer ces balises. Peut-on leur attribuer une classe ?

Oui bien sûr, tu peux attribuer une classe à tous les éléments affichables (excepté l'élément HTML)
Petite parenthèse : il est plus juste de parler d'élément que de balise (une balise étant soit la balise ouvrante <p> soit la balise fermante </p>) Smiley cligne
Lorsque ta page passe en résolution inférieur (notamment en plus petit que 800px) une partie de ton menu saute la ligne et passe sous tes divs. En même temps, l'image au bout de ton menu vient chevaucher le reste de ton menu encore en place.

Je te conseillerais de mettre un "min-width", si possible afin d'éviter la déformation de la page.