Bonsoir,
a écrit :
Donc, design, ergonomie, tout le tintouin quoi ?
Pas trop d'avis sur codesign, je n'aime pas trop le design mais bon...
C'est un travail plutot bien codé malgrès quelques "gros soucis" que l'on retrouve, c'est le sujet de mon intervention, sur le site de la mairie de prémilhat.
Je ne me suis intéressé qu'au rapport du code et de la conception par rapport à l'accessibilité et l'obligation légale pour ce genre de site de respecter le WCAG.
Je n'ai pas trop fouillé, les remarques ci-dessous sont ce qui m'à sauté aux yeux en parcourant le code.
- Ne surtout pas utiliser les attributs id comme cible des ancres, mais des liens ancres réels, c'est un point important pour assurer la synchronisation entre les prises de focus souris/clavier.
Le lien aller au contenu, qui utilise l'id "body" ne sert à rien, il n'amène pas au contenu, mais boucle sur lui même (logo-lien-logo).
- Les liens d'évitements cachés sont une très très mauvaise idée, ils doivent au contraire être affichés, ils sont
indispensables !!! à la navigation tabulaire.
Cette pratique (lien caché) est à proscrire autant qu'on peut le faire, par ailleurs, dans le cas de cette mairie, soumise à la récente obligation légale cette pratique ne peut pas être acceptée.
-
Ne jamais utiliser display:none et visibility:hidden pour masquer un contenu, ces deux propriétés sont interprétées par les lecteurs d'écrans, en conséquence les liens d'évitement sont totalement invisibles pour tout le monde et ils ne servent absolument à rien.
- Ne jamais utiliser de lettre comme valeur des accesskey, cela à comme conséquence d'interférer avec les raccourcis propre à l'interface utilisée, lecteur d'écran ou navigateur graphique.
- Le site ne passe pas en 800x600, la partie gauche est masquée par la zone de display, comme un effet de marge négative, et donc inutilisable.
C'est certainement le signe d'un très gros problème de conception CSS.
- La systématisation des tabindex est une très mauvaise idée, sur ce site elle rend la navigation tabulaire du flux totalement incohérente, même si "à l'écran" tout semble se passer correctement.
C'est une erreur très commune de l'apprentissage, il faut absolument comprendre que l'aspect graphique d'un site n'est qu'un épiphénomène, une simple interprétation du flux qui est le seul élément structurant sur lequel tu peux t'appuyer.
Dans le cas de ce site, l'utilisation erronée de tabindex désynchronise totalement le flux de la structure graphique, résultat : c'est utilisable pour un voyant (et encore) et très problématique pour un non voyant.
- Faire
très attention, à la hiérarchie des niveaux de titre.
Par exemple ceci, extrait tel quel du code, est un non sens.
a écrit :
<h2 class="hide">Flash</h2>
<h2>La Salle Multimédia</h2>
De manière plus générale on à de très gros problèmes sur l'organisation du contenu qui se présente comme une énumération brouillonne, non ordonnée autrement que par le sens de la lecture.
C'est extrèmement pertubant pour un non-voyant car, de facto, la seule manière de comprendre la structure du contenu est de s'appuyer sur son organisation visuelle.
Actuellement le palmarès des maisons fleuries fait hierachiquement partie des activités de la salle multimédia, et plus loin le samedi 24 septembre 2005 est une entrée hiérarchiquement équivalente à la salle multimédia, ce qui est particulièrement difficile à comprendre.
Pur être un chouia caricatural la mairie de permilhat à au moins deux "entités équivalentes" une jolie salle multimédia et 24 septembre 2005
- Prendre le temps de bien comprendre comment organiser et commenter un tableau de donnée, le calendrier, même si il parait structurellement simple ne peut pas se contenter d'un sommaire.
- Il pourrait être intéressant de donner des indications sur la cible des liens de ce calendrier, pour le moment on comprends que le sujet du "calendrier" est d'afficher les "comptes rendus de réunion", qui est le titre précédent.
Par ailleurs on à un problème applicatif puisque les liens actifs du calendrier ne mènent à rien.
- Ne pas commenter à tort et à travers des images qui sont totalement inutiles à la compréhension, la description "une photo par jour" est particulièrement vide de sens.
Ces images ne servent à rien, leur valeur sémantique est nulle, ce sont de simples éléments de décor, elles n'ont pas à être commentées et leur attribuer un alt vide soulagera d'autant l'écoute de la page par un non-voyant.
- Privilégier l'utilisation des éléments sémantiquements structurants fournis par le langage, la liste des activités de la salle multimédia est une liste et doit donc être implémentée ad minima dans un contener de liste ul.
- L'utilisation de liste de définition pour structurer un menu, n'est vraiment pas une bonne idée, ou plutôt est une fausse bonne idée, faire simple, l'élément idéal pour ton menu est la liste anonyme ul.
L'idée du contournement du dispositif javascript par la reprise des sous-menus en clair dans les pages cibles est très pertinente sur le principe mais mal réalisé.
Le fait de doubler le sous-menu de l'item actif est inutile, tu devrais produire un dispositif javascript plus ambitieux dont le principe est le suivant :
Quand javascript joue, tu produis ton menu tel qu'il est, les pages cibles n'ont donc pas besoin des sous-menus en clair.
Quand javascript ne joue pas, tu ne produis que le premier niveau de ton menu sur la page d'accueil, puis ton menu en liste imbriquées sur les pages cibles en repositionnant par CSS le sous menu sur le design.
Ces techniques de dispositifs javascript switchables et non-intrusives sont extrèmement importantes à comprendre et maitriser.
Tu pourras facilement trouver des exemples pertinents en googlant le thème.
- Ne jamais utiliser de retour chariot à des fins de design, le "br" pour créer une marge dans le formulaire est le signe d'une défaillance de maitrise de la structure CSS, c'est inutile, idiot, contre productif et ça fragilise la structure.
- Ne jamais utiliser les balises d'emphases pour autre chose que de l'emphase. Sur ce même formulaire quel est le mystérieux raisonnement qui aboutis à transformer un titre (donc hn) en emphase stylée ???
- Dans la même veine, pourquoi ce formulaire se retrouve-t-il avec pas moins de 5 divs ? absolument inutiles.
En CSS tout élément est stylable et positionnable, profites en, tu te remerciras mille fois dans le futur lors des opérations de maintenance et de modification.
- Attention de bien vérifier le code, on à des alt à la place de title ou des title de liens vides (title vide = pas de title point barre).
- On peut s'attendre à ce que soit conservée l'obligation de fournir un moteur de recherche interne au site qu'il faut donc implémenter.
C'est également un point très important car c'est une fonctionnalité très utilisée par les publics handicapés pour éviter de devoir fouiller les pages du site.
Ne pas se fâcher même si ces remarques peuvent sembler agressives...
L'impression générale est une indéniable volonté de bien faire et un évident manque d'expérience et de connaissance préalable des techniques nécessaires.
Ne surtout pas croire, ce qui serait une erreur dramatique, que l'accessibilité se réduit à une liste de dispositions à respecter.
Faire un site accessible est un métier où l'expérience est primordiale.
On peut former un "expert" en cinq jours, mais il ne deviendra opérationnel qu'après plusieurs expériences significatives et il lui faudras beaucoup de temps avant de se sentir "à l'aise" et pouvoir produire un travail de qualité.
(Pour mon expérience, après 4 ans et grosso-modo une soixantaine de sites normalisés je me considère enfin opérationnel et j'en apprends encore tous les jours)
Le site de la mairie de Prémilhat va devoir se conformer aux dispositions du WCAG, malgrès tes efforts évidents, il ne passerait pas le niveau minimum de validation, d'un point de vue technique, et présente un profil ergonomique qu'une expertise qualifierait de "mauvais" compte tenu des quelques impasses relevées ci-dessus ou "tout juste utilisable" pour faire dans le langage diplomatique
Si tu compte fournir des services de ce genre à tes clients, il va te falloir une solide formation et pas mal de temps avant de pouvoir publier sur ton site que tu produis des sites accessibles.
a écrit :
codesign réalise des sites Internet qui répondent dores et déjà à ces impératifs.
Tu ne peux pas laisser, en toute honnêteté intellectuelle, cette affirmation sur ton site corporate, tu te trompes et tu trompes tes donneurs d'ordres.
Ce que tu produis, ne le prends surtout pas mal, ce sont surtout des sites partiellement accessibles et partiellement inutilisables par les publics visés par l'obligation légale.
Prends du temps, parcours les sujets du forum accessibilité ici qui est une ressource d'une rare qualité, tu trouveras nottamment des réponses pertinentes à tous les problèmes listés ci-dessus.
Va faire un tour (long, très long) sur
Opquast dont l'approche qualité est l'objectif à atteindre.
Intègre le fait qu'il va te falloir plannifier une formation qualifiante et en attendant, en tout cas pour des sites comme celui-ci, tu à un besoin évident d'une expertise extérieure de professionnels confirmés.
Jean-pierre
PS : aller une dernière pour la route : Ils sont passés où les titres des pages (<title>) tellement indispensables qu'ils sont obligatoires ?
Modifié par jpv (22 Sep 2005 - 05:18)
je vais prendre toutes tes remarques en compte, c'est évident, et je vais quand même préciser un peu ma démarche et mon historique...
), et je compte bien passer cette année à l'étude et l'approfondissement de tout ça.
ok, c'est du 800 et j'ai strictement rien fait concernant l'adaptation aux tailles de polices. Etant donné que je vais revoir un peu tout ça, j'incluerais une nouvelle correction de ce point de vue (alors que sur