Archive for the ‘html’ Category

Truc Accessibilité #3 – se séparer de la souris

7 août 2007

Afin de rendre vos pages accessibles aux non-voyants ainsi qu’à tous ceux qui ne peuvent utiliser une souris, n’oubliez pas de verifier que:

  • Chaque élément qui utilise un attribut de type onmouseover doit être surchargé d’un attribut onfocus, et leur evenement associé doit déclencher une action similaire.
  • Chaque élément qui utilise un attribut de type onmouseout doit être surchargé d’un attribut onblur, et leur evenement associé doit déclencher une action similaire.

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 » />

Pour nos amies codeuses

1 juin 2007

Vous avez une copine qui code ? Voici une idée cadeau pour elle.

Je me demande si c’est aussi valable pour les blondes … LOL

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.

Il ne faut jamais AU GRAND JAMAIS …

15 mai 2007

.. utiliser les ROWSPAN des vos tableaux HTML !

Cela n’engage que moi bien evidemment 😉

Truc CSS #9 – réaliser de bô tableaux

27 mars 2007

J’avoue, je ne me suis pas foulé pour le titre mais le contenu en vaux la peine, jugez plutôt:

Si le même principe que le faaaameux Zen Garden, je vous propose aujourd’hui d’aller piquer du code sur le site CSS Table Gallery qui nous propose une gallerie de styles CSS divers et variés de mise en page ce qui releve toujours une gageure, j’ai nommé les tableaux. Je vous ai mis l’adresse sur un style qui me plait, ca vous dit quelque chose 😉

Trier et filtrer ses tableaux HTML

27 mars 2007

Pour eviter de longues et infructueuses recherches sur le web, je vous recommande une librairie Javascript simple et efficace présentée sur javascripttoolbox pour integrer dans les tableaux HTML des fonctionnalités de tri et de filtrage. La librairie Yahoo (YUI) ne propose en effet pas encore de solution satisfaisante avec son composant TableData qui viens juste de sortir en version beta.

La rapidité est impressionnante, même avec de long tableaux. De plus, cette librairie javascript combinée avec une CSS gère efficacement les couleurs alternées sur les lignes.

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.

Comment faire des interfaces à onglets VFBF

16 mars 2007

Control.Tabs est une librairie javascript permettant de créer facilement des interfaces à onglets (tab)  dans vos pages.

Simple et rapide à implementer si vous n’utilisez pas la librairie Yahoo qui en propose une autre version.

Note: VFBF = vite fait, bien fait 😉

Une indigestion de references

13 mars 2007

Pour ceux qui n’ont pas peur d’une indigestion, allez visiter le Web Design Reference Site de l’Université du Minnesota. On y trouve tout ce qui se réfère au web design et en grande quantité.

Perso, c’est le genre de reference que je met dans mes signets mais que je ne vais jamais consulter, il y en a trop !