pageessai

Cellule 1Cellule 1Cellule 1Cellule 1Cellule 1Cellule 1Cellule 1Cellule 1 Cellule 1
Cellule 2Cellule 2Cellule 2Cellule 2Cellule 2Cellule 2Cellule 2 Cellule 2Cellule 2
Cellule 3 Cellule 5

Légende du tableau
Colonne 1 Colonne 2
Cellule 1 Cellule 2
Cellule 3 Cellule 4

Est-il possible d'écrire a coté de chaque colonne

Légende du tableau
Colonne 1 alignée à droite Colonne 2 centrée
Cellule 1 alignée à gauche et en haut Cellule 2 centrée et en bas
Cellule 3 basée sur la ligne Cellule 4 basée sur la ligne

Cellule 1 2 cellules fusionnées (sur la même ligne)
Cellule 2 Cellule 3 2 cellules fusionnées (sur la même colonne)
Cellule 4 Cellule 5
Cellule 1 Cellule 2 Cellule 3
Cellule 4 Cellule 5 Cellule 6
Cellule 7 Cellule 8 Cellule 9
Ligne 1 Cellule 1 Cellule 2
Ligne 2 Cellule 3 Cellule 4

Ce positionnement ne permettra pas à l'utilisateur

ENGLISH VERSION

- Méthode d'implémentation générale.

Ces liens fonctionnent avec deux éléments : le lien lui-même et une ancre qui en constitue la cible.

Du point de vue de la spécification HTML, la cible peut être n'importe quel élément doté d'un identifiant (attribut id ou name)

Il est préférable et plus robuste, notamment pour IE, d'implémenter l'ancre au moyen d'un "lien réel" (balise a) sur le modèle :

A noter que l'ancre cible n'aurait pas besoin, en théorie, de référence href, mais qu'il s'agit là d'un moyen pratique de corriger un défaut d'IE : en effet, la prise de focus d'une ancre avec la souris désynchronise la tabulation sous IE lorsque l'ancre cible est dépourvue de référence href. Autrement dit, si vous cliquez sur "aller au contenu", vous obtenez bien le focus sur l'ancre cible, mais si vous tabulez à la suite, la tabulation ne suit pas et reste là où vous en étiez auparavant.

Une autre manière de résoudre ce problème pour IE est de conférer, au moyen de CSS, un état "layout" à l'ancre cible. Notez, cependant, que cette solution, aussi élégante soit-elle, posera un problème, sur IE, lorsque CSS sera désactivé.

Je ne m'étendrais pas sur ce sujet et je vous recommande plutôt d'implémenter vos ancres cibles sous forme d'un lien "" avec un href, un id et un name. A la vérité cela va créer une gêne pour les lecteurs d’écrans qui vont restituer ces liens, à la différence d’une ancre sans href. Mais, comme vous pourrez le constater, l’essentiel du propos étant d’en limiter l’usage à ce qui est vraiment utile, la gêne occasionnée peut être considérée comme "acceptable".

Ce sera à vous de choisir la bonne méthode en fonction de votre page et du nombre d'ancres nécessaires.

Enfin, le positionnement de l'ancre cible doit permettre de recueillir toutes les informations nécessaires, notamment de titre, permettant d'identifier clairement la section ou l'élément atteint.Il est préférable et plus robuste, notamment pour IE, d'implémenter l'ancre au moyen d'un "lien réel" (balise a) sur le modèle :

A noter que l'ancre cible n'aurait pas besoin, en théorie, de référence href, mais qu'il s'agit là d'un moyen pratique de corriger un défaut d'IE : en effet, la prise de focus d'une ancre avec la souris désynchronise la tabulation sous IE lorsque l'ancre cible est dépourvue de référence href. Autrement dit, si vous cliquez sur "aller au contenu", vous obtenez bien le focus sur l'ancre cible, mais si vous tabulez à la suite, la tabulation ne suit pas et reste là où vous en étiez auparavant.

Une autre manière de résoudre ce problème pour IE est de conférer, au moyen de CSS, un état "layout" à l'ancre cible. Notez, cependant, que cette solution, aussi élégante soit-elle, posera un problème, sur IE, lorsque CSS sera désactivé.

Je ne m'étendrais pas sur ce sujet et je vous recommande plutôt d'implémenter vos ancres cibles sous forme d'un lien "" avec un href, un id et un name. A la vérité cela va créer une gêne pour les lecteurs d’écrans qui vont restituer ces liens, à la différence d’une ancre sans href. Mais, comme vous pourrez le constater, l’essentiel du propos étant d’en limiter l’usage à ce qui est vraiment utile, la gêne occasionnée peut être considérée comme "acceptable".

Ce sera à vous de choisir la bonne méthode en fonction de votre page et du nombre d'ancres nécessaires.

Enfin, le positionnement de l'ancre cible doit permettre de recueillir toutes les informations nécessaires, notamment de titre, permettant d'identifier clairement la section ou l'élément atteint.

English

Une erreur commune consiste à implémenter la cible après un élément de titre :

, par exemple de lecteur d'écran, de relier explicitement la cible au titre de la section, ce qui peut créer une ambiguïté.5- Les trois types de liens d'aide à la navigation dans la page et comment les utiliser.5.1- Les liens d'évitement :

Comme nous l'avons vu, il s'agit de liens permettant de passer un groupe de liens ou, par généralisation, de passer d'une section à une autre.

Ils s'implémentent dans le corps même de la structure, comme premier lien disponible de la section qu'ils permettent de sauter, comme dans l'exemple de la page du W3C que je résume ci-dessous :

Vous devrez respecter une uniformité dans la manière de présenter ces liens, ce sera soit "passer la section x ou y" soit "passer à la section x ou y" mais jamais un mélange des deux formules !

De même l'implémentation d'un lien d'évitement "générique" par exemple "passez à la section suivante" est fortement déconseillée : ces liens ne seront pas explicites et donc difficiles d'utilisation, notamment pour les utilisateurs de lecteurs d'écran.

LE MAISONNIER WELCOME YOU

There is many subjects or services you can fine on these page

Enfin, inutile d'implémenter des raccourcis clavier sur ces liens car ils vont être utilisés au fil de l'eau.

Attention cependant à la maintenance nécessaire pour les liens d'évitement : n'oubliez pas qu'il s'agit de liens contextuels, susceptibles de changer d'intitulé et de cible en fonction de chaque page, notamment en cas de modification du contenu. De fait, ils peuvent finir par poser un problème similaire à la maintenance des attributs tabindex, ce qui nécessite un "suivi" de leur implémentation.5.2- Les liens d'accès rapide :

Ce sont les rois des liens d'aide à la navigation dans la page; leur usage commence à rentrer dans les moeurs et c'est une excellente chose.

Ils doivent se plier à un certain nombre de règles :

- Vous devez en limiter le nombre et l'usage : Il ne s'agit surtout pas de construire un sommaire de la page (nous reviendrons plus bas sur les relations entre ces deux mécanismes). Généralement, en fonction de la structure du haut de la page, une paire de liens d'accès rapide comme "aller au contenu" et "aller au menu" suffit pour qu'ils remplissent parfaitement leur office. Contentez-vous de pointer sur l'essentiel, posez-vous la question de savoir s'il est vraiment utile d'implémenter un lien "aller à la recherche" si votre formulaire de recherche ne se trouve qu'à 3 ou 4 tabulations de là.

Finalement, vous allez implémenter quelque chose du genre :

4 ou 5 liens est la limite au delà de laquelle il faut s'alerter sur le bien fondé de la construction de cette liste. Cela ne signifie pas qu’il ne faut jamais dépasser 5 liens d’accès rapide mais qu’il faut simplement avoir une bonne raison de le faire…

Vous pouvez, en revanche, compléter ponctuellement cette liste s'il est nécessaire de pointer une région particulière de la page, par exemple, une vidéo embarquée ou un formulaire de saisie.

Certains considèrent que le doublement des liens "menu" et "contenu" est redondant et que la simple utilisation d'un lien d'évitement "passer le menu" suffit. C'est un peu vrai et un peu faux, en particulier dans le cas où ces liens sont équipés de raccourcis clavier, ce qui est toujours une bonne idée, même si on connait les limitations de l'utilisation de accesskey.

- Laissez-les toujours à la même place dans vos pages. Il n'y a qu'une seule place intelligente : en haut du code, avant ou après le titre principal de la page, peu importe.

- Ne les cachez pas ! Si il y a une chose à retenir de ces liens, c'est bien celle-ci : de grâce, laissez-les visibles. Il n'y a rien de pire que des liens d'accès rapide cachés par CSS, quelle qu'en soit la méthode, pour trois raisons importantes au moins :

* Les utilisateurs de lecteurs d'écran ont leurs propres fonctionnalités qui permettent de naviguer de titre en titre ou de section en section. Le gain des liens d'accès rapide pour cette catégorie d'utilisateurs est donc peu évident. * Des liens d'accès rapide cachés par CSS provoquent une grave rupture de navigation dans la page pour les utilisateurs de la navigation clavier. En effet, bien que cachés, ces liens continuent à réagir au focus de la tabulation, ce qui est particulièrement gênant. * Enfin, ils sont généralement la seule véritable aide que l'on peut implémenter pour ces utilisateurs.

5.3- Les liens de navigation interne :

Cela ne concerne, en général, que le lien "retour en haut de page".

Il est également implémenté dans le code de la page, à intervalles réguliers, et permet simplement de revenir en haut de page, plus précisément au premier contenu de la page.

Vous trouverez beaucoup d'implémentations de ce lien qui se contentent d'utiliser l'élément body comme cible :

retour en haut de page

Ne faites jamais ça ! Pour les raisons expliquées plus haut (2. méthode générales d'implémentation), cela rendra inopérant son utilisation pour la navigation clavier sous IE. Utilisez comme cible un vrai lien ; par exemple, juste avant les liens d'accès rapide, de cette manière, vous serez certain que le retour en haut de page sera synchronisé avec la tabulation.

Implémentez ces liens de retour en haut de page à bon escient de manière régulière et toujours à la même place. Accessiweb recommande d'en utiliser dés lors que la page fait plus de trois écrans en résolution 1024.

D'autres liens de navigation interne peuvent être utilisés : dans le cas de listes de liens particulièrement longues, il peut être intéressant d'avoir régulièrement des liens " retour au début de la liste …". Ces liens s'apparentent fortement aux liens d'évitement même si, en l'occurrence, il ne s'agit pas d'éviter mais de "revenir". Il faut en limiter l'usage au strict nécessaire pour ne pas surcharger la page.6- La question épineuse de l'intégration graphique

Généralement, les designers ou les clients détestent ces liens vécus comme une insupportable contrainte en terme de design.

Il n'y a pas de réponse toute faite; deux compromis s'offrent à vous :6.1- Liens semi-visibles :

Cette technique est à réserver exclusivement aux seuls liens d'accès rapide; ne l'employez surtout pas pour les liens d'évitement et de navigation interne car elle aura un effet très perturbant.

La technique est simple à comprendre : il s'agit de cacher les liens et les faire apparaître au survol, au moyen de CSS.

Vous pouvez les cacher en leur attribuant une couleur de police identique à celle de la couleur de fond ou en les rejetant en dehors de la zone d'affichage avec une technique comme celle de Paul Bohman.

Le plus important est de ne surtout pas oublier de traiter, pour les faire réapparaîtrent, les deux événements : hover (souris) et focus (tabulation) :

a.aide:hover, a.aide:focus{ color:#000; }

Certains, comme Mike Cherim (accessites.org) poussent la logique jusqu'à habiller ces liens et la méthode d'apparition.

Ce compromis, s'il est satisfaisant du point de vue de l'intégration graphique, pose néanmoins un problème : on ne sait pas que les liens existent au chargement de la page et leur apparition/disparition peut être perturbante. Quoi qu’il en soit, si c’est la seule solution à votre portée, utilisez là sans état d’âme, toute considération de confort mis à part, l’essentiel sera préservé.6.2- Liens iconographiques :

Vous pouvez également décider de les intégrer dans le graphisme en employant des images iconographiques.

retour en haut de page

Cette technique est très élégante et valorisante pour les designers, bien acceptée par les clients; elle fonctionne très bien pour les utilisateurs de lecteurs d'écran. Oui.. mais... elle pose un redoutable problème, comme d'habitude, si j'ose dire, pour les utilisateurs de la tabulation clavier : malheureusement, l'affichage du title d'un lien ne réagit que sur l'événement "hover", ce qui signifie qu'un utilisateur de la navigation clavier ne verra pas s'afficher le title et ignorera la fonction du lien.

Vous n'avez pas beaucoup de solutions à votre disposition :

- Vous trouvez des icones suffisamment explicites : Une petite maison ou une flèche vers le haut est généralement bien compris pour le lien "retour en haut de page". De même, une "flèche droite" pourrait être envisagée pour les liens d'évitement. En revanche, pour les liens aller au "menu/contenu", il serait fort étonnant que vous trouviez une iconographie universellement reconnue.

- Vous implémentez une méthode pour informer visuellement l’utilisateur de la fonction du lien. Je vous en propose deux :1. La méthode javascript consiste à reprendre le contenu de l’attribut title du lien et l’insérer dans un élément créé dynamiquement.

Les méthodes de l’objet node nous fournissent le moyen de le faire proprement : pour javascript il faut deux fonctions que vous pouvez implémenter dans le head de la page.

pageessai