Toute bonne nouvelle ne venant jamais seule et comme je l’ai déjà mentionné, je reprends du service sur Web intention. Mais plusieurs précisions avant tout.

Au cours d’une rencontre avec Delphine Malassingne, nous avons partagé nos différentes visions de nos métiers, responsable qualité web. Nos visions étant complémentaires, l’idée d’un projet commun a rapidement germé.

w3qualité  (tout en minuscule !) est finalement né et les premières pages sont maintenant visibles. Ce projet a pour ambition de fournir des ressources (outils, articles, analyses, etc.) sur la qualité web… vaste sujet.

Les premiers retours que nous avons eu sont plus qu’encourageant et nous confortent dans l’idée que ce portail viendra combler un manque dans le web français. Merci à vous.

Nous avons proposé à plusieurs personnes qui gravitent autour du web et ayant une philosophie et une approche du web qui convergent avec les nôtres, de participer à cette aventure. L’équipe qui s’occupera de ce site est ainsi constituée de :

• Delphine Malassingne, responsable qualité web, secrétaire de Paris Web 2011, qualiticienne de valeurs et pile électrique du web
• Christophe Andrieu, directeur artistique freelance rare et de talent, dessinateur de talent et grand jappeur devant l’Internet
• Vincent Valentin, développeur front-end de génie qu’on ne présente plus
• Stéphane Deschamps, inénarrable expert en accessibilité, gourou 6ème dan et accessoirement un des fondateurs de Paris Web
• Sébastien Delorme, Monsieur WCAG, investi par le monarque de l’accessibilité numérique de la mission d’évangéliser les impurs
• et votre serviteur, modeste responsable qualité web et consultant UX

Belle équipe, n’est-ce pas ? Un peu de modestie ne nuit pas, surtout si elle est sincère

Nous avons, également, eu le plaisir de recevoir le parrainage d’Elie Sloïm, Mr Qualité Web, fondateur de Temesis et du projet Opquast ainsi que Frank Taillandier, maitre es Standards W3C. Qu’ils en soient ici chaudement remerciés.

Vous pouvez suivre l’actualité de w3qualité  sur Twitter.

w3qualité  va prendre son envol dans les prochaines semaines avec les premiers contenus.

En conséquence, la ligne éditoriale de Web intention va évoluer et se recentrer sur une partie du web qui me tient, également, à coeur depuis longtemps : la conception et plus précisément l’ergonomie et l’expérience utilisateur. J’y reviendrai dans un prochain billet.

Dans cette attente, je vous invite à garder un oeil sur les deux Scoopit, outil de veille et de curation, que je maintiens :

• Qualité web et testing
• Ergonomie web, IHM et UX

A ce propos, si vous êtes intéressé par l’utilisation de Scoopit, il me reste quelques invitations que je pourrais partager avec grand plaisir. Faites vos demandes dans le commentaires si vous êtes tenté par l’expérience.

Sinon que pensez-vous de ces annonces ?

Je tiens également à sincèrement remercier toutes les personnes (commentaires, Twitter, mail…) qui m’ont demandé de faire revivre Web intention. Le phoenix renait !

L’offre est assez disparate en ce qui concerne les outils gratuits et/ou open-source. En effet, les responsables de ces différents projets sont bien souvent sur plusieurs fronts (formateur, développeur, évaluateur…) à la fois d’où le peu de temps à consacrer au développement des outils. Cependant, leur aide (qu’ils en soient ici chaudement remerciés) permet de nous offrir des outils d’une grande qualité.

Extensions Firefox

• Fangs : extrait seulement le texte et affiche le contenu comme il serait lu par un synthétiseur vocal.
  
• Firebug & Web Developer : les plugins indispensables.
• Firefox Accessibility Extension : permet de tester selon les bonnes pratiques HTML IITAA (WCAG 1.0, section 508).
• HeadingsMap : affiche les balises <h1> à <h6> en vérifiant la pertinence hiérarchique.
  
• Semantic Checker : permet de mettre en évidence la sémantique d’un document.
• WAVE Toolbar : lance une panoplie de tests (WCAG et section 508) et affiche les résultats contextualisées. Graphique et pratique.
• WCAG Contrast checker : permet d’analyser les couleurs et le contraste d’un élément ou d’un document complet (WCAG 1.0 et 2.0).

A noter, le plugin pour Firebug : Firebug Accessibility (en phase de développement mais au ralenti).

Synthétiseur vocal (lecteurs d’écran)

Il existe un grand nombre de synthétiseurs vocaux sur le marché. Certains payants, d’autres open-source.

Le plus connu est Jaws, logiciel très puissant et performant mais onéreux.

Celui que j’utilise est NVDA, open-source et très complet. Les voix sont, cependant, encore assez métalliques mais compréhensibles à condition de bien les régler.

Aucun ne fonctionne sur Mac.

Autres ressources

• Contraste analyser est un petit logiciel très simple qui permet de vérifier les couleurs et contraste d’une image (pour la validation d’une maquette, par exemple)
• TAW3 est une application online, desktop et une extension Firefox. Très complète, elle permet de vérifier une page sur les critères WCAG 1.0, WCAG 2.0 avec niveau A, AA ou AAA.
• FAE (Functional Accessibility Evaluator) est une application online de l’université de l’Illinois qui permet d’évaluer une page ou un site (jusqu’à une profondeur de 3 niveaux) et d’obtenir un rapport assez détaillé.

Voici une sélection de 12 plugins que j’ai trouvés particulièrement intéressants sur différents points. Certains offrent une profonde intégration de la notion d’accessibilité en respectant WCAG 2.0, d’autres (et c’est la majorité) améliorent grandement l’ergonomie des interfaces web et sont innovants pour l’expérience utilisateur.

1. jQuery-Accessible-RIA
   jQuery Accessible RIA est une collection de plugins jQuery conformes avec les guidelines WCAG 2.0 et les normes WAI-ARIA. On y compte un plugin de gestion de tableaux, un de validation de formulaire, un pour les onglets accessibles et une lightbox. Un projet à suivre.
2. FormToWizard
   Un plugin puissant qui permet de décomposer, de manière transparente, un formulaire long et indigeste en une suite de mini-formulaires avec affichage des étapes et la possibilité de naviguer dans ces étapes.
3. Sliding login panel
   A l’heure où les formulaires de connexion et d’inscription sont devenus légion mais posent toujours problème en matière d’architecture et de webdesign, voici un plugin qui permet d’obtenir une zone d’inscription ou de connexion propre et ergonomique.
4. Validation
   Le plugin ultime de validation de formulaire en live : propre, facile à utiliser, paramétrable à souhait. Indispensable !
5. Img Notes
   Un plugin simple qui permet d’ajouter des notes sur une image (comme le permet Flicker ou Facebook, par exemple)
6. ColorPicker
   Parmi la foultitude de colorpickers existants celui-ci me parait le plus équilibré, le meilleur rapport fonctionnalités/légèreté.
7. Pretty checkboxes
   Une méthode pour remplacer de manière innovante les « bêtes » cases à cocher. Propre et clair !
8. Créer un joli nuage de mots-clé avec Facelift et jQuery
   Un tutorial pour réaliser un nuage de mots-clé dont l’aspect peut mieux respecter une charte graphique et offrir un bien meilleur rendu. Aucun problème du coté SEO, le code est non obstrusif et respecte les standards.
9. selectToUISlider
   Un superbe plugin qui permet de réaliser des sliders à une ou 2 entrées grâce à des <select> pour des sélections d’intervalles, par exemple. A noter l’accessibilité du plugin.
10. jqGrid
    Voici une solution de gestion avancée de datagrid. jqGrid permet d’afficher et de manipuler les données dans un tableau. Les chargements de données se font par requêtes Ajax et ce plugin dispose de toutes les fonctionnalités qu’on peut en attendre : tri de colonne, sous-tableaux, tableaux dépendants, performance, data mapping, dédition des données (avec filtres possibles)…
11. David Walsh: Sexy Album Art with MooTools or jQuery
    Un tutorial bien sympathique pour afficher proprement les informations d’un album de musique mais cela peut aussi s’adapter à tout autre contenu visuel nécessitant une sur-couche informative dont la présence n’est pas indispensable de prime abord.
12. Recreate the Apple Product Slider
    Un tutorial pour obtenir un slider dynamique comme sur le site d’Apple.

• FireQuery
  Un addon, encore en beta, pour Firefox bien pratique qui vient se greffer intelligemment sur Firebug et qui permet de gérer jQuery directement depuis la console Firebug. On pourra voir, par exemple, tous les événements accrochés à un élément du DOM… indispensable !
• Zero Clipboard: Javascript Copy to Clipboard
  En cadeau, un petit script, non basé sur jQuery, prometteur qui mêle javascript et Flash pour la gestion du copier/coller sur tous les navigateurs.

D’ailleurs, je lance un appel à tous pour savoir si il y aura des compte rendu des ateliers du samedi. Plusieurs m’intéressent mais je ne pourrais malheureusement pas rester le samedi.

Au plaisir de vous y voir !

Aux vues des idées novatrices de FriendFeed et de la qualité de son travail, il y a fort à parier que FriendFeed devienne rapidement l’emblème du département R&D de Facebook.

Mais au delà de cette bonne nouvelle pour Facebook, Twitter doit faire grise mine. En effet, de par sa qualité d’agrégateur de flux de services sociaux, FriendFeed offre une meilleure expérience utilisateur et un meilleur outil de recherche que Twitter (selon Mashable).

Nous risquons d’assister dans les semaines (mois) à venir à une véritable guerre entre Facebook et Google pour le pouvoir des réseaux sociaux et de leur contenu en temps réel. De quoi ranimer de récentes informations concernant le rachat éventuel de Twitter par Google.

Qu’en pensez-vous ? Cela sera-t-il profitable aux utilisateurs ou risque-t-on un enclavement de ce type de réseaux sociaux ?

¤ Edit : L’annonce vient d’être faite pendant la rédaction de ce billet. Le montant de la transaction s’élèverait à 50 millions de $ ¤

Ce constat étant fait, qu’en est-il vraiment ? Selon les dernières statistiques que j’ai pu trouver, celles d’AT Internet (ex Xiti Monitor) de mai 2009 ou celles de Médiamétrie de juin 2009, les parts de marché, en France, se découperaient comme suit (je vous passe le chapitre sur la précision des chiffres, là n’est pas la question, nous n’aurons besoin que de tendance générale) :

• Internet Explorer : environ 65%
  • IE 8 : 15%
  • IE7 : 35%
  • IE 6 : 15%
• Firefox : environ 28%
• Safari : 3.4%
• Google Chrome : 1.7%
• Opera : environ 1.3%
• Autres : environ 0.6%

Bon, nous sommes loin des 10 000 marques et versions mais c’est déjà largement suffisant pour commencer. En matière de qualité web et de conformité de produits, nous sommes également obligé de prendre en compte le système d’exploitation sur lequel tourne le navigateur. Effectivement, des différences, certes parfois infimes, existent selon l’OS. En nous penchant, à nouveau, sur les études de nos fournisseurs de chiffres français, nous remarquons :

• Windows : environ 94%
  • Vista : 31%
  • XP : 61%
  • 2000 : 1.2%
  • Autres : 0.8%
• Mac OS X : environ 4.4%
• Linux : 1%
• Autres : 0.6%

Maintenant, vous prenez ces derniers chiffres auxquels vous incorporez délicatement les premiers. Une fois le mélange homogène , battez fermement le mélange ! Vous obtenez l’incroyable mixture avec laquelle il faut jongler constamment lorsqu’on teste et recette un site.

Cependant, nous ne pouvons pas assurer une conformité totale sur l’ensemble des navigateurs. Il faudrait un budget colossal et plus d’une vie de développeur pour réaliser un tel prodige.

Yahoo! a introduit la notion de grade dans son Graded Browser Support de la Yahoo! UI Library. Cette notion permet finalement de s’orienter vers des niveaux de conformité et de compatibilité. Ainsi, nous pourront limiter et graduer la prise en charge des versions de navigateurs. Yahoo! propose, bien évidemment, son propre tableau de compatibilité pour sa bibliothèque mais on peut s’en inspirer pour offrir une vision correcte des problématiques de garantie de résultats sur un projet.

Au final, il en résulte un autre tableau que je soumets à votre sagacité. Dans cet arrangement, le niveau de garantie prend 2 valeurs :

• totalement compatible (Support Total – ST) : cas des dernières version stables des navigateurs. On assurera une correction complète des bugs
• partiellement compatible (Support Partiel – SP) : on pourra parler de dégradation propre (essentiellement visuelles), sur lesquelles on s’efforcera de corriger les bugs (il s’agit essentiellement de versions anciennes et plus développées de navigateurs)

J’ai opté pour le choix de ne plus ne plus assurer le support total d’IE 6 dans la mesure où il n’est plus développé et suivi par Microsoft. A ce propos, la fronde anti-IE6 se fait de plus en plus virulente. En témoignent les différentes actions menées de part la toile : IE 6 no more relayé par Mashable, le collectif SaveTheDevelopers dont je parlais justement ici ou l’analyse de CNN, Web citizens trying to kill Internet Explorer 6 d’aujourd’hui.

J’ai également opté pour le support de Safari 4 (pas de safari 3.x qui ne représente qu’une portion congrue), Firefox 3.x (pas de Firefox 2.x qui ne représente qu’environ 1.5%). Pas plus de support pour le moment d’Opera 9.x (moins de 1.5%) ni de Google Chrome 2.x qui peine à percer (avec moins de 2 % de part de marché en disposant d’un colossal vecteur de propagation). Nous verrons bien si la version 3 de Google Chrome et le support du HTML 5 viendra inverser cette tendance.

Avec cette adaptation, on arrive à couvrir plus de 96% de la population des internautes, pas 96% de la cible de votre projet.

Il est bien évident que ce genre de tableau n’est qu’une base de travail et qu’il conviendra de le modifier selon la typologie de votre projet. En effet, nous n’aurons pas le même tableau pour l’intranet d’une société dont la DSI pré-colombienne ne veut pas changer les navigateurs de ses 2500 postes et le site e-commerce de vente de gadgets pour geeks ou encore un site avec une problématique de mobilité importante.

Je n’ai pas fait mention des navigateurs mobile mais cela dépend toujours de la typologie de votre projet. Nous retiendrons quand même 3 navigateurs parmi les plus importants sur le marché mobile actuellement : Iphone Safari, Nokia Web et Opera mini.

Ps : Je me suis également appuyé sur un sondage que j’ai lancé sur Twitter avec moults RT (merci à tous) et même un billet de Fred de Villamil « Quels sont les navigateur sur lesquels vous garantissez une conformité totale ?« , qui je le rappelle est toujours à la recherche d’un appartement sur Paris ou RP. La demande devient urgentissime !

Posted from Diigo. The rest of my favorite links are here.

Posted from Diigo. The rest of my favorite links are here.

Posted from Diigo. The rest of my favorite links are here.

• 193 millions d’utilisateurs dans le monde
• 51% de femmes et  45% d’hommes déclarés dans le monde
• 32,3% des utilisateurs sont européens soit 62 339 000 d’utilisateurs
• 51% de femmes et 47% d’hommes déclarés en Europe
• 9 530 000 d’utilisateurs actifs en France

via Smarkande