say trop bien !

J’avais arrêté Twitter parce que j’avais trop de boulot, la période étant un peu plus calme, j’ai de nouveau du temps pour faire de la veille. Et voilà que je tombe sur un twitt qui présente cet outils : http://gree.github.com/lwf/ avec cette démo : http://gree.github.com/lwf-demo/html5/basic2/sample3.html.

Ça me rappelle furieusement Flash. Avant de troller, je n’ai rien contre Flash et il y a des cas dans lesquels il est parfait. Par contre ce qui m’ennuie c’est qu’il faut être un minimum au courant pour comprendre quelle techno. on utilise et pourquoi. Je vois très bien venir des cas d’utilisation comme cette démo de particules avec une particule contenant du texte. Je ne suis pas un extrémiste de l’accessibilité mais quand même à ce point là, trop c’est trop. Que voit votre revue d’écran préférée ? QUE DALLE ! Ou encore cette magnifique page – je sais pas si on appeler un site ou une application – pour découvrir les opportunités chez Google. Du beau lourd, mais alors pareil niveau accessibilité, on est bien loin du compte, et pourtant ce sont des pros qui ont réalisé ce projet, et je dirais même plus, des pros du référencement (sic) !

Alors même si les gains de Canvas sont énormes à savoir, utiliser des technos standardisées et sans plug-in j’ai des doutes quand à leur utilisation saines par tous les éditeurs de contenus.

Quelques astuces pour bien démarrer un projet prenant en compte l’accessibilité

En faisant le tri dans mes bookmarks je suis retombé sur une contribution faites sur le JDN. Ca date un peu mais c’est toujours d’actualité, voici quelques règles de bases pour intégrer la composante « Accessibilité » (A11Y pour les intimes) dans vos projets :

  • Impliquer le plus tôt possible un expert dans le domaine afin qu’il préconise le cadre à suivre tout au long du projet.
  • Impliquer le client dans la démarche d’accessibilité et lui faire prendre conscience que certains points de validation sont manuels et ne peuvent être assumés par un robot.
  • Expliquer clairement les concepts d’accessibilité vis à vis des utilisateurs (malvoyants par ex.) mais également vis-à-vis des machines (moteur de recherche).
  • Ne pas systématiquement coller aux recommandations W3C mais prendre du recul afin de trouver un équilibre.
  • Faire communiquer l’expert avec les ergonomes puis les créatifs.
  • Former les futurs contributeurs du CMS s’il y a lieu et en particulier s’ils sont autorisés à générer du code HTML
  • Ne pas hésiter à utiliser des outils tels que la liste AccessTech, Opquast, les recommandations du W3C, ou encore RGAA.

Dans le cas où ne vous pouvez pas avoir recours à un expert, demandez à vos développeurs d’appliquer les règles suivantes, c’est un minimum que tout développeur web doit savoir. Ces règles ont été rappelées de manières très pertinentes par Jean-Philippe Simonnet lors de sa conférence « L’accessibilité, un truc réservé aux riches ? » à Paris-Web la semaine dernière.

  • Des attributs « alt » sur les images
  • Des titres sur les liens
  • Des sous-titres sur les vidéos avec si besoin une audiodescription
  • Un titre et un résumé sur les tableaux
  • Des alternatives et le temps des animations
  • Une navigation au clavier
  • Une navigation adaptée : Liens d’évitements, Fil d’ariane, plan de site etc…
  • Un bon contraste
  • Une écriture compréhensible par tous : Citations, Acronymes, Balises de langues (FR|EN…)
  • Un code valide W3C (Hiérarchie sémantique, formulaires…)
  • Prohiber l’utilisation des frames et iFrames

Je sais que nous avons tous des contraintes fortes de coûts, de planning ou tout simplement de facteur humain. Il n’est pas forcément évident de trouver du temps pour former et faire monter en compétences les juniors ou de trouver les bons arguments pour vendre au client les prestations comme le sous-titrage ou l’audiodescription des vidéos mais c’est à force d’en parler, d’échanger et d’essayer de le vendre que l’on avance. Et franchement pour les autres de points, c’est comme pour toutes les technos, vous perdrez un peu de temps au début pendant l’apprentissage mais ça viendra naturellement par la suite.

Choix de langues et utilisation des menus déroulants

Un article rapide pour vous parler de la fonctionnalité des choix de langues dans les interfaces web.

Il y a deux cas auxquels je suis confronté quand je dois choisir une langue :

  •     Sur une page de dispatch comme par exemple sur le site d’Air France.
  •     Dans une interface de configuration, comme par exemple quand on créer une application dans Facebook.

Dans ces deux exemples, l’interface proposée est mauvaise. En effet, sur la dispatch d’Air France, on me propose la liste des langues disponibles dans ma langue, en l’occurrence en français. Dans ce contexte, si je dois changer de langue, c’est que je ne parle pas français, par conséquent je ne vais pas comprendre la liste qui m’est proposée et je ne vais pas pouvoir choisir la langue qui me convient.

Dans l’interface de Facebook, je peux choisir la langue de l’application, sauf que celle-ci propose la liste des langues traduites ! Par exemple je ne vais pas faire la différence entre 한국어 et 日本語 (Les experts des localisations auront peut-être reconnu du Coréen et du Chinois ?), en tant que développeur dans une interface d’administration j’ai besoin des langues dans ma langue ou dans la langue de l’interface que j’ai choisie, c’est à dire dans une langue qui est significative pour moi.

En conclusion, si vous devez proposer un choix de langue :

  • Pour les internautes qui doivent choisir une langue dans un site multilingue, proposez leur de choisir parmis une liste de mot traduite, et d’ailleurs le contraire m’aurait étonnée, c’est la bonne pratique 162 du référentiel Opquast.
  • Pour les internautes qui doivent configurer une langue dans une interface d’administration, proposez-leur une liste de langue dans la langue de leur interface afin qu’il la comprenne.

Aidez vos clients à passer à la vitesse supérieure avec FireFox portable !

Il arrive que vos clients n’aient pas la possibilité d’installer des applications sur leur poste car ils n’ont pas les droits nécessaires. Dans ce cas, impossible de mettre à jour un Internet Explorer 6 ou d’installer un navigateur performant comme Firefox, Safari ou encore Opera.

Crédit Photo : Emilie Pistorius (CC)

Il existe peut-être une solution du côté de FireFox en version portable, c’est-à-dire une version « standalone » fonctionnant sur une clef usb.

Vous trouverez une version portable de FireFox sur le site de PortableApps.

Une fois l’application téléchargée, lancer l’installation et indiquer le lecteur et le répertoire sur la clé usb.

Concernant les mise à jour, il faut télécharger la dernière version puis écraser le répertoire comportant l’application, les données seront conservées. Une sauvegarde préalable du répertoire ne coûte rien et peut être utile en cas de problème.

Si vous souhaitez passer par la mise à jour automatique de Firefox, faite une copie de votre profil – PortableFirefox\Data\profil, installer la nouvelle version et puis recopiez votre ancien profil dans la nouvelle installation.

La Foire Aux Questions en anglais est bien faite et répondra à vos interrogations.

Les clefs sont prêtes à être livrées et j’espère qu’il n’y aura pas de problématique de sécurité trop fortes sur le poste cible et que cela fonctionnera. 

Si vous avez des retours d’expériences sur ce sujet, n’hésitez pas à nous en faire part dans les commentaires.

Feuilles de styles utilisateur avec Internet Explorer

Comme dans beaucoup d’agences nous utilisons quotidiennement un outils en ligne pour saisir les temps passés sur les différents projets. Classiquement on retrouve des listes déroulantes (<select />) pour choisir un premier périmètre projet puis un projet et enfin un sous projet. En ce qui me concerne les libellés sont trop longs et la taille des <select /> étant fixée avec des styles en ligne, on ne voit pas les libellés sans passer la souris dessus. Je me suis donc penché sur la question des feuilles de styles utilisateurs afin de forcer l’augmentation de la largeur de ces menus.

Il y a une fonctionnalité d’Internet Explorer qui permet de spécifier une feuille en 3 clics et qui pourrait donc convenir aux usagers non avertis et qui ne nécessite donc pas d’installation de plug-in ou d’édition de configuration. Merci de bien comprendre que le but de cet article est de répondre à une besoin large d’utilisateurs dans un contexte global ou Internet Explorer est utilisé par un public nombreux et pas forcément rôdé aux bons navigateurs.

Au niveau de la feuille de styles, cela donne le code simple suivant : #identifiant {width: 300px !important;}

« !important » permet d’augmenter le poids de la règle et donc de surpasser les styles en ligne.

Attention toutefois, l’application d’une feuille de style utilisateur s’applique à tous les sites que vous visitez ce qui peut provoquer des effets de bords importants sur des identifiants courants comme « #menu » ou « #nav » par exemple.

J’ai placé une page de démonstration ici : http://adrien.leygues.free.fr/test/10pxText.htm qui donne le résultat suivant : 

Si je veux appliquer une feuille locale que vous pouvez télécharger à cet url : http://adrien.leygues.free.fr/test/feuille.css , il n’est actuellement pas possible d’indiquer un URL comme source du fichier.

Je passe par le menu « Outil » puis je clique sur le bouton « Accessibilité » en bas à droite :

qui ouvre le panneau suivant :

dans lequel je spécifie le chemin vers la feuille à appliquer, ici « d:\feuille.css ».

Une fois la feuille chargée, j’obtiens le résultat suivant dans lequel le texte est bien passé de 10px à 20px : 

En ce qui concerne Firefox, vous pouvez passer par la WebDeveloper Toolbar via le menu « CSS » > « Ajouter une feuille de style personnalisée ».