Refonte de page d'accueil (bis)

[20cent]

Re-bonjour à tous,

Comme me l'a conseillé Denis sur un autre sujet, je reposte ici mon message afin d'analyser au mieux, en termes d'accessibilité, le fruit de mon travail.

A savoir la refonte de la page d'accueil d'un site professionnel connu.

Je ne diffuse pas directement l'adresse de mon travail car je doute de la légalité de ma démarche () mais j'aimerais un maximum de retours sur le code afin de corriger mes erreurs au mieux et améliorer ma technique. Merci donc de mon contacter par message privé si vous désirez en savoir plus.

Merci mille fois d'avance aux courageux qui feront cette démarche.

Et pardon d'avance pour les erreurs de débutant que j'ai pus commettre. 

EDIT : J'oubliais de préciser qu'il reste encore quelques tableaux utilisés à des fins de présentation. J'y vais petit à petit...

PS : Désolé pour cette façon de faire peu orthodoxe.

[Dan]

20cent,

Tu n'as pas à craindre de poster un lien vers ton site , le Hub n'a pas peur des soit-disant "fuites de Pagerank"...

Ce sera plus facile pour tout le monde et ne sera certainement pas assimilé à de la "pub sauvage" comme tu es un contributeur régulier aux forums

Dan

[Clair de Lune]

bonjour 20cent

j'avais lu ton autre post et tu l'as modifié, on ne voit plus le lien

ceci dit j'ai mon historique, mais je vais confondre avec le vrai site tant la ressemblance était habilement réalisée, chapeau, monique avait raison, c'est le jeu des 7 erreurs

je me souviens par contre d'une grande table au milieu, mais c'était peut être tout à fait accessible, alors comme dit le patron, tu devrais pouvoir poster une fois l'adresse

et effectivement, si tu as envie de le faire, ben ça donne envie de t'aider, sinon personne ne serait ici

[Clair de Lune]

(MP publié sur proposition de 20cent, je suppose que la discussion peut commencer sur l'histoire des tableaux)

comme tu postes dans le forum accessibilité, je ne parlerai que de ça, j'ai déjà dit tout le bien que je pensais de ta page, j'espère que ton patron va dire oui...

j'ai ouvert ta page avec lynx, c'est tout à fait lisible, bien qu'un peu long mais c'est normal avec une page aussi remplie, et les tableaux ne me semblent pas gêner, mais je suis allé vite et n'ai pas comparé en détail les deux pages

j'ai d'ailleurs seulement regardé les tableaux pour l'instant, mais je peux te donner des pistes

tu laisses à chaque fois le table summary vide, je crois que certains utilisateurs en ont besoin pour savoir s'il faut se taper les pages du tableau ou non

un tableau devrait avoir des thead tbody tfoot ainsi qu'une identification sans équivoque des en têtes de colonnes, même si celle-ci n'apparaît pas (balise vide mais identifiée ?), je crois là aussi que c'est utile à certains

le meilleur tuto est la fiche technique de acces-pour-tous.net sur les tableaux

sinon bravo pour le code qui est nickel, sauf si tu veux des reproches je dirais qu'en virant les ******* de ta feuille de style, ben tu gagnes à l'aise 1 ko

[Denis]

Évidemment, comme fallait s'y attendre, le site passe très bien le test d'une validation, autant en section 508 qu'en regard au WCAG (du moins la portion vérifiable de manière automatisée). C'est à partir de là que le vrai plaisir commence.

Tu as des accesskeys mis en place, qui, bien que de plus en plus controversées, demeurent une pratique encouragée par le W3C et le WAI. En parcourant ta page par tabs, je me rend cependant compte qu'elle bloque sur ke 17ième tab, le lien vers la page (pop-up, méchant garçon -- au moins tu l'annnonce dans le title, mais comme ce n'est pas bullet proof...) "inscrivez-vous". Pour remédier à cela, tu aurais intérêt à mettre en place un ordre de tabulation logique par tabindex selon l'ordre que tu souhaites donner à la progression dans ta page (tabindex="1", tabindex="2", tabindex="3", etc.).

Pour poursuivre avec ta pop up, comme tu la lances sans javascript lorsqu'il est désactivé, pourquoi ne pas faire ça tout le temps ?

Tout à l'air de fonctionner quand même lorsque je désactive Javascript, c'est bien. Dans le cas ou il y en aura probablement dans le vrai site, faudrait penser à s'assurer que le dit javascript n'est ni propriétaire ni obstructif (c'est-à-dire qu'il est conforme au DOM W3 et qu'il n'est pas indispensable pour utiliser les fonctionnalités primordiales du site, comme la navigation).

Ta mention "cette page s'affiche mieux dans un navigateur conforme aux standards" est très intéressante parce que affichée seulement lorsque la feuille de style n'entre pas en jeu. Cependant, elle devrait pointer vers une page explicative, qui démontrerait comment et surtout, pourquoi.

À mon sens, ta navigation rapide n'est peut-être pas assez explicite dans ses libellés. Comme les synthétiseurs vocaux comme Jaws ne sont pas configurés par défaut pour lire les title, l'information qui y est laissée n'est peut-être pas complètement transparente et significative. Je te laisse juge à ce niveau.

Sinon, comme l'a très justement fait remarquer Clair de lune, tes tableaux HTML devraient au moins contenir un summary et un tbody. Pour ce qui est d'un thead et d'un tfoot, compte tenu que ton tableau ne sert pas de données tabulaires, mais sert plutôt à la mise en plage, je ne crois pas que tu devrais les utiliser (dans quel dessein de toute façon ?

N'oublie pas non plus que maintenant que le tout est fonctionnel d'un point de vue d'accessibilité, une petite politique à cet effet serait la bienvenue (ne serait-ce que pour tes utilisateurs qui auraient besoin d'apprendre en quoi les pages sont plus accessibles).. De même, comme bonne pratique et parce que j'apréhende que le site est imposant, une carte du site ferait le plus grand bien.

Les changements de langue naturelle. Il arrivera souvent que dans vos pages, vous ayez à passer du français à l'anglais, en fonction des produits présentés. Ce serait important que ce changement de langue soit annoncé aux synthétiseurs vocaux qui pourront alors passer dans la bonne langue pour les lire (parce que déjà que la voix française de Jaws est difficile à saisir par moment, quand elle essaie de rendre des mots en anglais ça devient rapidement incompréhensible.

Finalement, les plus puristes d'entre nous te diront que le clignotement c'est mal, parce que ça pourrait causer des crises d'épilepsie chez certains utilisateurs. Seulement voilà, ta petite bannière de Marcopoly en haut de page n'est pas si aggressante non plus. .

Pour une première ronde, ça fait déjà pas mal.

[Gribouille26]

Merci de ne pas faire plusieurs post sur le meme sujet!

On arrive plus a suivre....

[Denis]

Ben en fait, la seule raison pour laquelle il y a deux posts, c'est qu'un traite de HTML et de sémantisation alors que l'autre (celui-ci), traite d'accessibilité. C'est justement pour concentrer le ratio de pertinence de l'information que nous avons entrepris de les séparer en relançant un deuxième thread.

[20cent]

Je me permets de répondre point par point, c'est plus facile :

• L'usage des balises summary et tbody :
  Est-ce nécessaire lorsqu'il s'agit de tableaux destinés à la présentation ? Que mettre dans ce cas ?
  
  
  
• Les scrîpts de ma feuille de style :
  Où ça ?
  
  
  
• Les popups :
  C'était ma volonté de copier la page initiale au mieux. Et je considère qu'il s'agit d'une demande du client/employeur.
  Peut-on supposer qu'il est suffisant d'annoncer l'ouverture des popups dans l'attribut title ou non ?
  Je pourrais prévoir un petit pictogramme à la place, mais je m'éloignerais de la page initiale et cela ne fonctionnerait qu'avec support de la feuille de style.
  
  
  
• L'usage de la balise tabindex :
  En l'état actuel, l'ordre des liens me convient tout à fait. Malheureusement comme tu l'as remarqué Denis, cela pose problème au niveau des popups.
  J'ai en effet fait usage de l'attribut onkeypress sur certains liens (en ajout à l'attribut onclick) comme me le recommandais Bobby.
  Je ne vois pas comment résoudre ce problème pour l'instant.
  
  
  
• Le javascript :
  Il n'est pas obstructif, j'y ai fait attention.
  Cependant que signifie non propriétaire ? Comment le vérifier ?
  
  
  
• La politique de conformité et d'accessibilité :
  La page n'est effectivement pas réalisée, mais je suis conscient de son importance et je ne l'oublierai pas sur des projets plus concrets.
  
  
  
• La navigation rapide :
  Effectivement, c'est un site que je connais bien et du coup, mes libellés peuvent ne pas être assez explicites, je vais tenter de retravailler ça.
  
  
  
• Le bandeau pub :
  Encore une volonté du client/employeur !
  J'espère bien ne causer aucune crise d'épilepsie !
  

Un grand merci à vous deux pour vos réponses argumentées en tout cas !

Je suis content d'avoir des retours si positifs. Bien que tout ne soit pas parfait bien sûr.

[Clair de Lune]

Est-ce nécessaire lorsqu'il s'agit de tableaux destinés à la présentation ? Que mettre dans ce cas ?

c'est nécessaire pour le summary, qui de toute façon ne sera pas affiché par le navigateur graphique, tu peux par exemple mettre : tableau contenant les rubriques...

celui qui n'est pas intéressé par ces rubriques saute le tableau

il faudrait vérifier avec quelqu'un de plus calé, mais je crois que thead tbody et tfoot serviraient, par exemple avec lynx, pour voir plus précisément le début et le bas du tableau, quand les bordures et séparations graphiques ne sont pas là

en tout cas, sur lynx il est difficile de savoir ce qui fait partie de quel bloc sur la page, d'autant que les pages ne sont pas hautes, qu'il n'y a pas de scroll, alors un tableau + grand que la page n'a plus ses en têtes de colonnes sur la page suivante, et on ne sait plus où l'on est, euh...moi en tout cas

mais quelqu'un qui s'en sert tous les jours n'aura probablement aucune difficulté, comme je l'ai dit tout le contenu est accessible

[Denis]

[*]Les scrîpts de ma feuille de style :

Où ça ?

J'ai dis ça moi ? Où ça ?

[*]Les popups :

Peut-on supposer qu'il est suffisant d'annoncer l'ouverture des popups dans l'attribut title ou non ? Je pourrais prévoir un petit pictogramme à la place, mais je m'éloignerais de la page initiale et cela ne fonctionnerait qu'avec support de la feuille de style.

Peut-on suposer que c'est suffisant ? Ça dépends à qui tu le demandes. Je crois que non. D'autres diraient que oui. Si tu es pour le faire, je pense que c'est mieux de le faire ne image, dans la page (l'image a une valeur et mériterait un alt). L'inscrire dans ta CSS ne servirait pas à grand chose. Tant qu'à faire, tu serais mieux de l'écrire textuellement.

[*]L'usage de la balise tabindex :

Malheureusement cela pose problème au niveau des popups. J'ai en effet fait usage de l'attribut onkeypress sur certains liens (en ajout à l'attribut onclick) comme me le recommandais Bobby. Je ne vois pas comment résoudre ce problème pour l'instant.

Je ne suis pas trop sûr non plus... Si tu indiquais par tabindex le même ordre qui se construit naturellement tu passerais probablement par-dessus le lien pour la pop up.

[*]Le javascript :

Cependant que signifie non propriétaire ? Comment le vérifier ?

Si ton javascript répond à la syntaxe propre à Microsoft (jscript) ou Netscape (javascript) par exemple, il est propriétaire en ce sens qu'il ne fonctionnerait pas pour les autres agents utilisateurs. Un bon exemple de cela, c'est le DOM de Microsoft Internet Explorer 4 qui parle aux objets par la syntaxe document.all alors que le DOM de Netscape 4 passe par la syntaxe document.layers... tu as donc besoin d'utiliser lesdeux pour que ca marche dans les deux navigateurs. C'est donc propriétaire. Si ton javascipt repose sur le DOM W3C, la syntaxe sera plutôt document.getElementById et sera issue de l'ECMAscript, la version standardisée de Javascript.

[20cent]

C'est nécessaire pour le summary. [...] Je crois que thead tbody et tfoot serviraient.

Je vais faire des tests dans ce sens, ça marche !

J'ai dis ça moi ? Où ça ?

Ce n'est pas toi qui l'a dit, mais Clair de Lune.

Tant qu'à faire, tu serais mieux de l'écrire textuellement.

Tu as raison, j'en tiendrais compte maintenant.

Si tu indiquais par tabindex le même ordre qui se construit naturellement tu passerais probablement par-dessus le lien pour la pop up.

Je ne comprends pas pourquoi là par contre.

Si ton javascript repose sur le DOM W3C, la syntaxe sera plutôt document.getElementById et sera issue de l'ECMAscript, la version standardisée de Javascript.

Je vais relire en détails l'article OpenWeb sur le sujet dans ce cas.

Merci encore une fois ! Grâce à vos remarques, j'améliore encore un peu mon code et je prends de bonnes habitudes pour la suite.

Sacré coup de main que vous m'avez rendu là.

[Denis]

20cent, je crois que nous disposons des mêmes banques de smileys ! Je trouve le boxeur particulièrement excellent, j'ai toujours aimé l'utiliser. Personnellement, dans le cadre du Hub, j'ai bien hâte d'avoir à modérer un truc pour utiliser mon policier qui ramène à l'ordre !

Pour ce qui a trait au tabindex, je ne fait que théoriser, je ne sais pas si ça peut fonctionner. Ce que je dis, c'est simplement que si tu apposes un tabindex à tous tes items, tu pourrais probablement forcer le passage par-dessus le changement de focus occasionné par ton lien sur la pop up. Peut-être qu'il y a moyen bluffer l'agent utilisateur d'une certaine menière en lui faiant perdre son focus, ou simplement recoder l'appel de la pop up autrement. J'avoue que je serais un peu confus aussi à ce niveau.

[20cent]

Effectivement, ce n'est pas évident !

Et la solution que tu me proposes devrait me permettre de contourner le problème simplement. Cependant, la fonction tabindex n'est pas destinée à cet usage et j'hésite encore à l'utiliser dans ce sens.

Et j'avoue que j'aime beaucoup le boxeur moi aussi !

[Denis]

Cependant, la fonction tabindex n'est pas destinée à cet usage et j'hésite encore à l'utiliser dans ce sens.

En quoi tabindex ne serait pas désigner pour ce boulot ? Il sert à mettre un ordre de priorité dans la navigation par tabulation, à forcer la progression par tabs... n'est-ce pas de ce quoi nous parlons ?