Retour sur la conférence Paris Web 2016

Paris Web c’est quoi ?

C’est une association qui œuvre pour rassembler « les gens qui font le web » comme ils aiment le dire ! Mais ça veut dire quoi ? En fait, c’est un rassemblement qui a lieu une fois par an où durant quelques jours les professionnels de l’informatique mais plus exactement du web se réunissent et parlent sur leur quotidien de professionnel. On y retrouve des développeurs, des designers, des ergonomes (mes préférés) et des curieux du web !

Dans une ambiance crazy entre licornes, kilt, cheveux bleux et photobombing, nous avons commencé ce marathon de connaissances.

Les sujets à la mode cette année ont été :

• La sécurité des données personnelles récoltées sur le web
• L’accessibilité numérique

Ouverture de 3 jours de folis avec la surveillance sur le web….

Nom de la conférence : Anatomie d’une désintoxication au web sous surveillance

C’est donc avec Thibault Jouannic que l’on ouvre Paris Web 2016, son sujet : « Anatomie d’une désintoxication au web sous surveillance ». On y apprend que nos données sont enregistrées plus ou moins à notre insu (ça on le savait hein !). Mais il nous apprend aussi comment voir plus précisément l’impact de cet enregistrement de nos données via l’application Light Beam (https://www.mozilla.org/fr/lightbeam/).

Le problème c’est que tout le monde ne sait pas trouver ou éviter les pièges de la récolte d’information. C’est pour cela que la première étape pour se protéger est de penser utilisateurs – qui ne lisent jamais les conditions d’utilisation – donc les accompagner en prédéfinissant lors des spécifications fonctionnelles :

• quelles données sont pertinentes à enregistrer, est-ce bien intéressant de savoir quelle est votre date de naissance ou bien votre sexe ?
• et comment bien les stocker, peut-on mettre au même endroit votre adresse postale et vos tendances sexuelles ?
• proposer la non-conservation des données afin de protéger vos utilisateurs
• crypter les données, s’il y a stockage
• et respecter la loi, tout simplement !

Nom de la conférence : Y a pas d’avancement, pas de grimaces !

Continuons notre épopée avec Thomas Gasc qui nous parle de la refonte du site médiapart. Ils étaient confrontés à des problèmes de sécurité car il n’était pas possible que tout le site internet soit en https ce qui posait un problème de réassurance au moment du paiement. Mais après des tests utilisateurs, ils ont trouvé que les utilisateurs étaient rassurés à partir du moment où il était écrit que le paiement était sécurisé. Le marquer c’est rassurer !

Puis ils ont continué avec le tunnel de paiement en :

• ajoutant de nouveaux types de paiement
• l’information sur les délais de paiement
• simplifier le champs d’adresse, ben oui sur une enveloppe papier c’est juste un carré blanc alors pourquoi avoir un champ pour le numéro, un pour le bâtiment, un pour le nom de la rue, un pour le numéro de rue, un pour le code postal, etc. ?
• éviter de faire sortir vos utilisateurs, ils sont buggés !!! S’ils voient un champ, ils veulent le remplir donc si vous leur donnez la possibilité de mettre un code promo, ils vont aller le chercher ailleurs et hop perte de l’achat. Il faut privilégier la check box et si elle est cochée on affiche le champ à remplir 😉
• on continue avec la création d’un compte client. Ben non laissons les ne pas en créer de toutes les manières ont a toutes les informations que l’on souhaitait 🙂

Une fois que vous avez gagné des points de conversions, il est nécessaire de travailler sur le taux de retour. Et oui la commande faite, ne laissez pas l’utilisateur sur sa fin avec un message disant « merci votre commande a bien été prise en compte ». Non non non surtout pas, car c’est à ce moment là que tout se passe, que tout se joue ! Il faut bichonner ses clients et leurs donner plus d’informations. Ok ta commande a bien été prise en compte, mais voilà ce qu’il va se passer : 1. Empacter, 2. Envoie à la poste, 3. Blabla, 4. Blabla Puis tu vas recevoir un mail lors de l’envoie etc. Mais avant de partir vient découvrir nos arrivages 😉 Bref la vie ne s’arrête pas après l’achat !

Nom de la conférence : lancer son site à l’international facile ? Oui, si l’on pense à tout !

Passons à l’internationale avec Aurélie Guillaume, développeuse, qui nous fait son retour d’expérience sur son développement de site à l’international. Voici les pièges à éviter :

Les dates

Dans site e-commerce, la date et l’heure sont importées, pour envoyer les colis par exemple. Mais les dates changent en fonction des pays et de où l’on se trouve.

• Il faut tenir compte de la norme : ISO8601 et UTC pour automatiser le changement d’heure
• Attention certains pays on plusieurs timezones….
• Et surtout si vous avez des actions dépendantes de l’heure comme des concours ou vente flash, faites-y attention ^^
• Et il vous faudra gérer l’heure d’été et d’hiver et oui ce n’est pas normé ni bloqué, les pays font ce qu’ils veulent et il y a encore des guerres !

Les formulaires

• Tout le monde connaît le captcha gratuit de google, celui qui est accessible « I am not a robot ». Ben si vous le choisissez pour votre site internet car c’est bien pratique sachez qu’en Chine tous les captcha sont interdits donc plus de sécurisation ^^
• Attention, dans les pays asiatiques, les prénoms peuvent tenir sur 1 idéogramme du coup si vous bloquez le label nom ou prénom à plus de 2 caractères pour qu’ils soient valides alors vos utilisateurs asiatiques ne pourront pas se connecter

SEO

• Google n’est pas le moteur de recherche n°1 partout
• Dans beaucoup de cas se connecter avec Facebook est une obligation or dans certains pays les réseaux sociaux sont payants et tous ne sont pas existants.
• CDN : Pour ne pas avoir à déployer un serveur par pays (TATA, Akamai, Amazon)
• Duplicate content pour les langues communes & rel=cononical

Et la loi dans tout ça

• Si vous développer en Chine vous devez automatiquement avoir un serveur physiquement implémenté en Chine,
• On ne peut pas tout vendre de partout à n’importe qui, la majorité change en fonction des pays par exemple !

Nom de la conférence : Web Security by design

C’est le moment sécurité avec Jérémie Bourdin et Benjamin Leroux.

Ça commence bien avec la faille de sécurité de Yahoo en 2014 ou Linkedin avec +100 millions de comptes piratés et +300 000 mots de passe, ou encore chez Castorama avec le hacker du dimanche qui a lancé un script sur l’auto complétion (ex « scie tonton tonton »).

Mais un nouveau règlement est rentré en vigueur celui de GDPR (EU Général Protection Regulation), donc un nouveau texte européen qui convient à tout le monde. Une mise en conformité de 2 ans. La nouveauté : la responsabilité des données à caractères personnelles, une entreprise doit se poser la question de comment protéger ses données et le démontrer si audit il y a (-> privacy by design). Si l’entreprise n’y a pas prêté attention alors elle sera pénalisée.

Quelques mauvaises pratiques

S’il y a de mauvais designs, il faut se demander quels sont les risques auxquels mon projet va être exposé et quelles sont les solutions possibles. Si on n’y pense pas alors cela peut avoir de grosses conséquences sur la résolution du problème ou sur la maintenabilité… Des exemples :

• Le contrôle des données en entrées
• Un mauvais usage du chiffrement, parfois les mdp sont en durs dans le code
• L’absence de Framework
• Secret en dur dans le code
• Manque de logs car s’il y en a c’est plus facile de voir où est la faille
• Système d’authentification faillible
• Hétérogénéité des environnements
• Silos entre architecture et dev quelle équipe a pensé à la protection ?

Si vous êtes curieux, vérifier le code d’un drone ahahah

Aujourd’hui, les problèmes sont essentiellement dus au time to market, sortir rapidement un produit, où encore personne n’a de sensibilisation à la sécurité avec de mauvaises pratiques de développement.

Mais que doit-on faire ?

Premièrement, la sécurité n’est une histoire d’anti-virus !

C’est une étape transversale qui doit être injectée à chaque moment du projet. Les fondamentaux :

• Faire attention à la disponibilité, il faut que le site soit disponible tout le temps en continue
• Puis la confidentialité, il faut que je protège les données, les mots de passe et autres
• L’intégrité, si j’ai un 0 dans une case il ne faut pas que ça devienne un 1
• La traçabilité ou auditabilité : comment puis-je m’assurer de ce qu’il se passe au sein d’un système

La sécurité ça s’apprend ! Par exemple avec OWASP qui produit des fiches pratiques et surtout un palmarès sur les 10 vulnérabilités les plus fréquentes sur les sites web et aussi Open SAMM qui vous permettra de connaître votre niveau de sécurité et de l’améliorer.

Pour aller plus loin :

• Capitaliser sur un Framework
• Construire sa boite à outils au fur et à mesure
• Capitaliser entre les projets

Jour 2

Nom de la conférence : L’accessibilité décomplexée ce qu’elle veut faire de vous

Nicolas Hoffmann nous présente son point de vue sur l’accessibilité.

Ce mot est très à la mode… « décomplexée » et pas « accessibilité » ! L’objectif est de partager des réflexions sur cette problématique. J’ai commencé à mettre en place des outils, bonnes pratiques, parce que mon premier réflexe était de rejeter l’erreur sur mes collègues autour de moi, mais en fait cela ne sert à rien !

Le tout est de parler avant de critiquer.

Le dernier stagiaire que j’ai eu m’a demandé mais pourquoi devons nous faire de l’accessibilité ? Je lui ai répondu pour tous. Puis je lui ai fais une démonstration sur un site. Evidemment il n’y avait pas de mise en place de l’accessibilité donc j’ai fait une démonstration négative…. Et mon stagiaire n’avait pas l’air hyper motivé à travailler dessus. J’avais fait un ancrage négatif ! Je lui avais montré que l’accessibilité c’est le produit qui ne fonctionne pas !

Pour le suivant, j’ai décidé de lui expliquer qu’en accessibilité on a plein de nouveaux outils que l’on n’a pas l’habitude d’utiliser, zoom 200%, lecteurs d’écran etc. J’ai observé un effet inverse, mon stagiaire était excité de connaître et découvrir de nouveaux outils. Puis en lui montrant un effet avant et après j’ai pu lui montrer les points positifs de l’accessibilité !

Après quelques années d’expérience, l’accessibilité m’a permis de retravailler et de perfectionner mes compétences, hé bien oui car elle est transversale.

L’accessibilité s’écrit A11Y (car entre le A et le Y, il y a 11 lettres J) Du coup en retravaillant les plug-in j’ai pu créer Vani11y où vous y trouverez plein de trucs accessibles !

https://van11y.net/

Nom de la conférence : Le kit de survie

Emeline Racon raconte son expérience des focus group.

Après des échecs au début de son parcours en ergonomie, un atelier de jeux de carte avec des militaires qui sont partis car trop puéril pour eux ou encore un atelier de dessin qui ne fonctionne pas, elle a du trouver une solution pour éviter que ces cas se présentent à nouveau.

La solution est de prévoir un kit de survie, qui comporte 4 objectifs :

• Se protéger = anticiper plus les ateliers, quel type de personnes je vais rencontrer, identifier les décideurs, bien comprendre le contexte

Service design toolkit me permet de mieux le travailler.

Elle utilise l’atelier du drawToast comme icebreaker, l’idée est de modéliser la manière dont un toaster fonctionne et de créer la synergie.

Voici le toolkit de la speaker :

• Alerter et communiquer = il faut expliquer, répéter mais aussi écouter et laisser parler les participants et surtout bien restituer la démarche
• S’hydrater
• Se nourrir, aller chercher des ressources pour rester actifs = assister et participer à d’autres ateliers et établir un feedback

Nom de la conférence : Progressive web apps : le futur du web arrive

Hubert Slabonnière nous raconte son voyage au ski…. Pour savoir à quels sont les moments plus pertinents pour utiliser un mobile ou un ordinateur.

Tout ça pour dire que lorsque l’utilisation est fréquente, il va préférer une application native comme pour la banque par exemple, alors que si son utilisation est plus ponctuelle il va préférer utiliser le web et ne pas installer l’application native comme par exemple Doodle.

Le problème de l’application c’est que l’on n’a pas d’urls donc difficile de partage à une personne qui ne l’a pas… « L’URLs, c’est la vie » !  Aujourd’hui il y a plus de visiteurs uniques sur web mobile que sur des app et quand on regarde les chiffres d’app téléchargés par mois et par visiteurs on prend peur ! Par exemple en Chine, les habitants se partagent des clés usb avec les app car c’est trop long à télécharger….

Les 5 piliers à travailler :

• Il faut que ce soit linkable
• Responsive aussi
• Safe, lorsque l’on utilise une app native comment peut-on savoir si c’est sécurisé ???
• Connectivity indépendance, oui mais il ne faut pas oublier que les prochains millions d’internautes sont en Afrique, en Asie donc il faut penser au hors connexion

A ce moment là vous pouvez faire un service worker en JS #&@%$`£#§ blablaaaa bref c’était visiblement un moment ultra intéressant pour le dev mais j’ai rien compris 😉

-> par la il y a de l’information https://developer.mozilla.org/fr/docs/Web/API/Service_Worker_API

• Architecture
• Ré-engageable, amener l’utilisateur à continuer à interagir avec votre app. On garde les push !!

WCAG nest – where do we go from here ?

Le gourou de l’accessibilité John Foliot nous en parle !

La WCAG date de 1999, à l’époque il y avait 14 recommandations et uniquement 65 points de contrôle. L’approche était vraiment superficielle et le texte était vraiment très rigide (quand j’écris ces mots j’ai l’impression qu’il parle d’aujourd’hui). Avec la nouvelle version, l’objectif est de demander aux lecteurs de réfléchir à qu’est-ce que l’accessibilité.

4 principes :

• Contenu perçu par l’utilisateur
• Manipulation de ce contenu
• Compréhensibilité du contenu
• Et la robustesse

Aujourd’hui ces 4 piliers sont toujours présents.

On a continué avec d’autres standards comme l’UAAG, qui concerne principalement les navigateurs.

En décembre 2015, on a sorti des règles pour les outils de création de contenu (ATAG 2.0).

Puis en 2016, on sait qu’on ne fait plus des pages web mais des appli web et ça entraîne une obsolescence, des manquements par rapport aux usages.  Avec la WCAG 2.0, la UAAG 2.0 et ATAG 2.0 on peut traiter tous ces problèmes.

Il y a d’autres failles telles que celles au niveau de la prise en compte totale des handicaps.

C’est pour cela que l’on va faire un nouveau standard AG (accessibility guidelines). Appelé processus silver en tenant compte de plusieurs étapes :

• Ajouter toutes les perspectives dans le process
• Communiquer nos efforts et notre travail
• Faciliter et ouvrir les moyens de communication
• Utiliser des datas pour construire nos règles
• Etudier le périmètre application
• Établir des étapes claires

4 approches possibles pour le projet Silver :

• L’option de l’approche par la recherche et projet de design
• Option sur le progrès plus rapide, faire des choses de manière itérative avec des cycles courts
• L’option avec la plus grande flexibilité, mais on a pas encore pu la préciser
• L’approche la moins chère en reprenant ce que l’on a déjà et essayer de l’optimiser

Aujourd’hui nous ne savons pas quelle option choisir.

Notre feuille de route est planifiée sur 5 à 7 ans pour mettre en place cette nouvelle version de l’accessibilité. Mais on ne peut pas attendre tout ce temps pour mettre à jour les versions WCAG. Nous allons faire en sorte que la 2.1 reste stable et n’impacte pas les modifs encourues par la version 2.0. Dans la version 2.1, on va beaucoup travailler sur la testabilité de la conformité.

On va avoir de nouvelles recommandations, comme par exemple celle de la manipulation du téléphone : « when device manipulation gestures are provided, a mechanism is available to operate these functions via touch, except where the underlying function requires input that cannot be provided through the touch interface, e.g. step count data, barometric pressure (level AA).

Use case :

• Shake to undo. A user with a tablet attached to a wheelchair need a way to undo that does not involve shaking.
• (exception) step couting app or GPS would not need an alternative input because this data does not come directly from the user, it is integral to the device. »

D’autres critères déjà existants vont aussi évoluer, comme celui du 1.4.3 sur le contraste minimum. Nous souhaitons faire évoluer ce critères afin qu’il ne touche pas uniquement la police mais aussi les icônes.

Alors aujourd’hui, à l’heure qu’il est nous avons 50 nouvelles propositions de critères. On se pose vraiment la question de savoir comment les sociétés vont pouvoir les prendre en charge.

Next step : 2.1 Q1 2018 et on va essayer d’avoir une périodicité de 2 ans.

Il est temps que l’on rejoigne l’équipe officiellement :

https://www.w3.org/WAI/GL.participation.html

GitHub : https://github.com/w3c/wcag21/issues

Email : w3c-wai-ig@w3.org

Section 508

https://www.w3.org/WAI/GL/wiki/Desigining_Silver

Autrement j’ai gagné un livre parce que ma question était pertinente ^^ Oui j’ai pensé à l’équipe, parce qu’il sous-entendait que beaucoup de critères AAA allaient passer en AA … Au secours … Du coup, je lui ai demandé si les prochaines versions allaient prendre en compte la complexité des projets car sur tous les projets complexes on ne peut pas faire du AAA. Sa réponse fut oui (ouf) et que nous devions prendre contact pour en parler et rejoindre les équipes de travail.

Et j’ai fait ma groupie aussi avec M. accessibilité.

Nom de la conférence : Atelier troubles de l’attention

TDHA avec ou sans hyperactivité

Trois fois plus d’hommes sont touchés par des troubles de l’attention par rapport aux femmes, une des hypothèses est sociale ou bien on sait qu’il y a des facteurs génétiques mais on ne sait pas s’ils sont dépendants des chromosomes du genre.

Symptômes :

• inattention et distraction
• tendance à ne pas obéir aux consignes, les personnes en souffrant doivent comprendre le but de la tâche pour la réaliser, si ce n’est pas clair pour elles alors elles ne vont pas le faire, ce qui est souvent le cas chez les enfants,
• difficultés à organiser ses travaux et son temps, dans cet handicap la notion de temps se perd, une personne peut passer des heures sur une petite activité
• difficultés d’apprentissage de tâches qui demandent un effort mental, ce n’est pas une limitation intellectuel mais la personne va passer tellement de temps à trouver d’autres idées quelles va perdre courage
• perte d’objets fréquents, perte de données, informations, problème de mémoire à court terme.
• difficulté dans des discussions

L’inattention c’est quoi :

• être désorganisé,
• perte de l’attention,
• difficultés pour prêter attention aux détails, multiplie les erreurs d’inattention
• débit de parole souvent rapide
• difficultés à suivre un sujet unique
• capacité à oublier les activités
• distraction élevée aux bruits et événements

En bref, on peut tous à un moment ou à un autre avoir ces symptômes, mais le handicap est avéré si les symptômes sont observés plus de 6 mois.

Il y a beaucoup de co-morbidité, troubles :

• oppositionnels (30 à 50%)
• de conduites (25%)
• anxieux
• de la motricité
• du sommeil
• de l’élocution de l’apprentissage
• dysrégulation émotionnelle

Chez ces personnes le bruit est vecteur de concentration car ça leur permet de ne plus « entendre leur pensée » et de se focaliser sur  leur travail. Le bruit, le brouahah permet de focalisation l’attention sur le reste plutôt que sur la pensée.

Comment aider :

Eviter la création de pensées parasites

Les personnes ayant cet handicap utilisent les lecteurs d’écran pour éviter les infos parasites

« Le lien SEO est mon ennemi principal »

« chaque image, mot ou information : une nouvelle porte de sortie » typiquement toutes les images sans alt sont une porte de sortie ça veut dire qu’elles ne sont pas reliées au contenu et vont activer plein de curiosité chez moi.

« Par exemple, lorsque je lis un article si la photo n’est pas vraiment corrélée et n’apporte pas d’information complémentaire, chez moi cela va me faire penser à plein de trucs. Sur cette photo – un hacker avec un sweat à capuche et un masque d’anonymous- quand je la regarde, je me dis qu’il faut que j’aille m’acheter un nouveau pull et que je regarde un film d’action où les acteurs portent le masque d’anonymous et du coup je perds le fil de ce que je faisais.

Il faut que les animations soient utilisées avec discrétion et parcimonie car moi je peux regarder pendant une heure un soleil qui passe au dessus de la page. Donc faire en sorte que cela s’arrête »

L’information doit être disponible au lancement de la page et pas 2 min après, autrement une distraction peut se créer. Il faut aussi contextualiser systématiquement l’information et éviter le bruit visuel.

Les astuces de ces personnes :

• naviguer en fullscreen
• segmenter ma navigation sur plusieurs fenêtres
• fermer slack
• utiliser les adblockers pour supprimer l’inutile (ne pas faire des anti-adblocker)

Exercice :

• acheter un livre pour la fnac
• acheter un billet de train sur voyages-sncf
• rechercher de l’information sur l’éruption de la réunion
• s’inscrire dans une licence à distance sur le site d’une université

En conclusion, cette conférence fut intéressante pour verbaliser des techniques qui sont déjà utilisées, elle fut riche en découverte sur l’accessibilité avec un avant goût sur ce qui nous attend en 2018 et la découverte du handicap de l’inattention.

Félicitations, tu arrives à la fin de l’article et pour te récompenser, saches que nous allons organiser un MixYourTalent sur le sujet : « Deviens testeur en accessibilité mobile en 1h chrono » !

Guette la date