Sud Web 2012

Cet article a d’abord été publié sur le blog d’ekino ; je l’ai en effet écrit dans le cadre de mon travail en tant qu’employée.

En général

Si j’avais du mal à comprendre le programme de Sud Web au moment de m’inscrire, j’y suis allée en pleine confiance malgré tout … et Ekino a bien eu raison de m’y envoyer !
Globalement, ces deux journées ont permis des échanges, des questionnements sur nos métiers, de la (re)motivation.

La journée des “élaboratoires” fut une grande réussite. “Ça a pris”. Du coup, j’ai pu, à l’instar d’autres auditeurs, picorer d’un atelier à l’autre, écouter, participer, repartir, m’arrêter discuter autour d’un café et repartir dans une salle.
D’autres sont restés de bout en bout à chacun des ateliers qu’ils avaient choisi et ont pu participer intensément.
Beaucoup d’ateliers ont été improvisés, comme l’organisation le permettait.
Ce fut une journée d’échanges (connaissances), d’échanges (rencontres) et d’échanges (conversations de tout ordre).

Ci-dessous, mes notes durant les conférences.

C’est quoi un lead developer

Brice Fabre – @briceatwork

Brice Fabre a présenté son métier en faisant un parallèle :

  • avec le pompier qui gère les risques:
    • intervient sur l’urgence,
    • travaille en amont pour prévenir risques et accidents (tests unitaires et tests fonctionnels),
    • éduque sur prévention et dangers (transmet les bonnes pratiques)
  • avec l’archéologue qui fouille:
    • recherche,
    • analyse et chercher les usages possibles,
    • inventorie et documente.
  • avec le chef d’orchestre qui harmonise:
    • fait partie de l’équipe,
    • s’adapte aux spécifications,
    • coordonne

Le lead developer n’est pas un chef, il est avec son équipe, il code avec son équipe.
En France, on ne promeut que par du niveau hiérarchique. Or, lead dev n’est pas chef mais est très bon techniquement et ça doit être reconnu (y compris au niveau salaire).
Il n’est pas le de chef de projet car le lead dev guide son équipe par la technique et guide le développement mais n’est pas en frontal avec le client.

Il incarne le produit (au moins dans le cas de Brice) et le connaît techniquement sur le bout des doigts. Cela représente par contre un investissement en temps dont l’entreprise doit être consciente.

L’Open Web en tant que pierre angulaire du développement multi-objets

Thomas Bassetto – @tbassetto

Thomas nous enjoint à penser dès maintenant que bientôt tout le monde aura des objets connectés partout (autre que type informatiques (mobile, tablette)). Il argumente alors pour des applications non web et donne l’exemple du miroir.
Nouvel objet connecté, le miroir héberge des interfaces qui prennent en compte les traces doigts : toutes les interactions se font à droite, les vidéo et images sur la gauche. Un site internet  ne pourrait s’adapter car il ne pourra pas détecter qu’il s’agit d’un miroir.

Comment vendre des prestations agiles ?

Thibault Jouannic –@thibaultj

Présentation pleine d’humour nous mettant en condition : on reçoit un coup de fil d’un prospect voulant obtenir un devis et on doit le convaincre de choisir une prestation agile.

Les clients potentiels n’ont pas toujours une idée très précise de ce qu’ils veulent mais sont très précis quand on en vient au budget et au temps.

Quand on fait de l’agile, on n’est pas au forfait. Le client a la main sur les fonctionnalités donc on ne s’engage pas là-dessus.

Première étape : lui faire peur 😀
Si on vient voir un architecte alors que la maison est construite et qu’on lui dit que finalement, on voudrait un sous-sol, ça risque d’être très compliqué. Sur le web, on ne peut pas forcément savoir d’avance toutes les fonctionnalités, mais par contre, en mode agile, on peut facilement changer d’idée en cours de route.

Ensuite, lui proposer une alternative.
Avec beaucoup d’humour, Thibault propose d’en appeler aux “experts reconnus de l’industrie” qui valorisent l’agile.

Les arguments pour :

  • Il n’y a pas de spécifications à rédiger (là, franchement, vous devriez déjà vous l’avoir mis dans la poche !)
  • C’est lui qui définit les priorités
  • On peut arrêter à tous moment
  • On a le meilleur ROI à chaque instant du projet
  • “La première livraison est dans deux semaines !” (ça aussi, il va adorer !)

Par contre, il y a une grosse condition à poser :

  • Lui aussi doit s’investir en temps et en responsabilités. Il partage la responsabilité de la réussite. Et s’il dit qu’il n’a pas le temps, Thibault propose de faire valoir que s’il n’est pas prêt, lui même, à s’investir pour son projet, pourquoi un prestataire le ferait-il ?

Attention, on n’a toujours pas répondu à son besoin de devis. Or, sur 10 devis reçus, même à l’euro près, il y a des différences de plusieurs milliers :

  • car la lecture des spec est nécessairement une interprétation ;
  • car le développement se fait à différents niveaux.

Même si le client à l’impression d’avoir une vision claire, si on donne une estimation (alors qu’on ne sait pas l’évolution à cours ou moyen terme), on le fait sans vraiment savoir. Ce n’est ni respectueux du client, ni respectueux de sa propre organisation.

MDN : Documenter le Web ouvert

Jérémie Patonnier – @jeremiepat

Pour garder un web ouvert, documentez-le.
Pour avoir de la doc pour vous, participez-y.

L’enrichissement de la documentation MDN (Mozilla Developer Network) se fait sur wiki et avec un simple e-mail.

La doc MDN est une des + complète et utile. C’est un peu moins vrai en français et vos contributions sont les bienvenues :

  • Implémentation : renseigner l’implémentation d’un élément.
  • Rédaction : rédiger des articles ou des portions d’articles.
  • Relecture : faire une relecture technique ou éditoriale.
  • Signaler : faire remonter des erreurs.

Fiabilité : il n’y a pas de validation avant mise en ligne et quelqu’un de malveillant peut mettre des informations en ligne. Par contre, la communauté, la réactivité sont telles que ça ne restera pas longtemps en ligne.

L’icône anonyme

Anne Marte

Questionnement sociologique sur nos icônes d’avatar.
Anne Marte en a assez dit pour nous donner envie de guetter l’article qu’elle devrait (hein ?! hein ?!) sortir sur le sujet 🙂

CSS3 with a safety net

Peter Gasston – @stopsatgreen

Ce que j’ai retenu de cette présentation (outre la prestation de Peter Gasston !) : comment vendre l’amélioration progressive à un client. Non, ce n’est pas une version basse qualité qu’on améliore ; c’est une bonne version et une encore meilleure ; un croissant et un croissant au beurre, à la crème et aux amandes (Peter avait choisi le croissant jambon fromage, mais chacun ses goûts !)

Le test du recruteur

Xavier Mouton-Dubosc – @dascritch

Grosse moquerie des tests de recrutements obsolètes et inutilisables où les erreurs grossières étaient pointées du doigt.
(Cliquez sur la photo pour avoir un aperçu 😉 )

Intégrateur, lève-toi et conçois !

Bertrand Keller – @bertrandkeller

Où l’on voit que les questions sur la valorisation du développeur front-end sont encore très sensibles et soulèvent beaucoup d’intérêt.

À rapprocher de :

L’altruisme pour votre bénéfice

Anthony Ricaud – @rik24d

Ne soyons pas hypocrite, le véritable titre d’Anthony était “L’altruisme pour ta gueule” 😀

Anthony fait valoir que la participation à des projets communautaires est un acte qui peut individuellement rapporter.

En résumé, cela va influer positivement sur :

  • de la visibilité et favoriser une belle embauche ;
  • l’améliorer ses conditions de travail ; c’est-à-dire les outils, leur efficacité, leur fiabilité ;
  • sa montée en compétences techniques ;
  • sa capacité à exploiter et cultiver ses compétences humaines, comportementales, sociales (ce qui sert dans le monde professionnel !)

(Pour ma part, je peux effectivement dire que de participer à Paris-Web, contribuer à Opquast, faire une conf au w3Café, avoir lancé w3qualité, etc. m’a déjà énormément apporté et m’apporte toujours.)

D’autres comptes-rendus : “Ils parlent de Sud Web

Photo : t_chevalier

6ème Forum Européen de l’Accessibilité Numérique – Compte-rendu

NB : J’ai voulu garder l’exhaustivité de mes notes, même si mon attention n’a pas été la même tout au long de la journée. L’ensemble est donc plus ou moins complet et plus ou moins rédigé. Néanmoins, si j’avais pris le temps de tout mettre au carré, je crois que ce billet ne serait jamais sorti.

Voir

Sommaire

  1. Mon avis global
  2. Introduction
  3. Les enjeux de l’accessibilité numérique dans les grandes entreprises
  4. L’innovation inclusive dans la conception des produits TIC grands publics
  5. Accessibilité – Puissance et promesses (Comment ordinateurs de bureau et applications mobiles accessibles changent la vie quotidienne des personnes handicapées)
  6. Convergences entre les besoins d’accès mobile au SI, la conception pour tous et l’accessibilité numérique
  7. Gérer la conformité des sites Web aux normes d’accessibilité
  8. Table Ronde
    “Quels chemins vers la conformité WCAG2.0 ?”
  9. Accessibility Steps
  10. AcceDe Web
  11. MIPAW
  12. Retour d’expérience et choix de Tanaguru
  13. EPUB 3 – des ebooks accessibles à tous
  14. La production de livres scolaires accessibles avec ePub 3.0
  15. Le projet LIA (Libri Italiani Accessibili) : vers un service de distribution grand public de livres numériques accessibles en Italie
  16. Les applications mobiles mieux accessibles à tous
  17. Rendre les systèmes d’informations urbains accessibles à des personnes handicapées
  18. Conclusion

Mon avis global

Cette session, bien plus que les autres années, véhiculait l’idée d’une accessibilité pour tous. Précédemment, positionnement de BrailleNet oblige, l’ensemble de la journée était fortement teintée de handicap.
Cette année, les interventions mettaient plus en valeur des usages que des usagers. Il faut dire que la technologie de ces derniers temps, avec l’utilisation des smarphones et leurs flots d’applications, nous enthousiaste tous.

La journée commençait par le témoignage de deux grosses entreprises (Sanofi et Microsoft) valorisant le fait que l’accessibilité n’est pas une option chez eux.
Sanofi a mis en place une personne à plein temps, fait régulièrement appel à l’externe pour des prestations en accessibilité et forme ses collaborateurs.
Microsoft met en avant le fait que la technologie doit s’adapter et que faire de l’accessibilité revient à créer de meilleurs outils, pour tous. Chez eux, l’accessibilité est à chaque étape.

Microsoft pense que l’accessibilité doit être mieux et plus intégrée dans les programmes universitaires et scolaires et qu’elle devrait être mieux comprises (expliquée, donc) aux directeurs financiers et services client.

Enfin, Microsoft souhaiterait la mise en place d’un organisme mondial coordonnant les effort, les méthodes et certifiant l’expertise.

La session suivante était particulièrement intéressante grâce aux démonstrations de Robin Christopherson. Il valorisait l’utilisation de son smartphone (tout est accessible dans son iPhone) et a montré comment, bien qu’aveugle, il :

  • envoie un tweet en quelques secondes,
  • connaît la couleur d’une pochette,
  • se fait indiquer l’emplacement de la touche “@” sur son clavier,
  • demande un renseignement en langue étrangère (bon… peu concluant !),
  • etc.

Démos avec VoiceOver, Siri, etc.
http://fr.wikipedia.org/wiki/VoiceOver
http://fr.wikipedia.org/wiki/Siri_%28logiciel%29

Introduction

par Dominique Burger

L’introduction a été l’occasion de faire quelques rappels :

  • “Pour Dominique Burger, le manque d’accès à Internet est facteur d’exclusion professionnelle et sociale “
  • “Pascal Guitton met l’accent sur le vieillissement de la population comme enjeu en matière d’accessibilité “
  • “15 % de la population mondiale vivent avec un handicap”
  • “Il n’y a quasi pas d’université formant des ingénieurs en information ayant une formation en accessibilité “
  • “Les sites Web accessibles voient leur trafic naturel s’accroître de 15 à 30 %”

@victorbritopro

Les enjeux de l’accessibilité numérique dans les grandes entreprises

Bruno Ménard (Sanofi ; CIGREF)
Vice-président du CIGREF

Le CIGREF est une association qui accompagne les grandes entreprises dans le développement des systèmes informatiques.
Sa mission : promouvoir la culture numérique comme source d’innovation et de performance.

Sanofi (industrie pharmaceutique) est particulièrement intéressé par les problématiques de e-santé : accompagner les plus loin possible les patients lorsqu’ils sont chez eux.
L’accessibilité numérique est donc un enjeux économique pour Sanofi.

Les “frameworks” doivent intégrer nativement les impératifs d’accessibilité (gros efforts fait par Microsoft sur SharePoint par exemple)

Pour y parvenir :

  • Prévoir des formations pour les développeurs
  • S’y prendre en amont
  • Dialoguer avec les fournisseurs pour intégrer les besoins en accessibilité
  • Tutoriel dans l’intranet pour les éditeurs

Ils ne font pas de mesure sur l’impact en ressource quant au fait qu’ils vérifient tous les sites mais ils considèrent que l’accessibilité prise en compte dès le début augmente le coût du projet de quelques point ; prise trop tardivement, cela à montrait à un quart du coût.

Ils gèrent l’accessibilité des sites SANOFI, des brochures internes, des vidéos, conversations téléphoniques (via interprète) ou encore l’accessibilité de la notice d’un médicament via smartphone (bientôt).

Moyens
Un ETP est nécessaire.
Ils font appel à des prestations externes et mettent en place des formations pour les collaborateurs.

Leur ROI est essentiellement basé sur la conviction. 🙂

La méthode de mise en place est de :

  • commencer par les fondamentaux
  • faire du pas-à-pas
  • privilégier plutôt de l’imparfait sur un grand périmètre que du très conforme sur un petit périmètre
  • en faire une démarche d’entreprise (via une charte)

Le message que Bruno Ménard voulait faire passer :

  • S’occuper de l’accessibilité en amont ;
  • le faire en toute humilité.

NB : Sanofi s’est engagé à rendre son site Web conforme au niveau AA des WCAG (A pour les sites des filiales)

L’innovation inclusive dans la conception des produits TIC grands publicsl

Robert Sinclair (Directeur de l’accessibilité (Chief Accessibility Officer) chez Microsoft)
@MSFTEnable @robert_sinclair
http://aka.ms/EnableBlog
rob.sinclair@microsoft.com

Robert Sinclair, qui rappelle que 15% de la population est concernée par de l’accessibilité numérique, fait par ailleurs remarquer que 100% de la population vieillit.

Il n’y a pas d’usager typique.

Inclusive Innovation :

  • inclusive design
  • disseminated Expertise
  • Conscientious innovation
  • Support Services

La technologie doit s’adapter aux personnes (ce n’est pas à moi de m’adapter)
Mettre en place des fonctionnalités sur les produits qui permettent d’améliorer leur utilisation.
Microsoft met en avant que son leitmotiv est de permettre à chacun de réaliser son potentiel.

3 composantes :

  • Personnes : formation, etc.
  • Pratiques d’affaires : accessibilité à chaque étapes par exemple
  • Produits et techno.

Peu d’entreprises comprennent l’intérêt business de l’accessibilité.

Causes

Les personnes ne comprennent pas qu’avec l’accessibilité il s’agit de créer de meilleurs outils pour tout le monde.

Solutions

Réfléchir à la manière dont on travaille :

  • accessibilité dans les programmes universitaire et scolaire
  • les directeurs financiers, les services clients, etc. ont besoin de comprendre l’accessibilité
  • meilleure collaboration dans le monde
  • organisme mondiale certifiant des personnes en tant qu’expert d’accessibilité

“Microsoft voudrait une : International society of accessibility professionals”
@oxymore

Accessibilité – Puissance et promesses (Comment ordinateurs de bureau et applications mobiles accessibles changent la vie quotidienne des personnes handicapées)

Robin Christopherson (AbilityNet)
@USA2DAY

Si Microsoft n’avait pas pris en compte l’accessibilité dès le DOS puis avec Windows, Robin – qui est aveugle – n’aurait pas eu les mêmes études.
Le smartphone est la deuxième révolution. Ex. d’utilisation avec iPhone : tout est accessible.
N’utilise plus que son iPhone (avec un clavier) et le cloud plutôt qu’un ordinateur.

Applications pour aveugles – ou non – et gratuites – ou “presque” – qui aident au quotidien : traduction, Skype pour demander de l’aide, GPS, couleurs.
+ appli qui permet de poser des questions (ex : photo du clavier et question pour savoir où est l’@.) ; et c’est la communauté qui répond.

Démos avec VoiceOver, Siri.
http://fr.wikipedia.org/wiki/VoiceOver
http://fr.wikipedia.org/wiki/Siri_%28logiciel%29

Convergences entre les besoins d’accès mobile au SI, la conception pour tous et l’accessibilité numérique

Renaud Cornu-Emieux (École de Management des Systèmes d’Information)

Rappel : on ne se connecte plus en majorité via PC mais depuis terminaux mobiles (smartphones, tablettes)
L’école ne propose pas une formation d’expert accessibilité mais intègre des bases pour avoir la capacité de creuser la problématique d’accessibilité quand on y est confrontés.

Gérer la conformité des sites Web aux normes d’accessibilité

Shadi Abou-Zahra (W3C/WAI et WAI-ACT Project)
Activity Lead, WAI International Program Office
http://w3.org/People/shadi/
shadi@w3.org

  • étendre la collaboration
  • créer des supports pour guider les développeurs
  • créer des méthodologies d’évaluation harmonisées
  • coordonner la recherche et le développement car la technologie avance à grande vitesse.
  • Ligne directrice de référence

Base de données de document de support.
Ex : “alt”
Les catégoriser par besoins : ex. : je fais un tableau, je fais un site web utilisable au mobile, etc.
Développer, via des groupes de travail, des méthodo pour les décideurs.

  • Méthodologie harmonisées

Il n’y ni bon ni utile que chaque entreprise ait sa propre méthode.

  • Coordination de recherche
  • Support accessibilité

Quelle technologie est supportée sur quel support

  • Notes sur les applications

Associer les barrières les plus fréquentes à l’accessibilité à un support permettant des les couvrir
(souvent barrières très très simples)
Education and Outreach Working Group (EOWG)

  • Adoption et référencement de la norme WCAG

pour les décisionnaires
apporter des bonnes pratiques

  • évaluation des sites web

le but est de dév. une méthodo harmonisée et internationale.

Question / Réponse : Quels sont les outils d’évaluation proposés par le W3C ?
Liste d’outils : 120
voir sur la page d’accueil du WAI : “évaluation”
Liste pas à jour

http://www.eticode.fr/

http://w3.org/WAI/ACT/

Table Ronde
« Quels chemins vers la conformité WCAG2.0 ? »

(Cette partie m’a particulièrement intéressée ; si je trouve le temps, je fais un billet là-dessus)

Présentation de différentes réflexions autour de la problématique : comment s’organiser de façon pragmatique pour mettre en place la conformité à WCAG.

Accessibility Steps

Aurélien Levy – Temesis
@goetsu

“Accessibility Steps” comprend deux étapes :

  • “First Step” : 100 consignes automatisables considérées comme gérant des erreurs
  • “Second Step” :  consignes automatisables signalées en tant qu’alertes

Avec First et Second, on couvre la base technique des éléments à avoir vu avant d’appeler un expert accessibilité.

L’idée c’est de décharger les experts sur des choses qui sont automatisables et permettre aux développeurs de l’implémenter de manière simple, sans avoir recours à l’expert

First : https://checklists.opquast.com/accessibilityfirststep
Second : https://checklists.opquast.com/accessibilitysecondstep

AcceDe Web

Sébastien Delorme – Atalan
@sebcbien

Notices adaptées à la gestion de projet
Des sociétés et des écoles soutiennent le projet
orienté projet et pragmatique

Question/Réponse : Olivier Nourry est gêné que la méthodo AcceDe Web garde cette idée de commencer par le graphisme.
> Dans la notice de conception graphique, on intègre des éléments fonctionnels
La notice prend en compte les éléments qui pourraient avoir un impact ultérieurement dans le déroulement du projet.

http://accede-web.com/

Support de présentation :

MIPAW

Jean-Pierre Villain – Qelios
@villainjp

Voir : http://www.slideshare.net/Qelios/mipaw-modle-dimplmentation-progressive-de-laccessibilit-du-web

Retour d’expérience et choix de Tanaguru

Oliver Rabet
Chef de projet à Universcience
@noliverte

témoigner des difficultés à mettre WCAG en place
Comment vendre en interne l’accessibilité qui a l’air souvent très technique et qui n’intéresse pas, au premier abord, les décideurs.
“qualité web” pour vendre l’accessibilité

Choix : Tanaguru

  • tableau de bord pour communiquer
  • contrôler certains points technique

Voir : http://www.tanaguru.com/

EPUB 3 – des ebooks accessibles à tous

Markus Gylling (Consortium IDPF et Daisy)

Chaque éditeur travaille dans son coin. On ne cherche absolument pas de compatibilité ou de passerelle.
L’accessibilité en pâtit.

La production de livres scolaires accessibles avec ePub 3.0

Gerald Schmidt (Pearson Education)

Le projet LIA (Libri Italiani Accessibili) : vers un service de distribution grand public de livres numériques accessibles en Italie

Cristina Mussinelli (Association Italienne des Editeurs)
htp://www.editeur.org/109/Enabling-Technologies-Framework/
cristina.mussinelli@progettolia.it

Question/Réponse : ePub en France ?
Tous les acteurs de la France on choisi ePub comme format.

Les applications mobiles mieux accessibles à tous

Susanna Laurin (Funka Nu AB)

La vraie révolution d’internet c’est quand les personnes en situation de handicap ont pu utiliser internet
Focaliser sur la loi : mauvaise approche
Le smartphone peut être consulté rapidement ou pendant qu’on fait autre chose (debout par exemple).
Pas de réseau à trouver (wifi)
Le smartphone n’est pas pratique pour taper un texte

Recommandation :

Faire les choses très simple à utiliser : avant, cela était particulièrement important pour les handicapés, maintenant, c’est important pour tout le monde à cause de la façon dont on utilise notre smartphone (dans la rue par mauvais temps, dans le bus, à vélo, etc.)
Les recommandations autour des couleurs et des contrastes sont très important pour tout le monde (utilisation à l’intérieur ou au soleil).

La zone reconnue comme étant celle à laquelle on a accès est prévue pour les droitiers mais pas pour les gauchers.
Funka Mobile Guidelines
48 guidelines – 6 chapters

Plusieurs possibilités si je veux faire mon site web en mobile :

  • responsive design (même si l’utilisateur peut ne pas reconnaître le site qu’il connaît bien sur l’autre terminal)
  • Limiter le contenu. Ex : American Airlines – uniquement le formulaire de réservation de billet – Choisir une seule fonctionnalité (mais les gens utilisent de plus en plus les terminaux mobiles pour surfer donc ils peuvent vouloir l’exhaustivité des infos sur leur mobile. Le mieux serait d’avoir les deux.
  • Des services différents pour le mobile (même remarques que précédemment). Ex : BBCiPlayer : d

www.funkanu.com/mobile

“There is not such thing as an average user”.

Rendre les systèmes d’informations urbains accessibles à des personnes handicapées

Jacques Lemordant (INRIA)

Projet Open Street Map (prochain congrès à Tokyo)

Démonstration d’une application permettant de se faire guider, pas à pas, sur un itinéraire.
Voir : http://www.inria.fr/centre/grenoble/actualites/guider-les-malvoyants-avec-la-realite-augmentee-audio

On peut facilement mettre 5 villes en mémoire dans le téléphone
INRIA fournisse l’outil mais c’est aux utilisateurs (communautaire) de fournir les informations.
Bientôt sur l’apple Store / Androïd
En attendant, pour l’obtenir, envoyer un e-mail à Jacques Lemordant

Conclusion

par Dominique Burger

  • Pour chacun de nos actes, nous avons besoin d’information. Cette information, de plus en plus, est disponible quelque part sous forme numérique.
  • Les usages de cette information se démultiplient.
  • Il n’y a pas d’utilisateur typique : l’accessibilité apparaît comme l’art de traiter tous les cas particuliers, s’adapter à tous les besoins qui sont très divers.
  • Tout le monde a besoin d’accessibilité.

Le fonctionnement d’un navigateur | Soirée performance web

Bon, ça vaut c’que ça vaut, mais voici mes notes de la soirée webperf de mardi dernier.
Comme pour la dernière fois (Atelier sur la performance web du 21 avril 2011 – Compte-rendu), j’ai noté ce que j’ai pu et ce que j’ai compris.

Un navigateur, comment ça marche ?

> comprendre le navigateur pour aider à faire des choix.
Anthony Ricaud

Introduction

Cette présentation n’a, initialement, pas été faite dans le contexte de la performance web. Elle permet de comprendre ce qu’un navigateur fait lors d’une requête (et cela inclue les temps d’attente et de traitement.)

D’un point de vue optimisation de la performance, les éléments présentés ci-dessous sont souvent minimes.

Voir les liens qui ont permis à Anthony de préparer sa présentation : Blogmarks > Marks de Rik lié au tag “navigateur-marche”.

Le navigateur a énormément de choses à traiter (parser les URL, rendu des polices, s’adapter aux OS, téléchargement, etc.)
Ici, on va voir ce qu’il se passe depuis la requête (clic sur un lien ou barre d’adresse) jusqu’au chargement de la page.

anthony

La requête et la réponse

La requête est envoyée. Nous sommes ici dans le cas où tout se passe bien. Le navigateur lit alors les premières lignes du html pour choisir le mode qu’il va appliquer pour interpréter la page.
Il y a trois modes possibles : xml, quirks et standard.

Avec “Content-Type: application/xhtml+xml” > Mode XML

Il est très peu utilisé parce que IE ne le supportait pas jusqu’à la version 9 et parce qu’en cas d’erreur : ça se voit
Pas de pb de performance par contre.
=> Tous les navigateurs sauf IE 7 et 8

Avec “Content-Type: text/html” > Mode Quirks

Modifie le box model (celui du W3C ou celui d’IE)
=> Tous les navigateurs

Avec un doctype > Mode Standard

Considère le doctype comme un indice, au moment où ça a été créé, de la qualité du code.
=> Tous les navigateurs

Les navigateurs se fichent des versions de spécifications (HTML5, HTML4, XHTML1.0, CSS3, etc.)

Conseil aux intégrateurs : d’un point de vue pragmatique, il vaut mieux se référer à ce qui est implémenté et fonctionne plutôt qu’aux specifications qui ne sont pas toujours à jour.

Le DOM

= la compréhension qu’a le navigateur du HTML qu’il stocke en mémoire
C’est le DOM qui est manipulé par JS.
Il est composé de nœuds éléments et de nœuds texte.

NB :
Même si espaces et retours à la ligne créent des nœuds texte vides, il n’est pas préconisé de minifier le HTML : le gain serait négligeable alors que parallèlement, il y aurait des problèmes de rendu à gérer.

Le HTML sera identique dans tous les navigateurs à partir de IE9/10. C’est-à-dire, par exemple que l’erreur <p><strong></p></strong> sera interprétée de la même manière par tous les navigateurs.

Les sous-ressources

Pendant que le navigateur récupère le HTML, il va chercher les sous-ressources (images, les CSS, JS).

Les images

C’est non-bloquant, le téléchargement continue.
Le décodeur (le machin qui traite les images) n’a pas non plus d’impact sur le temps de traitement car il compose l’image de son côté et l’envoie quand elle est prête.

Le CSS

C’est non-bloquant, le téléchargement continue.

CSS Buckets

Le navigateur ne prend que les sélecteurs et les place dans des “seaux” (hashtable) :

  • id : #sidebar ; div#sidebar pour une raison de spécificité
  • class : .item
  • tagname : div
  • autres : :visited

cssbuckets

Dès qu’il y a un combinateur de sélecteurs( espace , “~”, “>” et “+”), c’est celui qui est le + à droite qui l’emporte

Les sélecteurs dans Autres vont ralentir la performance.

CSS maching

Les navigateurs prennent tous les nœuds et vont chercher les règles CSS qui leurs correspondent.

div#sidebar et #sidebar sont dans le même seau mais div#sidebar oblige à une vérification de plus.
Dragonfly sort un profiler de CSS qui va permettre de voir les performances de chaque sélecteur (beta). En effet, sur la performance de sélecteur, il y a beaucoup de  cas particulier. (un outil du même type est en préparation chez Webkit)

  • div p : on ira pas chercher “div”
  • ul p : il faudra vérifier tous les parents avant de passer à la suite
  • ul > p : il n’y a qu’un parent à remonter
  • body > div p : il a dû monter et descendre beaucoup de fois pour établir la règle

Là encore, à moins d’avoir un très grand DOM ET un très grand nombre de sélecteurs, tout ça est négligeable en matière d’optimisation de la performance. S’il n’y avait que deux choses à avoir en tête :

  • Plus un sélecteur est court, plus il est rapide à analyser.
  • Essayer d’avoir le moins possible de sélecteur dans “Autres”

(webkit stocke + d’informations sur le DOM pour pouvoir descendre et remonter dans les noeuds plus vite ensuite)

Render Tree

Les images et le CSS ayant été traités, le “render tree” peut être fabriqué.

Reflow ou layout (selon les navigateurs)

A moins d’un timeout ou d’un JS qui demande une position, le reflow n’est lancé qu’une fois que toutes les CSS ont été chargées.

Chaque bloc est placé dans la page selon sa position et sa taille.

reflow

> Voir la vidéo sur Wikipédia Japon qui montre le reflow
On voit dans la vidéo qu’il commence par le centre, fait le côté et, à la fin …recommence : car il se rend compte en bas de colonne de gauche qu’il n’a pas assez de place en hauteur et qu’il doit donc ajouter un ascenseur à droite. Il recalcule alors les largeurs en fonction.

NB : Sur IE, la scrollbar est mise d’office.

A ce propos, Vincent Voyer
propose une astuce : “Forcer la barre de défilement et empêcher un reflow au chargement : body{overflow-y: scroll;}”

NB : Chrome et Safari ont des outils géniaux pour se faire une idée également de ce qui se passe pour l’affichage de la page. Voir aussi Firefox Affiliates.

Le reflow est donc une étape relativement longue (compte-tenu de notre échelle). On peut donc garder en tête de veiller à ne pas générer de reflow inutiles.

Les 2 cas fréquents qui déclenchent le reflow alors que cela pourrait être facilement évité :

  • images dans le code HTML sans width / height
  • l’insertion des Flash avec des librairies JS comme swfobject
Painting

= la vue de ce qui est affiché à l’écran

Avant, c’était le processeur qui dessinait tout. De ++ c’est le GPU (Processeur Graphique) (+ puissant pour ces tâches (dont les transformations pour certains navigateurs)

Le JS

Rappel : c’est bloquant (= le parseur s’arrête et télécharge, interprète et exécute le JS avant de continuer)
Depuis deux, trois ans, un parseur secondaire va chercher en parallèle les URL (pour gagner un peu de temps) mais pas plus

Il  y a des opérations JS hyper rapide. par contre, les éléments entres JS et DOM prennent forcément du temps.
Le DOM c’est lent.
Si on demande des dimensions, on déclenche le reflow : faire toutes les demandes de lecture au début et ensuite seulement toutes les écritures.

EX : si on change couleur ou opacité, par exemple, pas de reflow déclenché

Display none libère de la mémoire mais est plus long à remettre en place.
Visibilty hidden : ne libère pas de mémoire mais est ré-affiché plus vite.

Les soirées webperfParis se réorganisent …Lorgnez du côté de https://sites.google.com/a/survol.fr/webperf-user-group/ pour être tenu au courant.
Photo : Prélude

Résumé de mon atelier sur l’argumentation de la gestion de la qualité web

Le résumé de mon atelier “Argumenter en faveur du Responsable qualité web”, fait le 15 octobre à Paris Web 2011, est en ligne …mais pas ici !

Ben oui, avec le lancement de w3qualité (voir w3qualité, un portail pour parler de qualité web), je vais essayer de mettre là-bas tout ce qui concerne la qualité web.

C’est donc là que ça se passe :

Pour ceux qui me suivent pour la qualité web, je vous conseille donc le flux RSS de w3qualité.

“Maman j’ai peur” : atelier Paris-Web pour aider les orateurs (potentiels)

Compte-rendu

Un compte-rendu est disponible sur le site de Paris Web.

Enregistrement sonore

Un enregistrement sonore est disponible sur SoundCloud (merci Yves !) :
Formation orateurs Paris-Web à Cifacom by yvg

Diaporama – 1re partie : “Vos slides”

Diaporama de Virginie : Vos slides

Diaporama – 2e partie : “La prise de parole”

Diaporama sur la prise de parole ; les vues ont été annotées.

Je ne fais pas de résumé de la présentation. S’il ne fallait en retenir que quelques points :

  • Préparez !
  • Soyez conscient de vos points forts, des points positifs (dès maintenant et au moment de passer sur scène)
    • Je me suis préparé
    • Mon sujet intéresse (l’équipe de sélection qui l’a choisi et le public qui est venu)
    • le public est toujours plus bienveillant qu’on peut l’être avec soi-même
    • Toute l’équipe d’organisation est là pour m’aider
    • Telle ou telle personne est dans la salle (et ça m’aide)
    • J’ai vu / écouté / assisté à la préparation Paris-Web “Maman j’ai peur !”
    • Je connais mes points forts
    • J’ai mis des habits dans lesquels je me sens à l’aise
  • Ayez votre message en tête en permanence et faites-le passer
  • Pensez à la respiration qui peut vous aider à tout moment (face au track, au stress, pour reprendre souffle et rester concentré…)

Un peu plus ?

J’avais fait quelques articles sur la prestation orale. Vous trouverez également plein d’autres liens sur Internet ou encore le même atelier, en 2010, tenu par Stéphane Deschamps (là aussi, l’enregistrement sonore est disponible).

Convaincu(e) ?

Vous avez jusqu’au 18 juin pour répondre à l’appel à orateur de Paris Web ! En plus des thématiques chères à Paris Web, un angle d’attaque (totalement facultatif par ailleurs) est proposé : K.I.S.S. ; Keep It Simple …and Smart.

Atelier sur la performance web du 21 avril 2011 – Compte-rendu

Chers débutants en web performance, j’ai testé pour vous l’atelier #webperf. Cela se passait le 21 avril, dans les locaux d’Octo, à Paris. Le but de la soirée était d’échanger autour de différents sites web et de proposer de quoi améliorer leur performance.
Il y avait du haut niveau dans la salle et j’ai donc eu l’occasion de saisir plein de mots, plein de notions à aller explorer.
Voici donc un petit “en vrac” de cette soirée.

_MG_7166

Les outils

Voici une liste des outils qui ont été cités à l’occasion de cette soirée.

WebPageTest.org

www.webpagetest.org

Ancien AOL Page Test (qui lui permet de tester en local)
Je connais WebPageTest depuis quelques temps. Outre qu’il permet de simuler des tests de connexion en affinant les paramètres, il génère aussi des copies d’écran permettant de voir ce que l’internaute voit pendant le chargement. Voilà qui m’intéresse beaucoup.

Firebug

http://getfirebug.com/

Speed Tracer (sous Chrome)

http://code.google.com/intl/fr/webtoolkit/speedtracer/

Speed Tracer à l’avantage de renseigner aussi l’exécution du JavaScript (et pas seulement son chargement)

YSlow

http://developer.yahoo.com/yslow/

Google Page Speed

http://code.google.com/intl/fr/speed/page-speed/

DOM Monster

http://mir.aculo.us/dom-monster/

DOM Monster est un “bookmarklet” qui permet d’avoir de nombreuses informations sur le DOM et son chargement.

Dyna Trace

Dyna Trace permet de faire, sur IE et Firefox, du profiling JavaScript.

Mobitest7

http://www.blaze.io/mobile/

509inc.com

http://509inc.com/

(en beta pour l’instant – Androïd uniquement)

A noter également :
Akamaï donne régulièrement des statistiques par pays sur les connexions (à voir s’il s’agit de moyennes ou de médianes)

http://www.akamai.fr/enfr/stateoftheinternet/

Et bien sûr, le code source de la page (où j’ai pu trouver, moi aussi, une petite opti à faire, ouaiii !)

Les conseils à la volée

Les conseils ci-dessous ne représentent ni la totalité des optimisations à faire sur un site, ni la totalité de ce qui a été dit à la soirée WebPerf. Il s’agit de ce que j’ai réussi à noter et à (plus ou moins) comprendre.
De plus, chacun de ces conseils a été donné dans le contexte d’un site. Comme toujours, il ne s’agit pas de préconisation à appliquer à la lettre, mais ce sont des pistes à valider en fonction de chaque cas.

Images

CSS

  • Ne pas séparer une CSS qui est appelée à chaque fois.
  • Servir les CSS plutôt sur le même domaine que le HTML
  • La CSS pour l’impression n’est pas utile dès le début. La télécharger, via un JS, à la fin (ou la concaténée avec une autre si elle est légère)
  • Se poser la question de la nécessité d’une CSS spécifique pour IE 7. IE 7 étant le navigateur le plus lent de tous, autant ne pas le charger en plus.
  • Dès qu’on utilise des commentaires conditionnels, insérer un commentaire conditionnel vide tout en haut. En effet, l’appel à commentaire conditionnel bloque 100ms.

CSS et JavaScript

  • Mettre CSS et JS en cache
  • Ajuster la durée de vie des CSS et des JS générés

HTML

  • Limiter le plus possible les styles en ligne et les “document.write”

Marqueurs d’audience

  • Réduire la taille de Google Analytics (une astuce permettrait de réduire le code asynchrone ; même si les différences seraient faibles selon certains tests, ça vaut toujours le coup). L’asynchone peut être mis en haut de page.

Serveur

Autres

Je rappelle donc que ces conseils ne sont pas des vérités absolues mais bien des pistes à revoir en fonction du contexte.

Pour se tenir informé des prochains événements webperf_fr :
https://sites.google.com/a/survol.fr/webperf‐user‐group/ (flux RSS disponible)
https://twitter.com/#!/webperf_fr

_MG_7165
Merci www.prelude.me pour les photos (et les réponses, ci-dessous, aux questions auxquelles je ne savais pas répondre !)

« Intégrer l’accessibilité dans une démarche qualité » – Résumé

Introduction

La vidéo de l'interview avec audio-description, sous-titres, langue des signe...
La vidéo de l'interview avec audio-description, sous-titres, langue des signes...

Partons d’un exemple : un intégrateur très motivé doit mettre en ligne une vidéo de deux personnes – Sheldon Cooper et Leonard Hofstadter – en interview. Plein de bonne volonté, il met tout en œuvre pour rendre sa vidéo accessible : transcript, sous-titres, audio-description, langue des signes, etc. Malheureusement, tout ça lui prend beaucoup de temps, la rédaction du transcript est longue et fastidieuse parce qu’il ne comprend pas tous les termes techniques, les sous-titres sont parfois illisibles à cause des textes incrustés à l’écran et la réalisation de la vidéo en langue des signes a été très difficile car il a fait appel à un ami signeur et a dû filmer avec du matériel qui n’est pas adapté.

Résultat : notre intégrateur a le sentiment d’avoir passé beaucoup de temps et dépensé beaucoup d’énergie pour un résultat décevant. Il est totalement découragé et décidera probablement de ne plus prendre en compte l’accessibilité sur les prochaines vidéos.

Comment aurait-il pu éviter cette situation ?

Objectif

Objectifs de la conférence : pourquoi, comment intégrer l'accessibilité dans une démarche qualité
Pourquoi, comment intégrer l'accessibilité dans une démarche qualité

L’objectif de cette conférence est de donner des pistes pour éviter ce type de situation d’échec. Intégrer les problématiques d’accessibilité dans une démarche d’amélioration continue de la qualité nous semble être la bonne solution. Pour cela, voici quatre grands principes à appliquer.

#1 Intégrer l’accessibilité en amont

Principe #1 : intégrer l'accessibilité en amont
Intégrer l'accessibilité en amont

En intégrant les considérations d’accessibilité dès la conception du projet, on s’offre plusieurs avantages :

  • Si vous êtes clients, vous vous assurez d’avoir un prestataire capable de prendre en compte l’accessibilité. De plus, vous envoyez au marché le message que c’est une exigence de plus en plus demandée.
  • Si vous êtes prestataire, cela pourra être un plus, un avantage concurrentiel.
  • Dans tous les cas, vous anticipez ainsi les contraintes techniques liées aux outils et vous pouvez faire vos choix techniques et fonctionnels en connaissance de cause.
  • Et bien sûr, en intégrant l’accessibilité en amont et tout au long des développements, vous gagnerez du temps par rapport à une intégration en mode “rattrapage” en fin de projet.

Comment faire pour intégrer l’accessibilité en amont ?

  • Choisissez une direction. Cela peut-être l’Accessibilité avec un grand “A”, cela peut-être le business, le service, etc.
  • Identifiez les objectifs qui vont servir à aller dans le sens de cette direction.
  • Signalez votre volonté d’accessibilité dans des chartes, cahiers des charges, spécifications, etc. Évitez toutefois le simple paragraphe générique (type « Le site doit être accessible selon le niveau double-A des WCAG »). Il vaut mieux une dilution du message contextualisé dans les différents contenus : des éléments concernant les graphistes dans la charte graphique, des éléments autour de la vidéo dans les spécifications pour la vidéo, etc.

#2 : Avoir un sponsor

Avoir un sponsor pour accompagner l'accessibilité
Avoir un sponsor pour accompagner l'accessibilité

Le sponsor est une personne assez haut-placé dans la hiérarchie qui aura la possibilité de porter l’accessibilité. Il va favoriser les échanges entres les équipes et les services. Son appui motivera l’appropriation collective des pratiques d’accessibilité.

Comment trouver votre sponsor ?

  • Il va d’abord falloir convaincre votre sponsor. (1)
  • Surtout, utilisez des arguments ciblés et adaptés ! Ne parler pas de référencement pour un intranet, par exemple, mais visez bien vos arguments en fonction des objectifs du sponsor.
  • Enfin, le sponsor n’a pas besoin d’être un expert en accessibilité ; ce n’est pas du tout ce qu’on lui demande. Il faut surtout qu’il soit convaincu car on compte sur lui pour rappeler la prise en compte de l’accessibilité et son importance tout au long du ou des projets.

#3 : Répartir les responsabilités

Principe #3 : Répartir l'accessibilité entre tous les intervenants
Répartir les tâches d'accessibilité entre tous les intervenants

Remettez chacun fasse aux responsabilités de son métier ; le graphiste prend en compte les critères graphiques, le contributeur les critères de rédaction, etc. Car la compétence en accessibilité se construit collectivement ; ce n’est pas (uniquement) l’affaire d’un expert.
De plus, les actions en faveur de l’accessibilité sont ainsi réparties en petits lots ; c’est bien plus facile ainsi de la mettre en place.
Chacun étant conscient de ses tâches et de son rôle à jouer, vous favorisez ainsi la naissance d’automatismes et donc favorisez une mise en place durable et naturelle de l’accessibilité dans la production. (C’est ty pas beau, ça ?!)

Comment répartir l’accessibilité entre chaque intervenant ?

  • Sensibilisez chacun par rapport à son métier ; inutile de parler des contrastes des couleurs au développeur. L’idéal, est de fournir à chacun des fiches listant les éléments d’accessibilité qui le concernent. Ne recopier pas simplement les critères tels qu’ils sont formulés, mais faites de vraies fiches explicatives si vous voulez faire passer votre message. (2)
  • Accompagnez vos intervenants le plus possible ; votre objectif est de les convaincre à la fois de l’utilité de l’accessibilité mais aussi que sa mise en place est possible sans gros bouleversements ni perte de temps.
  • Bien sûr, quand cela est possible, faites de la formation et faites suivre des (bonnes) formations.

#4 : Intégrer l’accessibilité en mode amélioration continue

Principe #4 : Gérer l'accessibilité en mode amélioration continue
Gérer l'accessibilité en mode amélioration continue

Le principe de l’amélioration continue est d’échelonner les tâches en cycles itératifs. En matière d’accessibilité numérique, tout ne peux pas être traité d’un coup et rester pérenne dans la vie du site. Les éléments d’accessibilité se perdent s’ils n’ont pas été intégrés dans les processus de production.

De plus, les cycles itératifs permettent de mesurer les progrès entres deux mises en lignes importantes.

Comment intégrer l’accessibilité dans un cycle d’amélioration continue ?

  • Surtout, ne présentez pas l’accessibilité comme un monobloc à passer en force. Pensez toujours en terme de multi-touches que vous allez organiser, prioriser, répartir.
  • N’attendez donc pas une version parfaite pour mettre en ligne mais faites les concessions nécessaires (par rapport à la réalité du terrain : temps, compétences, etc.), améliorez (processus, formation, code) et faites une nouvelle mise en ligne. Puis …recommencez (améliorations > mise en ligne > améliorations > …) !
  • Faites des audits entre deux mises en ligne importantes et communiquez sur les résultats. Vous envoyer ainsi un retour aux différents intervenants qui font des efforts en matière d’accessibilité et vous envoyer aux décideurs le message que des progrès sont faits, sans prise de temps conséquente.

En résumé

Vous venez de mettre en place un processus d’accessibilité en démarche qualité car :

  • Vous vous êtes fixé, en amont, une direction, des objectifs pour la servir et des critères – objectifs et mesurables – pour y parvenir.
  • Vous avez assuré l’implication des différents intervenants grâce à votre sponsor et à la montée en compétences.
  • Vous avez mis en place un cycle itératif d’amélioration continue.

(1) : L’objet de notre intervention ne portant pas là-dessus, nous ne nous sommes pas penchés sur les arguments pour convaincre. Cela pourrait d’ailleurs faire l’objet d’une conférence à part entière …Qui la fait quand et où ?! 😀 [Retour]

(2) : Voici deux exemples montrant à quoi ces fiches peuvent ressembler : Exemple de fiche accessibilité pour webdesigner et contributeur (PDF, 400 Ko)
(Nota bene : le PDF n’est pas encore balisé, oui, c’est une honte, mais comme ça je sors le résumé le plus rapidement possible et j’améliore ensuite 😉 !) [Retour]

Merci beaucoup à Sébastien d’avoir présenté cette conférence avec moi et d’y avoir apporté toute son expertise et son expérience en matière d’accessibilité.

Merci au W3Café pour l’organisation de cette journée accessibilité. Vivement les prochains événements !

D’autres que moi en parlent :

Diaporama

5ème Forum Européen de l’Accessibilité Numérique – Compte-rendu

En résumé

D’un point de vue global, la 5ème édition du Forum Européen de l’Accessibilité Numérique (FEAN) était un bon cru.
Si, effectivement, les experts peuvent être déçus de ne plus y apprendre grand chose, on peut se poser la question de qui est réellement le public. Une problématique qui revient sur certaines conférences d’évangélisation : le public des convaincus vient là où il faut réussir à amener le public à convaincre.
Avec une thématique “Coûts et bénéfices” et des présentations d’outils, j’étais venu y chercher de l’argumentaire et de la méthodologie. Comme souvent, j’ai été déçue de ne pas y trouver plus de concret (par contre, on a été servi en bla-bla politique et en bla-bla commercial !). Malgré tout, j’en retiens pas mal d’informations intéressantes.

Si je devais résumer les messages les plus fréquents de la journée :

  • prendre en compte l’accessibilité dès la conception
  • la formation est la clé (former les intervenants pour que chacun intègre les briques d’accessibilité propre à son niveau et ait une vision globale des briques des autres)
  • les états et les lois ont leur rôle à jouer pour accompagner et convaincre

On n’a pas contre entendu assez à mon goût (mais on l’a entendu !) l’idée de l’accessibilité comme utile à tous et non pas à un public en particulier. Non, l’accessibilité ce n’est pas pour les handicapés !

Puisque j’ai évoqué le discours politique, rappelons tout de même que le décret d’application de la loi de février 2005 a été mis en application en mai 2009 et qu’il ne reste donc que quelques mois aux organismes publics pour mettre le site en conformité avec les règles d’accessibilité.

Mise à jour 19/05/2011 : les actes du colloques sont en ligne. J’en ai profité pour ajouter les liens vers les diaporama.
Voir aussi les vidéos Braillenet.

Notes

Sébastien Delorme, Atalan
L’accessibilité au service du e-recrutement

Pourquoi se préoccuper de l’accessibilité du e-recrutement :

  • cohérence avec les valeurs et la politique sociale de l’entreprise
  • audience élargie
  • respect de la réglementation (6% des effectifs)

Une méthode qui peut s’appliquer à un site de e-recrutement …comme à beaucoup d’autres :

  • signaler dès le cahier des charges la volonté d’accessibilité
  • si on pense utiliser un CMS, voir sur quoi on a la main et choisir son prestataire en fonction de ce qu’on pourra faire de l’outil
  • accompagnement de l’expert accessibilité tout au long du développement
  • recette et liste des points à traiter pour une montée de version
  • formation des rédacteurs et des administrateurs en fonction de leur profil et de leur champ d’intervention

Diaporama, PDF et résumé

Donal Rice, Autorité Nationale du Handicap (Irlande)
Keynote : Usage des TIC pour l’éducation inclusive : coûts et bénéfices

Cette présentation a l’avantage d’avoir présenté des coûts et des bénéfices mais aussi des outils et des exemple concrets de l’accessibilité.

10 à 12% de la population mondiale est en situation de handicap et ce chiffre va augmenter.

Si on estime que l’éducation d’un enfant avec des besoins spécifiques prend 2 à 4 fois plus de temps, une étude montre aussi que le coût de la non-intégration de la population handicapée à la vie sociale et au monde du travail s’élève à 35,8% du PIB d’un pays (Chiffre : UNESCO, Europe centrale et Indonésie)

Diaporama de D. Rice (PDF)

SNCF
La politique du groupe SNCF en matière d’accessibilité du Web

La SNCF a présenté certains de ces sites et à apportés des témoignages sur leur mise en place de l’accessibilité. Dans l’ensemble, il s’agissait surtout de présenter un site en 5 minutes et de dire “à telle date on a fait ça et c’est mieux”.
La SNCF a toutefois été félicitée par le président de la Fédération des Aveugles et Handicapés visuels de France pour leurs efforts et leurs actions.

A noter : la SNCF utilise Safeguard comme outil de remontées des erreurs d’accessibilité. Un outil que je ne connais pas.

Diaporama de la SNCF (PPT)

James Odeck (The Norwegian University of Science and Technology, and Norwegian Public Roads Administration
Kenote : Évaluation économique de la conception pour touts dans les transports : l’expérience norvégienne et son application dans les TIC

L’intervention de James Odeck était particulièrement intéressante et concrète. Même si ici l’accessibilité n’était pas numérique, cette présentation nous remet en tête un principe majeur que l’on doit transmettre et re-transmettre : l’accessibilité permet de couvrir des besoins d’une population spécifiques mais les mesures mises en place sont bénéfiques à tous.

L’exemple très concret pris était la mise en place d’une entrée de plain-pied dans les bus. Sans même parler du côté agréable pour tout le monde (à pied et sans charge), cette entrée permet aux fauteuils mais également aux poussettes ou aux valises à roulettes de rentrer facilement. Le temps gagné pour cet accès facilité profite à tous (temps de “chargement” et temps du parcourt au global), etc.

Angeetdemon75 sur Twitter : très intéressant ce norvégien : accessibilité utile pour tous et non pour les handicapés… Et oui c bien de ne pas l oublier

Pensez à tous ces usages du quotidien indispensable à un public handicapé et dont vous ne voudriez pas vous passer : ascenseurs, escalators, télécommande…

Ronald Schild
Keynote : La numérisation des livres : une situation gagnant-gagnant pour les usagers handicapés et les éditeurs

sebsol sur Twitter : DRM kill accessibility. Another reason to drop it

Nissone sur Twitter : L’ebook va avoir recours à la séparation contenu/forme. …ben, fallait nous demandé, on vous l’aurait dit 😀

Diaporama de R. Schild (PPTx)

Thomas Logan, HiSoftware
Comment les outils de vérification de conformité peuvent améliorer la qualité et réduire le cycle de développement

HiSoftware présentait entres-autres leur outil Compliant Sheriff (que je ne connais pas plus que Safeguard)

Diaporama de T. Logan (PPTx)

Matthieu Faure, Open-S
Audit d’accessibilité : comment repousser les limites de l’automatisation ?

sanvin sur Twitter : #tanaguru : y’a quelques trucs vraiment bon, automatiser plus certains tests…

notabene sur Twitter : Légère mauvaise foi de @mfaure quand même des fois

Diaporama de M. Faure (PDF)

Jean-Marie D’Amour, Institut Nazareth et Louis-Braille
Réduire le coût tout ua long de la chaîne de production

Si une partie de la conférence de Jean-Marie D’Amour m’a déçue, c’est parce su elle me renvoyais a mon vécu. Autant cela fait toujours du bien de voir qu’on est pas tout seul, autant j’étais vraiment venue chercher de l’argumentaire.
Je retiens tout de même les solutions avancées :

  • le partage des responsabilités
    Voir par exemple : Accessibilité Web > Répartition > WCAG 2.0
  • la formation en fonction des profils, des métiers, des taches
  • l’accompagnement
  • et aussi la démonstration : rien de tel, dit-il, qu’un aveugle faisant une démonstration pour faire comprendre.
notabene sur Twitter : distribution des tâches et formation ciblée ça doit être dit et redit

Olivier Nourry, Micropole et Jean-Pierre Villain, Qelios
Optimiser l’intervention experte dans un projet web

Voilà une conférence dont je suis pressée de récupérer le support de présentation (1).
Olivier Nourry soulève en autre un point particulièrement pertinent : il ne faut pas confondre l’expert accessibilité et l’expert en évaluation. L’expert en évaluation intervient au moment d’auditer le site et son expertise est arbitrée par le référentiel. L’expert accessibilité intervient sur la globalité du projet. S’il ne faut pas le confondre avec les différents intervenants, il est là pour former et accompagner chacun sur son étape du projet. Son intervention se prolonge par du support en continu (e-mail, téléphone, etc.)

notabene sur Twitter : Différencier expert en accessibilité et expert en évaluation. Ouf, enfin.
(1) Mise à jour :
Le support de présentation est disponible : Optimiser l’intervention d’un expert accessibilité (Retour)

Élie Sloïm, Temesis
Industrialiser l’accessibilité d’un parc de sites

Ou comment un audit rapide sur un parc complet avec Opquast Reporting permet de se faire une idée rapide et de prendre des décisions globales.

PatriceBTwit sur Twitter : @ElieSl vient de présenter une approche de type évaluation heuristique pour l’accessibilité

Cynthia Waddell, International Center for Disability Ressources on the Internet
keynote : Poursuites juridiques pour défaut d’accessibilité aux USA

Ou comment des exemples de poursuites aux États-Unis peuvent nous alerter sur ce qui peut arriver en France.

N’oublions pas que les associations n’attendrons pas pour réagir et que la politique d’un organisme d’état et d’une entreprise peut être très rapidement commentée et diffusée en matière d’accessibilité numérique (en bien comme en mal).

Diaporam de C. Waddell (PPTx)

Outils

Je retiens aussi que du côté des outils, il y a pas mal de choses que je devrais creuser. Si jamais vous avez déjà des retours d’expérience…)

Les outils cités :

  • Safeguard
  • Opquast
  • Tanaguru
  • Compliant Sheriff

(et curieusement, pas Ocawa)

L’UX et la marque – UX Paris

Avant-hier, j’étais à ma deuxième conférence UX Paris.
UX Paris est une initiative bénévole ayant pour but de faire connaître l’UX (c’est-à-dire l’expérience utilisateur) en France et favoriser les échanges autour du sujet.

La première que j’avais vu était sur le Design Thinking (par Benjamin Servet). Mais avant-hier, le sujet était sur les relations entre l’expérience utilisateur et la marque (15 février 2011 : Rémy Bourganel sur l’UX et la marque).

L'UX et la marque

Le propos était de montrer que les réflexions des concepteurs et designers doivent fortement prendre en compte la marque, son image, son ADN.

La conférence était fortement conceptuelle et j’avoue être restée parfois un peu sur le bord de la route. Néanmoins, Rémy Bourganel (R&D chez Orange et enseignant aux Arts Déco) nous amenait à penser les usages avec un œil neuf, à imaginer les interfaces enrichies de ponts entre les marques, les terminaux, etc. en ayant toujours en tête ce qui fait l’identité de la marque et comment, à partir de cette identité, présenter des nouvelles expériences. Quelques exemples en vrac ?

  • imaginez un partenariat entre une enseigne de sport familiale et une société d’assurance : une application à porter sur soi enverrait des infos sur notre activité sportive et la société d’assurance adapterait ses tarifs en fonction.
  • imaginez envoyer un “gong” avec géolocalisation et un message “Je pense à toi” à la place de la traditionnelle carte postale
  • imaginez une interface représentant votre cercle d’amis sous forme de personnages répartis dans un paysage en fonction de votre degré d’interaction avec eux. Les personnages se manifestant de différentes façon quand ils sont porteur d’un ou plusieurs SMS, messages vocal, etc.
    (prototypé chez Nokia, une version a été commercialisée l’année dernière en Asie)

Le but étant de présenter une expérience plus riche et plus structurante dans la relation usager/marque que la traditionnelle petite histoire de 30′ secondes pendant la coupure pub de la télé.

Ce type de démarche nécessite bien-sûr un fort investissement (temps, énergie, argent, disponibilité) en R&D. La multiplication de prototypage est un facteur constructif dans cette démarche mais cela ne doit pas être le seul axe.
Apple, par exemple, fait énormément de prototypage mais regarde également ce qui se fait ailleurs et rachète les innovations qui peuvent les intéresser et qui corresponde à leur identité, à ce qu’ils veulent véhiculer de leur image.

Voilà ce que j’ai pu en ressortir. La conférence, de ce que j’ai pu en voir, a eu un franc succès.

Photo : mauricesvay (CC BY-SA 2.0)

Design Thinking – UX Paris

benjamin-servetDesign Thinking
Benjamin Servet – nealite
UX Paris – 24 novembre 2010

UX Paris est une initiative bénévole dont la vocation s’anime autour de la démarche centrée utilisateur. Entres-autres choses, UX Paris organise des conférences et celle du 24 novembre 2010, sponsorisée par Paris-Web, portait sur le Design Thinking.

A cette occasion, Benjamin Servet de l’agence nealite, est venu présenter sa vision du Design Thinking.
La méthodologie étant facilement trouvable dans les livres, Benjamin Servet a voulu se concentrer plutôt sur la présentation des principes importants :

  • La culture à insuffler
  • Brainstorming et observation
  • Prototype et tests

Définition

Définir Design Thinking n’était pas l’objet de la conférence et, quand la question de la traduction du terme a été posé, Benjamin Servet a avoué n’avoir pas su trouver de moyen de le traduire en français.

Benjamin a notamment rappelé que le terme “design” ne fait pas référence à l’artistique et qu’on pourrait plutôt le voir dans le sens de “dessein“. Le design est en fait apparu avec l’industrialisation dès lors qu’il fallait concevoir ou accompagner un produit, quel qu’il soit (objet, mise en page, etc.)

Le design thinking, c’est plus un groupe, une culture commune qu’une esthétique. Le hasard et l’expérimental y sont favorisés et le tout est centré sur l’expérience utilisateur. Cette réflexion globale (fonctionnelle et esthétique) est présente à chaque étape de la conception.

Design Thinking sur Wikipédia

Historique

D’abord, un web consultatif, puis, autour de ce qu’on a appelé le web 2.0, un web participatif.
Maintenant, le web se conçoit dans la mobilité (partout, tout le temps).

En parallèle, les attendes des utilisateurs ont donc changés. Dans la catégorie “besoin”, il y a l’info et le produit. C’est avec la catégorie des “plus” qu’un annonceur pourra faire une différence :  sur les services et l’expérience.
Cette différenciation en enrichissant services et expérience doit se faire en parallèle d’un univers de plus en plus complexe : le client-annonceur ne sait plus ce qu’il doit faire avec les réseaux sociaux et la multiplicité des plateformes.

Méthodologie

C’est une méthodologie du collectif et du collaboratif : les équipes doivent être multi-disciplinaires.

Tout comme dans le théâtre classique, elle répond à la règle “unité de lieu, de temps, d’action“.
Une pièce unique est consacrée au projet. Tous les livrables (post-it, brouillon, idées) y sont accrochés en permanence et à disposition de chaque membre de l’équipe. Le tout est “à plat” (et non, comme sur un ordinateur, consultable élément par élément).
Le temps est prédéfini et doit contribuer à la notion d’urgence. Il n’y a pas de travail en cascade (chaque spécialité après l’autre) mais une action commune pour garantir l’energie de l’ensemble et l’unité.

Conseils

“Arrêtez de faire des “produits””.
Les équipes sont compartimentées et chacun fait son application iPhone – par exemple – de son côté.
Il en découle un manque de fluidité entre les appli, par exemple.

Observation

Observer les utilisateurs, l’environnement, les usages. Exemple : aller voir le comportement des usagers en magasins pour penser un site de vente en ligne.
(bien-sûr, la réflexion peut aussi se passer hors du contexte)

Brainstorming

7 à 8 personnes, sans chef, mais avec un animateur (sans niveau hiérarchique, donc). Il n’y a pas de mauvaises idées. Le but est de produire 100 idées en une heure.
Ensuite, regrouper les idées ensemble pour en extraire, les trier, les côter. Structurer en fonction de l’objectif.
Reboucler ensuite sur un deuxième brainstorming avec ce nouveau groupe d’idées.

Prototype

Faire des prototypes dès le début des tests (quite à ce qu’ils soient moches et mal faits)
Des équipes utilisent par exemple des post-it collés sur un écran d’iPhone en guise de prototype : il n’y a ni perte de temps ni perte d’énergie à créer le support et l’énergie reste concentrée sur l’idée et l’avancement.

Conclusion

La conclusion de Benjamin Servet est que la culture de l’expérience utilisateur reste encore à insuffler au sein de nos entreprises pour faire émerger des départements dédiés.

Son tweeter : @benjaminservet
Photo : mauricesvay CC BY-SA 2.0