[Soumission à la critique] atelier relais Homécourt Briey

bonjour
je viens de "finir" le site de l'atelier relais de Homécourt Briey
(il ne reste qu'a le remplir lol)

j'ai testé la validité : xhtml strict ok pour toutes les pages sauf le moteur de recherche (validé en html transitionnel)
les trois feuilles css sont valides aussi
accessibilité sur ocawa de deux pages (à la troisième j'ai eu un message m'indiquant que j'avais atteint mon quota mensuel)

pour l'instant les pages indiquent "site en construction" exceptées le moteur de recherche, le formulaire de contact et la politique d'accessibilité

j'ai utilisé de préférence les em pour les tailles de police
menu en css
premier lien de la page pointant vers le contenu
les images de mise en forme sont en background, les autres ont un "alt" explicite (enfin j'espère^^)


le menu du haut permet de choisir entre 4 styles
dont un nommé contraste ou le texte apparait en plus gros
je me suis amusé à créer une feuille de style imprimante (utilisée pour l'instant uniquement sur la page "politique d'accessibilité")

n'ayant que ie7 et firefox 2 et 3 de dispo je n'ai pas moyen de tester le site sur ie 6, 5 ...



à oui j'allais oublier ... le lien
http://www.ac-nancy-metz.fr/Pres-etab/CollJJRousseauHomecourt/www/index.php
Modifié par scott54 (05 Oct 2008 - 18:39)

Bonjour

le lien sur "!" pour accéder au contenu c'est bien, mais "!" c'est une très petite zone pour cliquer qui n'a aucun sens. Un title lui conférant un peu de sens serait le minimum, remplacer "!" par "accéder au contenu" serait mieux. Idem pour les 3 liens (même si un est un doublon) qui sont dans "premier" et invisible, ils ne servent actuellement à rien alors qu'ils pourraient être bénéfiques à tous.

Le site manque un peu de contenu pour le moment pour un avis plus complet, j'ajouterais cependant que certains mélanges de couleurs sont "perturbants" (rouge, rose, bleu)

a écrit :
mais "!" c'est une très petite zone pour cliquer qui n'a aucun sens

en ce qui concerne le "!" :

c'est un équivalent d'une méthode que j'ai vu sur un site sur l'accessibilité : chez eux ils utilisent un pixel invisible afin que le tout premier lien de la page soit un lien vers le contenu de la page (afin de sauter les menus entête ...) sans "casser" le design
personnellement je n'ai pas réussi à insérer de pixel invisible sans faire un décalage vers le bas d'où l'idée du "!" en très petite taille (0.1em)

cela permet à une personne non voyante en appuyant sur tab d'arriver sur ce lien et de passer outre les menus et l'entête
une idée que j'ai trouvée sur http://www.accessiweb.org/fr/Tools/Aide/

en ce qui concerne le menu premier il n'est là que pour les navigateurs qui affichent les pages sans style (toujours dans le but de facilité l'accès au contenu pour les non-voyants) je pense qu'une personne en pleine possession de ses capacités visuelle arrivera bien à trouver le contenu de la page toute seule

pour la signification du "!" merci de ta remarque, j'avais complètement oublié de lui donner un titre

Bonjour,

La maquette est pas mal. Quelques petites remarques sur l'agencement.

1) Je mettrai les fonctionalités de lisibilités, qui sont tout en haut, autre part ça fixe l'attention (pour rien) puisque toutes les autre vues proposés sont moins biens?
2) Le rouge est chaleureux mais li faudrait y ajouter un ou deux effets ca péche avec la classe du logo... si si classe, il est très bien. Et peut-être un peu trop sombre ce... bordeau pardon. ou alors changer les mots en haut à gauche en couleur clairs?
3) peut-être éviter les doublons dans la page d'accueil (liens du bas)?
4) Bref, j'utiliserai la boite du haut pour mettre un micro message sur ce qu'est l'atelier... ensuite redéfinir ce qui doit être dans les liens du bas?

Bon site!

Pixalione

bonsoir et merci pour ces critiques constructives

dans l'idéal mon idée était de placer le choix du style dans le bandeau en bas sous forme de menu déroulant
je n'ai pas voulus le faire en css parce que j'ai lu sur plusieurs sites que ce type de menu posait des problèmes

j'ai eu l'idée de proposer le choix sous forme de menu déroulant de formulaire
malheureusement mes connaissances en php étant ce qu'elles sont (c'est à dire nulle lol) je ne suis pas arrivé à adapter le styleswitcher trouvé ici même pour le mettre dans un formulaire

cela dit je suis tout à fait d'accord : les menus en haut et dans le pied de page ne me plaisent pas en l'état

Pixalione : de quels mots parles-tu quand tu dis "ou alors changer les mots en haut à gauche en couleur clairs"?

a écrit :
en ce qui concerne le menu premier il n'est là que pour les navigateurs qui affichent les pages sans style (toujours dans le but de facilité l'accès au contenu pour les non-voyants) je pense qu'une personne en pleine possession de ses capacités visuelle arrivera bien à trouver le contenu de la page toute seule

Et si je navigue au clavier je fais comment je n'ai pas le droit d'avoir les mêmes informations?

Et si la page politique d'accessibilité m'amenait des informations utiles avant de naviguer sur le site même si je ne suis pas non voyant (accesskey, comment augmenter la police...).

L'accessibilité sert à tous, pas seulement à un type d'utilisateur.

remarques très pertinentes en effets
je m'étais focalisé sur les handicaps visuels sans penser à ceux qui interdisent l'utilisation de la souris par exemple


... je cherche un compromis pour ne pas trop casser le design


merci beaucoup

bonjour,

Je parlais de l'adresse noire sur fond bordeaux.
Bon site

Pixalione
Modifié par Pixalione (08 Oct 2008 - 17:09)

scott54 a écrit :
c'est un équivalent d'une méthode que j'ai vu sur un site sur l'accessibilité : chez eux ils utilisent un pixel invisible afin que le tout premier lien de la page soit un lien vers le contenu de la page (afin de sauter les menus entête ...) sans "casser" le design
personnellement je n'ai pas réussi à insérer de pixel invisible sans faire un décalage vers le bas d'où l'idée du "!" en très petite taille (0.1em)

cela permet à une personne non voyante en appuyant sur tab d'arriver sur ce lien et de passer outre les menus et l'entête
une idée que j'ai trouvée sur http://www.accessiweb.org/fr/Tools/Aide/

Et bien c'est une mauvaise idée... et mal implémenté, comme je l'ai déjà signalé "!" ne veux rien dire. Comment un utilisateur, quel qu'il soit, peut être à même de comprendre où ce lien va le mener ?

Ce que tu as oublié, c'est que les liens d'évitement peuvent être bénéfiques à TOUS !

Quelques remarques graphiques :
-Je trouve que le rose (le bleu turquoise aussi) s'accorde assez mal avec le reste, noir, gris, bordeaux, qui eux sont pas mal du tout.
-Certaines zones pèchent par manque de contraste, notamment les polices noires dans les boutons gris.

Yasashii a écrit :

Ce que tu as oublié, c'est que les liens d'évitement peuvent être bénéfiques à TOUS !

et ils y sont depuis le 7/10

lodemars a écrit :

-Je trouve que le rose (le bleu turquoise aussi) s'accorde assez mal avec le reste, noir, gris, bordeaux, qui eux sont pas mal du tout.

en fait je pense que c'est surtout le rose et le bleu qui ne se marient pas bien ensemble, je suis en train de faire des essais pour remplacer le rose
si tu as des idées ne te gêne surtout pas

voilà : le changement de couleur du fond est fait
je m'attaque maintenant à la page d'accueil


je remet le lien :

http://www.ac-nancy-metz.fr/Pres-etab/CollJJRousseauHomecourt/www/index.php
Modifié par scott54 (10 Oct 2008 - 15:39)

je suis un peu dégouté là : mon brun clair en couleur de fond sur l'écran à tube cathodique du boulot devient un orange plus foncé sur mon écran lcd perso
du coup la couleur ne me plais pu vraiment
cela dit j'ai peur qu'en la changeant elle soit trop clair sur l'écran du boulot ...

j'ai changer la couleur de fond

en prime j'ai ajouté un style : éducation nationale (charte graphique imposée par l'académie metz-nancy pour les sites des établissements scolaires)

même si dans le cas de ce site je n'avais pas vraiment une obligation pour la charte graphique cela m'a permis de faire mumuse avec le positionnement css (qui est complètement différent de celui du style par défaut)
Modifié par scott54 (12 Oct 2008 - 15:58)

quelques changements dont le principal : le changement de style se fait désormais par un menu déroulant de formulaire et j'ai placé celui-ci en footer

le liens du footer sont donc mis en entête et donc plus "visible"