Blog Alsacréations

• juin 2008
• mai 2008
• avril 2008
• mars 2008
• février 2008
• janvier 2008
• décembre 2007
• novembre 2007
• octobre 2007
• septembre 2007
• août 2007
• juillet 2007
• juin 2007
• mai 2007
• avril 2007
• mars 2007
• février 2007
• janvier 2007
• décembre 2006
• novembre 2006
• octobre 2006
• septembre 2006
• août 2006
• juillet 2006
• juin 2006
• mai 2006
• avril 2006
• mars 2006
• février 2006
• janvier 2006
• décembre 2005
• novembre 2005
• octobre 2005
• septembre 2005
• août 2005
• juillet 2005
• juin 2005
• mai 2005
• avril 2005
• mars 2005
• février 2005
• janvier 2005
• décembre 2004
• novembre 2004
• octobre 2004
• septembre 2004
• août 2004
• juillet 2004
• juin 2004
• mai 2004

Le mercredi 13 décembre 2006 à 21:29, par Hum :: #

Merci !

très instructif.

Le mercredi 13 décembre 2006 à 23:27, par giz404 :: site :: #

A garder au chaud histoire

Le jeudi 14 décembre 2006 à 12:32, par cynic- :: site :: #

Comme d'habitude, utile et instructif. Merci !

Le vendredi 15 décembre 2006 à 01:34, par Sun Location :: site :: #

Exelent, franchement, simpa

Le vendredi 15 décembre 2006 à 12:53, par Victor BRITO :: #

Bien intéressant, bien résumé et assez exhaustif. Seule ombre au tableau: le recours à <a href="#" id="contenu"></a> au lieu de <h2 id="contenu">Contenu</h2> (par exemple) alourdit le code. De plus, je ne sais pas si c'est vraiment idéal, au vu des standards, de laisser un élément a vide.

Le samedi 16 décembre 2006 à 02:12, par Best wishes :: site :: #

très interessant je n'avais pas du tout conscience de tout c'est arrière plan

Le dimanche 17 décembre 2006 à 06:26, par jpv :: site :: #

@Victor :

IE pose deux problèmes :

1. Il ne gère pas le focus de la tabulation pour les éléments pourvus d'un id si ces derniers n'ont pas le layout.

La solution de contournement la plus simple consiste à utiliser des ancres <a>

2. Dans ce cas, second problème, si l'ancre cible est dépourvus de href cela désynchronise la gestion simultanée du focus "pointeur" et du focus "tabulation".

La conséquence est que ce scénario d'usage, très répandu, devient inopérant :

Prendre le focus sur un formulaire PUIS utiliser la tabulation pour tabuler les champs du formulaire.

D'où la recommandation d'implémenter un href sur les ancres cibles malgrés, de fait, la création génante de "liens vides", notamment pour l'utilisation de la liste des liens par les lecteurs d'écran.

J'ai privilégié la méthode du href dans cet article parce qu'elle est simple, compréhensible par tous, notamment un néophyte et qu'elle fonctionne pour tous les modes de restitution.

La gêne occasionnée par la présence de liens vides pour la restitution de la liste des liens par un lecteur d'écran peut être contrebalancé par l'utilisation d'un title explicite et la surcharge du href sur le modèle :
<a href="#contenu" name="contenu" title="ancre du contenu"></a>.

Je n'ai pas voulu entrer dans ces détails pour un article de synthèse.

L'utilisation de liens vides est génante, mais constitue un compromis acceptable.

L'article de Jim Tatcher, qui se focalise sur l'analyse de ces problèmes, est un prolongement naturel pour ceux qui voudront aller plus loin.


Jean-Pierre

Le jeudi 21 décembre 2006 à 17:12, par AJP :: #

Bonjour
il y a quelque chose que je ne comprends pas sur ce point :
" Il ne gère pas le focus de la tabulation pour les éléments pourvus d'un id si ces derniers n'ont pas le layout. La solution de contournement la plus simple consiste à utiliser des ancres <a> "

Quel est donc la différence avec Firefox par exemple ? Si j'utilise la tabulation avec ce dernier, le focus ne porte que sur les liens (et sur les éléments avec overflow autre que visible), mais pas du tout sur les éléments avec un ID.
Donc j'obtiens la même chose qu'avec Internet Explorer, non ? J'ai du mal à saisir

Le dimanche 24 décembre 2006 à 04:39, par jpv :: site :: #

"Quel est donc la différence avec Firefox par exemple ?"

En fait tu obtiens bien le focus sur tout élément pourvu d'un identifiant DOM, mais ce n'est pas le problème ici.

Fais cette expérience : Un lien <a href="#contenu">contenu</a> pointe sur une ancre <a id="contenu" name="contenu"></a> (implémente plusieurs autres liens après ces deux là pour bien comprendre).

Partant de cette structure teste ce scénario d'usage qui, je le précise, n'est pas exceptionnel :

1. Je clique avec la souris sur le lien "contenu" PUIS je tabule.

Sur Gecko et consorts tu obtiendras le focus sur l'ancre et tu pourras continuer à tabuler à partir de cette position.

Sur IE tu n'obtiens pas le focus sur l'ancre et donc tu devras tabuler autant de fois que nécessaire pour parvenir jusqu'à l'ancre : Les deux méthodes (focus du pointeur et focus de la tabulation ) sont désynchronisées.

Le moyen d'y remédier, donc de les synchroniser, est de conférer un état layout à l'ancre ou d'y implémenter un href.

N'hésites pas reposter si c'est encore obscur.

Jean-Pierre

Le lundi 25 décembre 2006 à 12:32, par AJP :: #

Merci pour cette réponse,

Ce que me pose problème, c'est la différence quand la cible est du type <div id="contenu">.

J'ai beau essayer et tout se passe pareil avec Firefox et Internet Explorer, testé avec ou sans feuille de style, que ce soit à la souris ou au clavier.

Si je clique sur le lien href="#contenu", j'arrive bien à <div id="contenu">, puis, si je tabule, ça continue bien sur les liens suivants à partir de ce point.

La seule différence que j'ai vu, c'est avec <body id="top"> qui ne marche pas avec IE5.x (mais très bien avec IE6).

D'après mes essais concernant Internet Explorer, seul IE3 nous obligerait à faire des ancres cible avec des liens comme indiqué (d'un intérêt très limité donc !)
Hors d'après l'article, j'ai l'impression qu'il y aurait d'autres raisons, mais je n'arrive à voir lesquelles ?

Le lundi 25 décembre 2006 à 12:40, par AJP :: #

Oups, j'avais du mal faire mes essais.

En restestant sans feuille de style (et donc sans HasLayout puisque non activé par défaut pour DIV), je viens de me rendre compte du problème qui est effectivement assez génant.

Désolé et merci pour l'article intéressant.