Archive for the ‘forms’ Category

Truc d’accessibilité #2 – l’ordre de tabulation

6 août 2007

L’ordre de tabulation défini l’ordre apriori logique pour naviguer de lien en lien ou de champs en champs dans les formulaires HTML. On passe d’un champ à l’autre en appuyant sur la touche … TAB (on l’aura deviné).

Verifier que cet ordre est logique, grouper l’information lorsque c’est naturel et approprié afin d’éviter les erreurs d’encodage. Spécifier si nécessaire l’ordre de tabulation au sein des éléments avec l’attribut « tabindex« .

exemple: <input id= »prenom » tabindex= »1″ type= »text » />

Bouton ou lien d’action ?

21 mai 2007

Un nouvel article de Jakob Nielsen sur les hyperliens et les boutons qui ont des usages à l’origine bien differents:

– Les hyperliens sont utilisés pour la navigation, pour passer d’une page à un autre dans un même espace d’information.
– Les boutons sont utilisés pour des actions qui génèrent des modifications (par ex. ajouter un produit à un panier d’achat).

Il y a bien evidemment des exceptions à ces règles:

– Les boutons peuvent être utilisés pour passer d’une page à l’autre dans un processus de workflow (par ex. « continuer le shopping » ou « commander »)
– Les hyperliens peuvent être utilisés pour des actions secondaires (par ex. « Cancel »)
L’ainsi nommé « lien d’action » a le benefice de pouvoir être ecrit de manière plus longue et donc de manière plus claire pour l’utilisateur. Pour réduire la confusion, le lien doit explicitement montrer qu’il est lié à une action en commencant par un verbe à l’imperatif (par ex. « Add an item »)

Un autre avantage du lien d’action est que l’on peut ajouter un texte explicatif juste en dessous du lien. Le texte peut être présenter dans une police de caratère plus petite pour en souligner la nature secondaire. pour lire l’article en entier et en anglais.

Truc CSS #8 – standardisez vos formulaires

26 mars 2007

Il n’y a rien de plus difficile à mettre en page qu’un formulaire. Les objectifs sont en effet multiples et souvent contradictoires: attractif, fonctionnel, utilisable, robuste … (rangez dans l’ordre de priorité de votre projet). Pour vous aidez dans cette quête, le succès passe par le bon usage d’HTML bien formé, des CSS et du Javascript qui doit rester d’un usage optionnel sur vos formulaires.

Un excellent exemple d’implémentation de ces principes nous est présenté sur Uni-Form, savant mélange d’HTML bien formé, de CSS et de Javascript. Vous pouvez même en telecharger le code.