Http://www.bts-cpi.info Accessibilité maximale ?

(reprise du message précédent)

Pour la bascule de style, j'ai fait un essai sur mon site de test http://www.drillaudweb.info copié-collé depuis l'excellent article de Paul Sowden sur alistapart http://http://www.alistapart.com/articles/alternate

A+

Merci pour vos réponse, MERCI Stephan pour cette analyse poussée et énormement constructive ! J'ai déja effectué des modification, mais mon hebergeur déconne, je n'arrive plus à accéder à mes sites, à leur site, et aucun possibilité de connection FTP. Donc je vous préviendrais des que la liaison pourra être rétabli.

Merci Merlin pour le switcher en javascript. Je le mettrais en premiere page ou sur le plan du site, pour simplifier l'interface et faire moins gadget, je mettrais des polices plus grandes et couleur foncé sur claire. Encore merci

Switcher en JS appliqué.
Il est composé d'un CSS
dit "normal"
d'un CSS avec caractère agrandi, couleur de fond noir, sur police clair et vif dit "foncé"
et un autre sans css dit "sans css".

L'ancienne place du switcher est remplacé par un espace de "news" (très pratique car en include sur toutes les pages).

Réorganisation des menu, Plan du site placé directement après la première tabulation. Page accesskey crée avec la touche raccourci 0.

Page Formulaire fait en tableaux CSS, (partie contact en cours)

Validation de tout le site en html 4.01 trans, et CSS aussi.

Supression des "title" dans les liens car ils sont tous explicites (aucun liens caché).

Si quelqu'un à d'autres critiques je suis toujours preneur lol
Modifié par Super_baloo8 (18 Oct 2005 - 00:15)

Bonjour,

J'ai une super critique à deux balles, mais quand même sérieuse

Dans Acceskeys (et peut-être ailleurs ?), tu as écris "acceuil" au lieu de "accueil."

Ce n'est pas une critique à deux balle loin de là, j'ai mis cette erreur surement sur deux pages, celle des accesskeys et celle du plan du site, Merci Beaucoup mon professeur de français Merkel

<edit>Corrigé </edit>
Modifié par Super_baloo8 (19 Oct 2005 - 20:11)

Salut

Visiblement tu m'as demandé dans un autre post de commenter ton site. J'ai pas vu ou mais c'est pas grave, je m'y colle quand même !

De prime abord, je trouve la structure de la page étrange... peut être cela vient-il du fait que je suis en 1280*960, mais chez moi ca remplit la moitié supérieure du navigateur... du coup ca oblige à lire des lignes super longues.... ce qui est génant, car une fois arrivé en bout de ligne, le temps de faire un </br> intellectuel, je sais plus à quelle ligne je suis...
Ca doit venir des div en %, chose dont je ne suis pas trop fan.
Peut être y'a-t-il quelque chose à faire avec ca... mais étant débutant en la matière, je ne sais pas quoi te conseiller : il doit y'avoir un moyen de ne pas pénaliser les surfeurs à plus haute résolution par un étirement trop incontrolé de tes divs...

Ensuite, pour la lecture, je pense qu'il faudrait que tu hiérarchise mieux que cela ton texte au niveau des couleurs. J'hésiterai entre ta css normale et ta css foncée, pour diverses raisons :

Ta CSS normale fait super mal aux yeux au niveau des contrastes, à tel point que j'ai tout d'abord pris l'image de trame dans le jaune pour une défaillance visuelle de ma part. Mais la lecture est quand même plus facile, car quand tu insère des liens dans le texte, ils ne sont pas trop contrastés, et permettent une lecture continue du texte qui n'arrète pas l'oeil.

A l'inverse, dans la css foncée, la typo blanche entrecoupée de liens rouges assassine la lecture. Par contre, le contraste de typo blanche sur fond noir fonctionne. Peut être serait-il bon que tu change ta css au niveau de ton a:link et mettre une couleur plus proche du blanc (jaune, orangé par exemple).

Mais il faudrait aussi hiérarchiser les tailles de typo. Le bloc des news par exemple est trop visible car la typo est bien trop grosse. On ne voit plus que ca.
Pour les autres typos, j'ai le sentiment général que tu utilise trop de polices différentes (en tout cas en style : taille et couleur).
L'idéal (jamais atteind, je le sais moi aussi) serait d'avoir une couleur/taille pour le titre, pareil pour le corps de texte, pareil pour tes liens hypertextes (du moins en a:link). Et ca devrait presque suffir !
A la limite tu fais un style particulier pour les news qui ont pas besoin d'avoir la même taille que le corps de texte...

J'en dis beaucoup, ca doit être pénible à lire la

Mais j'en rajoute : une chose qui serait bien aussi serait que ton footer soit toujours en bas de page sur toutes les pages (avec ou sans le défilement, au choix, mais sans serait mieux ^^)

Concernant les liens au fil du texte, n'y aurait il pas moyen de les avoir en sous menu plutot qu'au fil du texte ? (quite à les avoir en hyperliens discrêts dans le corps de texte ?)

Enfin voilà en gros, si j'ai plus à dire j'en rajouterai, mais déja si tu saisis le sens de tout ce que je veux te faire passer comme message, ca améliorera pas mal la lecture.

Désolé de m'être étendu comme ca, mais y'avait beaucoup à dire... (c'est pour ca que je n'avais pas fait de commentaire sur ton sujet, je savais que j'en écrirai beaucoup).

Enfin bon courage !

EDIT : en fait en résumant en gros, je préfère ton style typographique de la CSS normal, mais le fait d'avoir un fond plus contrasté par rapport à la typo comme sur ta CSS foncée !
Modifié par Mikachu (19 Oct 2005 - 22:34)

Je vais commenter le commentaire de mikachu, cela ira plus vite.

Tout d'abord, je suis plutot favorable au div en % car cela permet un redimensionnement sans déstucturé la mise en page.

Coté bascule de style le normal est bien (c'étais le style initial de la version précédente) l'idée de mettre un style sans css est excellente (et d'ailleurs la mise en page sans css est très lisible) par contre le style foncé est un peu flashy pour moi (on croirait le vieux panel de couleur "rugby" de window).

J'ai constaté que tu as le même pb que moi sous IE la couleur de fond ne change pas lorsque l'on change de style. Pour la faire changer il faut légèrement redimensionné la page (j'ai pas trouvé de solution)

Pour la typographie je ne suis pas géné ni pour les font (il n'y en a qu'une par style, sauf erreur de ma part) ni par le taille.

En résumé, j'aime bien sauf le style "foncé" et si tu trouves le bug d'IE, fais moi signe.

Quand je parle d'unifier les polices, je ne parle pas en matière de famille de police, mais surtout de créer une hiérarchie la plus simple possible :

a écrit :
une couleur/taille pour le titre, pareil pour le corps de texte, pareil pour tes liens hypertextes (du moins en a:link). Et ca devrait presque suffir !

Qu'on puisse identifier rapidement : "ah, ca c'est un titre", "ca c'est un lien", etc...

Merci beaucoup Mikachu d'avoir bien voulu analyser mon site.

Alors on va prendre point par point. (d'abord les commentaire de Mikachu)

a écrit :
je suis en 1280*960

Je suis moi même en 1280x1024, je sais que le site avec peu de texte, est tout en largeur. Mais quand tu est en 800x600 le site fait beaucoup plus carré, donc je vais laisser les div en % (question d'adaptabilité tout navigateurs).

a écrit :
Ta CSS normale fait super mal aux yeux au niveau des contrastes, à tel point que j'ai tout d'abord pris l'image de trame dans le jaune pour une défaillance visuelle de ma part.

Je ne suis pas super habile dans le choix des couleurs , que me conseillerais tu ? Un fond gris, bleu, maron, oranger, rouge ?

a écrit :
Mais la lecture est quand même plus facile, car quand tu insère des liens dans le texte, ils ne sont pas trop contrastés, et permettent une lecture continue du texte qui n'arrète pas l'oeil.

Ca c'est un bon point Je veux donner comme effet au liens qu'ils se voyent, mais qui se fondent en même temps avec la couleur du texte.

a écrit :
A l'inverse, dans la css foncée, la typo blanche entrecoupée de liens rouges assassine la lecture. Par contre, le contraste de typo blanche sur fond noir fonctionne.

La CSS foncé n'est pas la pour faire gadjet et n'est pas la pour faire objet de design. J'essaye d'adapter les couleurs, pour des personnes qui pourrais être albinos, ou qui aurais du mal à différencier certaines nuances, en quelques sotre cette CSS serais une genre de couleur inverse (comme dans windows).

a écrit :
Mais il faudrait aussi hiérarchiser les tailles de typo. Le bloc des news par exemple est trop visible car la typo est bien trop grosse.

Exact, je l'avais remarquer, mais ca ne me choquer pas plus que ca, mais que quelqu'un d'autre en parle ... Je vais le modifier ce week end.

a écrit :
J'en dis beaucoup, ca doit être pénible à lire la

Ah non ! pas du tout bien au contraire

Mikachu a écrit :
Mais j'en rajoute : une chose qui serait bien aussi serait que ton footer soit toujours en bas de page sur toutes les pages

Je vais arranger ca.

a écrit :
Concernant les liens au fil du texte, n'y aurait il pas moyen de les avoir en sous menu plutot qu'au fil du texte ? (quite à les avoir en hyperliens discrêts dans le corps de texte ?)

Je ne comprends pas très bien, tu veux dire faire une récolte des liens dans chaque menu ? Si j'ai bien compris, je ne prèfère pas, car pour l'instant la partie qui contient les liens les plus important et celle de catia.php, et le problème c'est que ce sont des animations assez lourde (environ 3 mo). Si je n'ais pas compris ce que tu voulais dire ...

a écrit :
Désolé de m'être étendu comme ca, mais y'avait beaucoup à dire...

Aucun problème, tu recommence quand ?

a écrit :
EDIT : en fait en résumant en gros, je préfère ton style typographique de la CSS normal, mais le fait d'avoir un fond plus contrasté par rapport à la typo comme sur ta CSS foncée !

Le message est bien passé j'ai bien compris, un fond qui relève la sauce.

a écrit :
Enfin bon courage !

C'est pas la mort à retoucher, mais grand merci quand même !

Au tour de Merlin ^^

Merlin a écrit :
l'idée de mettre un style sans css est excellente (et d'ailleurs la mise en page sans css est très lisible)

Mirci

a écrit :
le style foncé est un peu flashy pour moi (on croirait le vieux panel de couleur "rugby" de window)

J'ai expliqué les raison un peu plus haut, mais c'est vrai que ca flash, mais c'est le but

a écrit :
J'ai constaté que tu as le même pb que moi sous IE la couleur de fond ne change pas lorsque l'on change de style. Pour la faire changer il faut légèrement redimensionné la page (j'ai pas trouvé de solution)

Aucune réponse en effet, je ne comprend pas pourquoi ça fait ca

a écrit :
Pour la typographie je ne suis pas géné ni pour les font (il n'y en a qu'une par style, sauf erreur de ma part) ni par le taille

J'utilise une seule et même police partout, mais quatre ou cinq "style" d'écriture à partir de cette meme police.

a écrit :
si tu trouves le bug d'IE, fais moi signe.

Pas de problème, de même pour toi si tu trouve fais moi signe stp Merci.

Mikachu a écrit :
Qu'on puisse identifier rapidement : "ah, ca c'est un titre", "ca c'est un lien", etc...

Bientôt, bientôt surement ce week end, car j'ai un taff depuis ce matin 9h donc, mise à jour retardé, mais ... vaux mieux tard que jamais lol.

Pour résumé, ... euh c'est trop long lol, ah si, juste quelque chose, MERCI !
Modifié par Super_baloo8 (20 Oct 2005 - 00:17)

a écrit :
Je ne suis pas super habile dans le choix des couleurs sweatdrop , que me conseillerais tu ? Un fond gris, bleu, maron, oranger, rouge ?

Je n'ai pas à te donner de choix de couleur, c'est une question d'esthétique personnelle, c'est à toi de le choisir. Enfin pour la gamme de couleur, je sais que j'affectionne le camailleu avec une couleur de contraste. Je m'explique :

soit une gamme de couleur froide pour l'ensemble du site (pour les fond et graphismes notamment). Les couleurs froides sont le bleu, le vert, l'indigo. Et avec ca utiliser des typos dans une gamme de couleur chaude (jaune, orange et rouge). Soit l'inverse : site en couleurs chaudes avec typos en couleurs froides. A noter que le violet peut être soit une couleur froide, soit une couleur chaude, selon s'il tend vers le rouge ou vers le bleu.

a écrit :
J'essaye d'adapter les couleurs, pour des personnes qui pourrais être albinos,

... oui mais de là à les faire tomber dans l'épilepsie

a écrit :
Je ne comprends pas très bien, tu veux dire faire une récolte des liens dans chaque menu ? Si j'ai bien compris, je ne prèfère pas, car pour l'instant la partie qui contient les liens les plus important et celle de catia.php, et le problème c'est que ce sont des animations assez lourde (environ 3 mo). Si je n'ais pas compris ce que tu voulais dire ...

Euh, on doit pas parler de la même chose... enfin c'est pas important si tu rends les liens plus fondu dans le texte. Je t'en reparlerai après modifications si ca ne fonctionne pas

a écrit :
Le message est bien passé cligne j'ai bien compris, un fond qui relève la sauce.

Attention, je n'ai pas dit que le fond devait être noir ! j'ai juste dit qu'il doit être en contraste avec le contenu. Le principe noir sur blanc/blanc sur noir est le plus contrasté, mais on peut descendre dans la nuance pour personnaliser un peu les choses. Noir sur blanc, avec les écrans de fous qu'on nous fait maintenant !! ca serait gacher !! on est plus en CGA/EGA que diantre !

a écrit :
J'utilise une seule et même police partout, mais quatre ou cinq "style" d'écriture à partir de cette meme police.

Essaye de réduire ta hiérarchie à trois niveaux, ca sera tout de suite plus clair Au pire essaye de pas dépasser les 4 niveaux

Je précise juste à ceux qui vont me taper sur les doigts : oui mais dans les balises on a <p> et <h1> à <h6>, alors pourquoi se priver ?? C'est seulement une prévision, au cas ou... En réalité ca doit servir pour les TRES gros sites... mais sinon au niveau typographique, c'est bien trop.

Voilà, mes nouveaux commentaires

Sinon, félicitations pour ton nouveau boulot !

Super_baloo8 a écrit :
J'essaye d'adapter les couleurs, pour des personnes qui pourrais être albinos, ou qui aurais du mal à différencier certaines nuances!

Hmm tu veux dire daltonien je suppose, parce que je vois mal le rapport avec un albinos (couleur des pigments de la peau)

Raphael a écrit :

Hmm tu veux dire daltonien je suppose, parce que je vois mal le rapport avec un albinos (couleur des pigments de la peau)

Les albinos (enfin surtout les lapins russes et quelques autres) ont les yeux rouges, donc ne doivent pas percevoir les couleurs comme les autres, ça doit faire filtre...

Je ne vois que cela

Je suis déjà dehors...

Euh oui désolé je voulais dire albinos, euh non daltonien

Connaissais vous un lien en rapport avec ce handicap qui pourrais m'aider dans la conception de css ?

Je n'ais pas trop le temps de vous répondre car je suis très pris, mais promis dès que je peux je vous donne des nouvelles, en tout cas merci énormément

Super_baloo8 a écrit :
Euh oui désolé je voulais dire albinos, euh non daltonien

Connaissais vous un lien en rapport avec ce handicap qui pourrais m'aider dans la conception de css ?

Euh tu voulais dire albinos ?!?!
Dans ce cas je ne connais pas de ressources.

Mais encore une fois, je pense que tu voulais dire Daltonien et dans ce cas, je suis sûr que tu as commencé par te précipiter sur le Salon Accessibilité où tu trouveras un sujet de Ressources et ôh comme par hasard plusieurs liens sur le daltonisme en particulier

EDIT : tu es un membre très très actif, mais essaye parfois de réfréner tes envies de post et fais d'abord des recherches préalable dans ce forum très complet en ressources
Modifié par Raphael (22 Oct 2005 - 10:28)

Super_baloo8 a écrit :
Euh oui désolé je voulais dire albinos, euh non daltonien

C'étais une "blague, je voulais bien dire DALTONIEN

A question idiote réponse idiote Merci Raphaël, et promis je ferais mon maximum pour me renseigner avant de demander

Je me souviens qu'on me parlais de mettre quelque chose comme "height 100%", je l'ai essayai (comme les différent tuto et modèles) mais je me suis rendu compte qu'en 1024x768 ca ne marchais pas exactement pareil donc je laisse comme tel pour l'instant, ce n'est pas le plus important, j'ai mofiié la CSS pour daltonien (merci pour le lien Raph).

Police diminué en taille pour le bloc de droite. Je suis en train d'uniformiser les Hn et autre titre texte etc... mais je le finirais le week end prochain. MERCI !
Modifié par Super_baloo8 (23 Oct 2005 - 03:40)

Bonjour Super_baloo8,

J'aime bien la photo de la page d'accueil !

Catia, j'avais vu le lancement sur un salon à Paris, cela fait son chemin ...

Pourquoi un table sur pour le formulaire contact et des div différents sur le formulaire d'inscription ?

Pourquoi ne pas utiliser fieldset ?
C'est très esthétique, en plus d'être accessible, les fieldset !

Modifié par Vero (23 Oct 2005 - 13:44)

Je ne suis pas encore au point avec toutes les balises, mais je promets que je vais prendre ces balise la, j'ai déja vu l'effet obtenu, et je trouve ca comme toi vero

J'ai pour l'instant laissé un tableau sur le formulaire de contact tout simplement car je n'ai pas encore eu le temps de le faire

Catia est un programme avec d'énormes possibilités de conception, mais pleins de bug persistes encore sous Unix

Merci d'avoir donné ton avis Véro et encore Bonne Anniversaire !

Chose promise, chose due ^^ j'ai utilisé les fieldset sur mes deux page à formulaire, en enlevant (enfin) le tableau qui restait dans la partie contact.

J'ai aussi une question, que pensez-vous du "style Fonce" ? est-il bien adapté pour les daltonien ? Le résultat est tiré d'un des site en lien sur le forum.

Merci

Question très intéressante, car n'étant pas daltonien, je ne peux pas lire le texte en style foncé (c'est écrit en très foncé sur noir), pour ma part.

J'ai remplis un peu plus le site, quelques membres arrivent (ce n'est pas trop tot lol).

Je voudrais savoir ce que vous pensez du fonctionnement de cette partie :

ICI LE LIEN

Est-ce facile de naviguer ?
Est-ce long à charger ?
Est-ce sémantiquement correct ?

Autre partie à traiter, pensez-vous qu'il est necessaire que je fasse un lien d'évitement ? (accedez au contenu)

Merci pour vos réponses.

@Merlin, moi non plus je ne suis pas daltonien, et j'ai autant de mal que toi pour voir ce qui est écris lol

J'ai communiqué l'URL de ton site à un copain d'un copain qui est daltonien. Voici sa réponse :

foutaises, c'est aussi illisible que pour un non-daltonien !

Par ailleurs il m'a donné cette url : http://shift.freezope.org/tools_lab qui est un outil qu'il a développé permettant de voir comment un daltonien verrait un ensemble de couleurs choisi. Malheureusement en bon linuxien, cet outil ne fonctionne pas sous windows mais il existe apparemment un outil similaire disponible ici : http://www.visionaustralia.org.au/info.aspx?page=628
(sachant que daltonisme en anglais = colour blindness)

J'ai jeté un coup d'oeil (sans jeu de mots) à ce site (qui au passage est moyennement conforme aux standards, 8 erreurs + des warning) et y ai vu pêle-mêle:
- un logo audio (tiens un autre sujet du forum traitait de l'utilité d'inclure des sons te s'interrogé sur des exemples pertinents)
- une bascule de style (blanc/vert sur gris sombre et noir sur blanc)
- le fameux skip navigation (goto content)
- un changement de taille de texte (je ne vois pas vraiment l'intérêt, comme par ailleurs ils décrivent comment changer la taille des fonts suivant les différents navigateurs)

A+
Modifié par Merlin (07 Nov 2005 - 15:53)