15 avril 2008
CSS : Vérifier l'accessibilité de votre site pour les déficients visuels : 1re approche
Une personne ayant un handicap visuel peut accéder à internet via différents outils permettant de pallier à son handicap. Lorsque vous concevez un site, ayez toujours à l'esprit dans l'écriture du code que ce type d'internaute "voit" votre site avec les yeux d'un "spider" (tel googlebot).
Pour débuter je vous propose de lire cet article de l'INJA, "L'ergonomie des interfaces à l'usage des publics déficients visuels" : http://www.inja.fr/inja/htmgen/SimHTMLGen.asp?STYLE=2&URL=%2Fpages-infos%2Fpages%2Finformations_generales%2Factualites%2Farchives%2F2003%2Fdefi_informatique%2F12ernu.xhtml
Il vous faut donc vous assurer en premier lieu d'une compatibilité maximum avec les standards du W3C. Et surtout, veillez respecter à la lettre la valeur "sémantique" et hierarchique des balises ! Ensuite, il vous faudra vous assurez que les couleurs utilisées présentent un contraste suffisant pour être correctement distinguées par un déficient visuel. Enfin sachez que les déficient visuels n'ont souvent pas de souris à leur disposition, oubliez donc l'utilisation d'événements javascript impliquant la souris (onMouseOut, etc.)
D'autre recommandations peuvent être utiles, tels que :
- ne jamais utiliser de taille de police fixe (en px par exemple)
- mettre en place des accesskey dans les formulaires, etc.
Si vous souhaitez établir un diagnostic de l'accessibilité de votre site pour les personnes ayant un handicap visuel, voici une liste d'outils permettant de travailler dans ce sens. Ne sont mentionnés ci-dessous que les outils disponibles en ligne (il en existe d'autres à télécharger gratuitement ou pas).
- Service Ocawa :
Il semble le plus connu des site de test d'accessibilité en langue française. Attention toutefois : le nombre d'audits par mois est limité...
http://www.ocawa.com
- Le validateur d'accessibilité de l'APINC (Association pour un internet non commercial) :
http://validateur-accessibilite.apinc.org/
- Enfin pour finir, les extensions de Firefox :
Web Developpeur Toolbar : https://addons.mozilla.org/fr/firefox/addon/60
Firefox Accessibility Extension : http://firefox.cita.uiuc.edu/index.php
11 janvier 2008
Créer une zone clicable (lien) sur une image en background (header)
Il y avait autrefois sur site Alsacréations un petit tutoriel permettant de faire une zone réactive sur une image en background. Cette technique est bien pratique car elle permet de rendre le logo cliquable dans un header (entête) de site lorsque l'image est en fond.
Malheureusement ce tutoriel a disparu dans la version française du site (elle subsiste dans la version anglaise !).
Je vous donne donc ici succintement le code nécessaire et vous laisse consulter le tuto en anglais pour ceux qui veulent plus d'explications.
Code HTML :
<div id="image"><a id="zone1" href="#" title="click"></a></div>
Code CSS :
#image { /* div contenant l'image en arrière plan */
width : 500px;
height: 500px;
background: url(image.png) top left no-repeat;
}
#zone1 { /* la zone de lien */
float: left;
width : 150px;
height: 100px;
margin-left: 20px;
margin-top: 30px;
}
05 juin 2007
CSS : personnaliser les boutons de formulaire
Vous souhaitez intégrer de beaux boutons valides XHTML dans vos formulaires. Voici deux articles (en anglais malheureusement) vous permettant de réaliser :
- ceci (importation d'une image dans un bouton) :
- ou cela (attention la version ci-dessous n'est pas compatible MSIE 5 et 6 mais elle a l'avantage de permettre de réaliser un fond qui s'adapte à la taille de la typo - scalable donc !)
Pour consulter les articles vous permettant ces merveilles :
http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors/
http://particletree.com/features/rediscovering-the-button-element/
07 mai 2007
CSS : comment utiliser les CSS dans une newsletter ?
L'utilisation de CSS dans une newsletter est problématique, avant toute chose du fait de la variété des clients mail. Certains clients mail tolèrent plutôt bien l'utilisation de CSS (Outlook) tandis que d'autres ne les acceptent quasiment pas (Lotus Notes dans ses anciennes versions qui sont encore beaucoup en usage dans les entreprises françaises ou bien les webmails en général tels que Hotmail et dans une moindre mesure Caramail).
Pour faire une newsletter respectant les standards, il vous faudra respecter un certain nombre d'impératifs.
- Tout d'abord ne rien mettre dans votre template HTML dans la balise <head> car celle-ci est supprimée par beaucoup de logiciels de mail.
- De la même façon n'utilisez pas la balise <body> pour y déclarer des styles inline car cette balise est souvent renommée <xbody> ou doublonnée d'une 2e balise body par les messageries.
- la meilleure façon de procéder ainsi que l'a montré Mark Wyner (traduction française de son excellent article disponible ici : http://pompage.net/pompe/cssemail/) est de rajouter une balise <div> juste en dessous de la balise <body>.
- ne pas déclarer les classes avec un . en tête de ligne mais préférer une syntaxe du type p.ma_classe {}
27 mars 2007
CSS : des formulaires accessibles, utilisabilité des formulaires
Je ne sais pas pour vous, mais moi j'aime créer de beaux formulaires qui répondent aux exigences des standards du W3C, des formulaires accessibles, tout en fluidité, pour lesquelles la touche Tab fonctionne rationnellement.
Trouver un tutorial sur le sujet ce n'est pas évident, alors voici l'excellent travail de Fred Cavazza :
http://www.fredcavazza.net/doc/tutoriels/formulaire/SVF_intro.htm
Et pour ceux qui doivent réviser les bases des balises de formulaire, ils pourront trouver du grain à moudre ici :
http://www.aidenet.com/css/css65a.htm
