Refait en xhtml css aaa

Après une cinquantaine de jours de travail non-stop, la nouvelle version du site dhammadana.org vient d'être mise en ligne (pour la version française en tout cas). En dépit de mes efforts pour le rendre aussi accessible que possible, il subsiste encore de bien des imperfections, que je corrigerai petit à petit.

Je vous remercie par avance pour toutes les remarques et critiques dont vous me ferez part.

Dhamma

Salut, je déplace dans le bon salon : "design et critiques de sites"

Bonjour,

Il est dommage que sur le menu gauche l'image empiéte sur le texte. Je mettrais une valeur pour la font moin grande. Sinon l'aspect générale du site est agréable.

Merci Raphaël, je ne retrouvais plus ce forum justement.

Ce que tu me dis m'inquiète Doomer, car chez moi, elle n'empiète ni sur Firefox, ni sur Internet Explorer, ni sur Netscape, ni sur Opéra.

Peux-tu me dire quel navigateur tu utilises ?

Il y a en tout cas un problème que je ne suis pas parvenu à régler sur ce menu... Sous FF, il est impeccable (naturellement !), mais sous IE, il s'allonge verticalement. À quoi cela peut-il être dû ?

Ca manque un peu finesse dans l'aspect graphique, ombres portées, ombres internes,.. elles sont trop visibles à mon goût.

Bonjour!

Puisque tu "revendiques" un site accessible, je vais concentrer mes remarques sur ce point.

Voici donc quelques petits points à améliorer ou corriger:
- le changement de langue (là où tu passes en anglais) n'est pas indiqué par un lang="en". Imagine le résultat avec une synthèse vocale

- ce n'est pas la peine de dire "Logo handicapé (vers la section sur l'accessibilité)" ou "arobase (pour envoyer un message au webmestre)", par exemple. En effet:
1. Un aveugle n'a que faire de savoir qu'il s'agit du logo. Ce qui l'intéresse, c'est ce qui se passe quand il active le lien.
2. Pire: "arobase". Qui connaît la signification de ce mot? En quoi est-ce important? "Envoyer un message au webmestre" est largement plus explicite et plus simple.

- j'ai des doutes pour les personnes souffrant de déficiences visuelles. Si tu imagines ta page en noir et blanc et la regardes sans utiliser ta souris, quelle information va te dire que tu te trouves sur la page en français, en anglais ou autre (à part la lecture de la page ). Les drapeaux c'est bien, mais est-ce un effet qui est simplement là pour de la décoration ou pour apporter de l'information? dans le deuxième cas, elle devrait être accessible de la même manière pour quelqu'un qui ne perçoit pas les couleurs (maisje chipote )

- dans la même veine, je crains que le contraste du titre "Découvrir dhammadana.org", notamment, ou celui des pictogrammes dans la barre de menu, soit insuffisant par rapport à la couleur du fond. Un outil pour analyser ce contraste, se référant aux normes du W3C que tu revendiques, est le Colour Contrast Analyser

- sans souris, je ne peux accéder au menu (en navigant uniquement à la tabulation, je me promène "au petit bonheur la chance" dans une liste de liens que je ne vois pas autrement que dans la barre de statut).

- tu sautes directement de la balise h1 à la balise h3. Il te manque un niveau de structure h2, qui laisse à penser que tu as plutôt utilisé h3 pour une question de présentation...

- ce serait bien d'avoir un moteur de recherche...

- le texte donnant le raccourci vers la liste des raccourcis clavier est très très loin dans le texte, donc pour une synthèse vocale. Et la liste des raccourcis est très loin aussi dans la page consacrée à l'accessibilité. Un aveugle utilisant un tel dispositif devra attendre beaucoup de temps avant d'en prendre connaissance...

Sinon, dans l'ensemble, félicitations pour le travail réalisé
Modifié par Gilles (18 May 2005 - 11:43)

Merci beaucoup pour ces remarques aussi constructives que détaillées. Il y a du pain sur la planche !

Pour le moteur de recherche, il est accessible depuis toutes les pages sur plusieurs liens (la grosse loupe en haut, la petite loupe en bas, et en hypertexte dans la colonne de droite), ainsi qu'à l'aide du raccourci clavier touche "4".

Pour les drapeaux, je pense que la balise "title" est suffisamment explicite pour un non voyant.

Est-il vraiment hors-normes que de passer d'un titre <h1> à <h3> ?

Dhamma a écrit :
Merci beaucoup pour ces remarques aussi constructives que détaillées. Il y a du pain sur la planche !

Pour le moteur de recherche, il est accessible depuis toutes les pages sur plusieurs liens (la grosse loupe en haut, la petite loupe en bas, et en hypertexte dans la colonne de droite), ainsi qu'à l'aide du raccourci clavier touche "4".

Oups, pardon, j'avais regardé trop vite

a écrit :
Pour les drapeaux, je pense que la balise "title" est suffisamment explicite pour un non voyant.

Je ne parlais pas des non-voyants, mais des malvoyants, en particulier ceux dont la vision des couleurs est dégradée. Essaie d'imaginer la page en noir et blanc. Tu es bien d'accord qu'il est alors impossible de savoir si on se trouve dans la partie anglaise, française ou birmane simplement en regardant les drapeaux... l'attribut title n'est en effet utilisable qu'en cas de survol du drapeau par la souris. Il faudrait trouver une deuxième manière de donner cette information, dans la même zone de la page.
Peut-être ce qui pourrait t'aider, est de réfléchir à la fonction de ces drapeaux: sont-ils là plutôt pour indiquer la langue courante, ou pour permettre, en cliquant dessus, de sélectionner une version dans une autre langue? En séparant les fonctions, peut-être pourras-tu résoudre cette difficulté (l'information {Vous consultez actuellement la version française} est différente de l'action {Sélectionnez la langue dans laquelle vous voulez consulter ces pages: français, anglais, birmal}).

a écrit :
Est-il vraiment hors-normes que de passer d'un titre <h1> à <h3> ?

Ce n'est pas conseillé. Certaines synthèses vocales se servent de la hiérarchie des titres dans la page pour construire une navigation alternative. Si les titres ne sont pas hiérarchisés de manière stricte, c'est déroutant. Certains préconisent en outre de n'utiliser qu'un seul titre titre h1 dans la page, qui en donne le titre.
Modifié par Gilles (18 May 2005 - 12:41)

a écrit :
Il y a en tout cas un problème que je ne suis pas parvenu à régler sur ce menu... Sous FF, il est impeccable (naturellement !), mais sous IE, il s'allonge verticalement. À quoi cela peut-il être dû ?

Je pense que pour résoudre ce problème, il faut attribuer un display: block aux éléments <li> du menu. Par défaut les éléments <li> sont affichés en display: list-item et IE leurs attribue des marges importantes, que l'on ne peut pas enlever avec margin: 0; padding: 0. Bizarre.
Tu me diras si ça marche

fwed a écrit :
Je pense que pour résoudre ce problème, il faut attribuer un display: block aux éléments <li> du menu.

Malheureusement, ce n'est pas ça. Les liens sont déjà "display: blockés", sinon même FF afficherait des marges. J'ai tout de même essayé avec les listes, les sous-listes, etc. Rien n'y fait

Je suis sûr qu'il y a une solution, mais ne connais pas encore laquelle.

Alors désolé ! J'avoue, je n'ai pas Internet Explorer... j'utilise Safari et Firefox sous Mac. Ton site s'affiche très bien sous Safari
Mais si quelqu'un trouve une solution, ça m'intéresse aussi, j'ai souvent eu cette surprise des listes agrandies (voire très agrandies) sous IE. Entre autres mauvaises surprises sous ce navigateur

Content de savoir que tout se passe bien sous Safari ; je n'avais pas encore eu le loisir de le vérifier.

Euh sinon j'oubliais le principal : j'aime bien ton site, la navigation y est très claire ! J'aime bien les logos stylisés en haut à droite, pour l'aide, l'accessibilité, la recherche etc. je trouve ça bien pratique
Juste un petit reproche en forme de goût personnel : un peu trop d'ombrages en dégradé, par exemple dans la colonne du milieu (le contenu)... tu as essayé sans ? Ou avec un ombrage plus discret peut-être.
[edité]
avec un ombrage dégradé de gris vers blanc, au lieu de noir vers blanc, je dis pourquoi pas.
Modifié par fwed (18 May 2005 - 18:43)

bonsoir

Dhamma a écrit :

Pour le moteur de recherche, il est accessible depuis toutes les pages sur plusieurs liens (la grosse loupe en haut, la petite loupe en bas, et en hypertexte dans la colonne de droite), ainsi qu'à l'aide du raccourci clavier touche "4".

attention ce raccourci n'est valable que sous FF

Si tu veux mettre un acces a la recherche avec un accesskey, c'est avec les touches shift+alt+4 qu'il doit etre valide

donc quand on le fait sous IE, on tombe sur la page recherche mais pas dans la boite de recherche
ce serait mieux car sinon on doit employer des TAB ou la souris

amicalement ,
Modifié par Philippe (18 May 2005 - 22:37)

Philippe a écrit :
Si tu veux mettre un acces a la recherche avec un accesskey, c'est avec les touches shift+alt+4 qu'il doit etre valide

donc quand on le fait sous IE, on tombe sur la page recherche mais pas dans la boite de recherche

Sous IE (windows), ce sont les touches Alt + [i]touche + Entrée[/b] qu'il convient d'employer. Tout est ici (au paragraphe "Combinaison des touches, selon les systèmes d'exploitation et les navigateurs") : http://www.dhammadana.org/accessibilite.htm

Et cela fonctionne de la même manière que sous FF. C'est-à-dire que ça conduit sur la page de recherche et une fois sur cette page, la même combinaison des touches place le curseur dans la boîte de recherche.

Belle journée à toutes et à tous !

Dhamma a écrit :

Et cela fonctionne de la même manière que sous FF.

Pour être plus précis :

http://css.alsacreations.com/Politique-accessibilite

a écrit :
* Mozilla, Netscape, Firefox sur Windows : Appuyez simultanément sur la touche Shift et Alt, ainsi que sur une des touches accesskey du clavier (pas le pavé numérique). Vous vous rendrez directement à l'endroit voulu. Note : sur un clavier de type "QWERTY", la touche Shift est inutile pour déclencher l'accesskey.
* Internet Explorer 6 sur Windows : Appuyez simultanément sur la touche Alt et sur une des touches accesskey du clavier (pas le pavé numérique) et ensuite appuyez sur la touche Entrée pour vous rendre à l'endroit voulu.
* Opera 7 sur Windows, Macintosh et Linux : Esc + Shift et accesskey
* MSIE sur Macintosh : Ctrl et accesskey, puis Entrée
* Safari 1.2 sur Macintosh : Ctrl et accesskey
* Mozilla et Netscape sur Macintosh : Ctrl et accesskey
* Galeon, Mozilla et FireFox sur Linux : Alt et accesskey
* Konqueror 3.3+ : Ctrl, puis accesskey (successivement)
* Netscape 4, Camino, Galeon, Konqueror avant la version 3.3.0, Omniweb, Safari avant la version 1.2, Opera Windows/Linux avant la version 7, ne supportent pas les accesskeys.

;)