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

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

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

Truc d’accessibilité #1 - les accesskey

Afin de faciliter l’accès de vos pages, prenez l’habitude d’ajouter des raccourcis clavier via la commande “accesskey” qui permet l’accès direct à certaines fonctions du système.

De manière générique, implémentez les accesskey suivantes dans toutes vos pages web:

• Accesskey ‘1′: contenu principal
• Accesskey ‘2′: Recherche
• Accesskey ‘3′: barre de navigation principale

A blind person using a screen reader must experience the links one after another, which is rather inconvenient. They’ve got better things to do.
– Joe Clark

Le nouveau Microsoft Surface

Le lancement du nouveau “Microsoft Surface” m’a cloué ! Disons que c’est surtout la presentation qui est impressionnante, elegante, sobre, efficace, … Mais Kesako Microsoft Surface? Il s’agit d’une table dont la surface est une interface utilisateur qui permet une interaction directe avec tous vos media. Tout se manipule via de simple mouvements des doigts sur l’écran tactile. Celui-ci peut même ineragir avec votre Zune dès que vous le posez dessus. Bon, evidemment, il faut un Zune …

Ca me rappelle quelque chose tout ca … Minority Report ?? non, mais oui, je sais, l’ iPhone !! - soyons bon joueur, bravo les artistes !

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

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

Truc CSS #8 - standardisez vos formulaires

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.

Une indigestion de references

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 !