(mon) Paris Web 2022

Enrichissez vos projets en y intégrant des personae en situation contrainte ! accessibilité UX Coup de ❤️

Par Nathalie Pican et Stéphane Deschamps

Une très chouette conférence sous forme de retour d'expérience de la création et l'utilisation de personae au sein d'Orange Innovation.

TL;DR : Des personae, ça aide à comprendre ses utilisateurs, ça permet de prendre un autre point de vue et, in fine, créer de l'empathie. Bref, ça sert à tous.

Sinon, je retiens 2 questions :

• Pourquoi des personae ?

  Pour la faire simple, je retiens cette citation de Cooper :

  Des produits conçus pour tous ne conviennent à personne

• Pourquoi des personae handicapés ?

  Facile :

  • 1 personne sur 6 est en situation de handicap.
  • 5 ou 6 persona pour un projet, dont au moins 1 en situation de handicap
  • = l’accessibilité comme principe plus général (sur le seul persona utilisé)

Ce ne sont pas, encore, ceux qui ont été présentés lors de la conférences mais quelques personae sont déjà disponibles sur le site d'Orange

Concevoir des services éco-responsables en alliant Design de Services et Eco-conception Numérique Green IT

Par Florie Bugeaud-Remond

Une autre conférence que j'ai trouvé super intéressante, sur un sujet indispensable en 2022

TL;DR : Un service numérique est dématérialisé mais il a un impact. Se poser les bonnes questions au moment de sa conception peut faire toute la différence.

Quelques notes, en vrac :

• 80% des impacts environnementaux d’un produit ou d’un service sont déterminés durant sa conception.
• Ce n’est pas parce que c’est « dematerialisé » qu’il n’y a pas d’impact. Il faut lever cette croyance.
• GreenUX : emprunter les logiques de l’éco-conception pour concevoir une expérience éco-conçu dans sa globalité.
• Trouver le bon compromis entre « besoins » humains, capacités techniques, performance économique et résilience environnementale

Ah, et un message important :

Animating the Impossible intégration

Par Cassie Evans

J’avais un peu peur que ce soit une conférence pour transformer le web en PowerPoint mais en fait c’est intéressant 😬. Un poil technique (mais il faut bien de temps en temps), mais une bonne démarche et de bons réflexes (cf. ma dernière note).

• En gros, je retiens la technique FLIP :

  FLIP : First (positionner), Last (determiner l’état final), Invert (animer avec translate… c’est une nouvelle position mais ça ne se voit pas), Play (et voilà, ça s’anime et c’est magique)

• La technique est en passe de pouvoir utiliser une API : shared element transition API \o/
• Enfin, une conférence tecnhnique sur des belles animations... mais qui se termine en beauté par « Pensez à réduire, ou supprimer, vos animations pour les gens qui n’en veulent pas ». C'est du respect, c'est de l'accessibilité... mais c'est tellement rare pour ce genre de sujets que d'y penser... C'est très Share The Love, très Paris Web :)

Les 10 phrases à ne plus dire à votre DPO privacy Coup de ❤️

Par Harmonie Peynot

Après l'accessibilité et l'éco-conception, ce sont clairement les sujets autour de la privacy qui sont d'actualités. Je ne pense pas avoir jamais mal parlé avec mes DPO... mais j'étais curieux à propos de cette conférence et je n'ai pas été dessus. C'était drôle ET instructif, clair et concis comme il faut.

1. La RGPD : nan, c’est « le » règlement. Et c’est important car un règlement s’applique directement, à la différence d’un directive qui doit être transposé dans le droit national.
2. Encore de nouvelles règles ! non, la loi Informatique et Libertés existe depuis 1978.
3. Ça ne concerne que les GAFAM et les grandes boîtes, ça en vrai, non ? Nan, ce ne sont pas les mêmes risques et les mêmes responsabilités mais vous avez une responsabilité.
   On notera que les contrôles réalisés par la CNIL sont disponibles en open data
4. Ça va, on a pas grand chose en données. On ne risque rien (et en plus on a rien de sensible). Vous ne savez jamais à quelle point une donnée peut être importante. Protégez TOUTES vos données !
5. Il faut demander le consentement pour tout… Alors non, on a 6 bases légales de traitement : Contrat, Obligation légale, Intérêt légitime, Mission d'intérêt public, intérêts vitaux ET Consentement
6. On fait appel à des prestataires comme ça on se décharge de toute responsabilité (hi hi). Non, vous êtes responsables de traitement et, d’ailleurs, vous avez l’obligation d’une clause de sous-traitance.
   Ah et, un petit message en passant pour ceux qui en doutaient encore...

   « D’ailleurs, si vous avez encore Google Analytics sur votre site, c’est l’occasion de changer » JDCJDR

7. On a un bandeau cookies, c’est bon on est conformes non ? Euh… c’est plus compliqué que ça ;)
8. On a toujours fait comme ça, ça n’a jamais posé de problèmes. Crois-tu ? Les risques croisent, et les attentes des utilisateurs évoluent.
9. On en aura peut-être besoin plus tard… Pensez « Cycle de vie de la donnée »
10. DPO, c’est un faux métier. Vous ne faites que chasser les post-its et dire de changer de mots de passe.

Enfin, un dernier message qui montre que Paris Web, c'est le pays des bisounours :

RGPD= information & transparence.
Pensez accessibilité pour une information sans discrimination. 😎 🌈 🦄

Je vous propose aussi ce très joli sketchnote de la conférence par Cécile Freyd-Foucault :

r/place : la collaboration sur internet, pixel par pixel Coup de ❤️

Par Samih Benamar

Une conférence vraiment passionnante (encore une !)... à propos de r/place, une expérience sociale autant qu'un happening artistiques de Reddit. J'avais suivi cela de loin, avec une certaine curiosité mais aussi un peu de corconspection... Dans sa conférence, Samih (17 ans !!!) a parfaitement réussi à expliquer et raconter ce(s) phénomène(s). C'était autant vivant qu'amusant, et très instructif. Le genre de conférence un peu à part mais qui m'enchante.

Seul on est une goutte, ensemble on est un océan. r/place

J'espère que les slides de la conférences seront disponibles... en attendant, voici les timelapses de la 1^ère r/place, en 2017, et de la 2^nde, en 2022.

• Reddit r/place 2017 timelapse
• The Complete r/Place Timelapse (2022)

Transferts de données : est-ce que je peux encore utiliser des fournisseurs américains ? privacy Coup de ❤️

Par Laurie-Anne Bourdain

Une conférence que j'attendais beaucoup, car le sujet de la privacy et de la conformité RGPD, on est en plein dedans... et je n'ai vraiment pas été dessus. Une conférence très complémentaire à celle d'Harmonie Peynot

TL;DR : Est-ce qu’on peut ? Bah… non.

Bon, ceci dit, ça vaut le coup de creuser un peu le sujet ;) ET c'est bien ce qu'à fait Laurie-Anne, avec rigueur, et humour.

Quelle démarche pour prendre en compte les différents risques sur le sujet, et donc les prises de risque qu'on doit s'efforcer de mesurer ?

• Le coût de l'arrêt du transfert
  • Planifié (dans un contexte de mise en conformité)
  • Immédiat, à la demande de la CNIL
• Le coût du ré-import des données en UE.
  • Est-ce qu'il y a des services équivalents ?
  • Quels sont leurs tarifs ?
• Le coût des amendes
  • Un transfert présentant un risque faible (pour la personne concernée) reste illégal

Objectifs 2025 de l’accessibilité : quels défis nous attendent ? accessibilité

Par Claire Deribreux, Caroline Smeyers, Benoît Collienne, Michel Dvorak, Sébastien Delorme, Vincent Aniort et Aurélien Levy

Une dernière conférence pour la journée du jeudi, en pleinière et sous forme d'une table ronde (en vrai, elle était carrée).

TL;DR : Une 1^ère directive relative à l'accessibilité numérique a déjà cours en Europe, elle concerne actuellement le secteur public et, en France, les entreprises dont le CA dépasse 250 M€. Une 2^nde directive prendra effet en 2025 et en élargissant le champ au secteur privé, c'est à dire aux fournisseurs de produits et services.

Les échanges étaient intéressants... mais il serait compliqué de les résumer. Je voudrais donc juste préciser ici mon analyse personne de la situation, que comme plusieurs intervenants, je trouve encourageant... mais encore largement en deça de ce qu'on devrait en attendre. Je suis moi-même expert en accessibilité numérique depuis 2008, et j'ai vécu comme beaucoup ces difficultés à porter le sujet, à le faire avancer. C'est donc avec un certain soulagement que je constate que si le sujet n'avance pas aussi vite que je le voudrais, il est passé le temps où on devait passer une demi heure à expliquer ce qu'était l'accessibilité numérique. Néanmoins, quand je constate la qualité de l'expérience sur les sites et les apps, et l'accessibilité de nos codes... je me dis que le chemin est encore bien long.

Alors, qu'est-ce qu'il faudrait pour arriver au résultats espéré : des sites web accessibles à tous. ?

• Que toutes les formations incluent au minimum une sensibilisation au sujet, voire plus pour les UX designers, les développeurs, les intégrateurs, etc. Ça peut aussi passer par de la formation continue et de l'assurance qualité, notamment grâce à Opquast qui me parait (encore et toujours) être le cheval de Troie parfait pour l'accessibilité.
• Que les autorités prennent leur responsabilité, et que cela fasse évoluer l'opinion publique. Je m'explique : faire des lois, c'est bien... mais il faudrait aussi s'assurer que la nécessaire autorité de contrôle soit en place et qu'elle soit en mesure de prononcer les sanctions prévues par le législateur.

Quelque part, on aura atteint l'accessibilité, quand on aura cette aurorité pour sanctionner et que, une peu comme ça le cas pour la CNIL en terme de Privacy, cette autorité pourra décider de rendre publiques ces sanctions, et que ce choix soit alors pleinement perçu par tous comme une double-sanction.

Découvrez « le bon HTML » et économisez du JS et du CSS accessibilité intégration Coup de ❤️

Par Gaël Poupard, Support

TL;DR : une conférence indispensable, à partager et repartager. Elle remet l'église au milieu du village :

• en rappellant qu'une bonne connnaissance de l'HTML peut empêcher de développer des usines à gaz, complexes et difficiles à maintenir,
• en donnant le bon exemple et en encourageant aux bons réflexes en terme de support des navigateurs et d'accessibilité.

En fait, on en revient aux principes d'amélioration progressive (l'idée c'est de construire des escalators plutôt que des ascenseurs. Quand le courant sera coupé (que le javascript sera pété...), vos utilisateurs ne seront pas bloqués), au principe de moindre pouvoir, soit l'un des axiomes du web, proposé par Tims Berners-Lee dès 1998 :

Keep it simple, stupid!

Un premier principe qui peut se résumer comme un arbre de décision : c'est dans cet ordre-là qu'il faut répondre aux cas d'usages qui se présentent à nous :

1. HTML
2. CSS
3. Javascript
4. ARIA
5. Polyfill
6. Framework

Suivez les spécifications, mais aussi le support par les navigateurs. Maîtrisez votre HTML, validez-le. Javascript est indispensable, mais ne l'utilisez qu'en cas de nécessité. Pareil pour ARIA.

Ensuite, beaucoup de sujets ont été abordés, parmi lesquels :

• Vous voulez proposer une liste de valeurs à l’utilisateur, en permettant aussi la saisie libre ?

  Pas besoin d’une bibliothèque, ni même d’un composant riche, un <datalist> suffit ! En plus, son support par les navigateurs mais aussi par les technologies d'assistances est excellent.

• Quid de l'auto-remplissage ?

  Le navigateur dispose des informations, il suffit de le lui demander. Et pour cela, pas besoin de JS et encore moins d'API, complexes et lente... utilisez l'attribut autocomplete (pareil, son support est excellent).

• Et pour formater la saisie

  Les solutions pour contrôler et normaliser entraine souvent de réels problèmes d'expérience utilisateur, d'accessibilité, voire des résultats étranges et malvenus... alors qu'il est si simple d'utiliser correctement les attributs pattern, spellcheck, autocorrect, autocapitalize, etc.

  Note personnelle : Gaël a précisé qu'il n'y avait pas pattern pour valider une adresse e-mail, je rajouterais qu'il n'y en a pas besoin puisqu'un champ de type e-mail le fait bien, mais aussi et surtout que une adresse e-mail avec un signe + est valide !

  Pour aller plus loin, lisez l'article que Stéphanie Walter a écrit dans Smashing Magazine : UX And HTML5: Let’s Help Users Fill In Your Mobile Form.

• Vous voulez un bloc dépliant ?

  Les balises <details> et <summary> permettent de le faire sans Javascript et, surtout, sans ARIA voyons !

• Vous voulez une fenêtre modale ?

  L'élément <dialog> le permet (l'élement est ancien mais son support est récent...)

• Afficher le résultat d'un calcul après un changement ?

  Connaissez-vous la balise <output> ?

• etc. (c'était trop riche pour tout noter, et tout résumer ici. Vraiment, je ne peux que vous encourager à visionner la conférence dès que son replay sera disponible.

Green IT : que faire en tant que professionnel du Web ? greenIT

Par Raphaël Lemaire

Encore une conférence Green IT, et encore une bonne conférence pour :

• Prendre conscience de l'urgence climatique
• Prendre conscience de l'impact du numérique
• Prendre conscience de notre responsabilité

Les actions clés :

1. Faire durer les appareils > pensez compatibilité
2. Réduire la quantité de ressources nécessaires > frugalité, performance, efficience

Bref, le message est encore et toujours le même&nbs;:

Professionnels du web, vous avez le pouvoir de faire changer les choses (et qui dit pouvoir dit responsabilités)

Par certains aspects, ça m'a rappellé Manifeste pour un web éthique. En tout cas, j'imagine que les motivations qui ont amené Raphaël Lemaire à faire cette conférence devaient être proches des miennes... Il faut croire qu'on est encore quelques uns à croire en cette utopie ?

Le making-of du RGESN : tout savoir sur le référentiel d’écoconception des services numériques greenIT

Par Christophe Clouzeau

Dans la droite lignée de la conférence précédentee. Un retour d'expérience intéressant, et un tour d'horizon complet des initiatives sur le sujet.

Defensive CSS intégration

Par Ahmad Shadeed

J'attendais beaucoup de cette conférence... mais j'ai été passablement déçu. Le principe est pourtant excellent : définir une stratégie pour concevoir des CSS bullet-proff", c'est à dire qui anticipe tout et pas uniquement les cas les plus fréquents (voire uniquement les cas maquettés). La conférence ne m'a pas convaincue... mais le site associé me parait une vraie mine d'or : Defensive CSS.

Comment Canal+ travaille et intègre l’accessibilité numérique ? accessibilité

Par Amélien Delahaie

Encore un retour d'expérience, ce que j'apprécie souvent en conférence, et sur le sujet de l'accessbilité numérique qui plus est... Néanmoins, j'en suis sorti quelque peu déçu. La conférence était bonne... mais l'expérience était courte (1 ans) et, de l'aveu même de l'orateur, les retours d'expériences récents.

J'en retiens néanmoins quelques éléments notables :

• Pourquoi c’est important l’accessibilité numériquechez Canal+ ? Quels sont les enjeux ?
  1. Social
  2. Business
  3. SEO
  4. Marque
  5. Légal
• Comment on fait ?
  1. Détecter les obstacles > audits
  2. Corriger et améliorer
  3. Suivre les indicateurs pertinents
  4. Élaborer un plan d’attaque
• 4 piliers
  1. Accessible by design
  2. Tests et validations
  3. Sensibilisation
  4. Partenariats

Creating An Effective & Beautiful Data Visualization From Scratch

Par Nadieh Bremer

La réalisation, en live et bien expliquée, d'une infographie en svg. C'était intéressant... mais, honnêtement, je ne saurais pas trop quoi en faire.

Au-delà du hashtag : les nouvelles technologies au service du militantisme Coup de ❤️

Par Cindy Liwenge

Une conférence passionante mais, hélas, raccourcie à cause problèmes techniques.

Les conférences qui sont un peu à côtés du sujet m'intéressent souvent, les questionnements sur l'éthique et le militantisme aussi. Celle-ci était sourcée, factuelle, claire... j'ai beaucoup aimé la prestation de Cindy, et elle m'a donné envie de creuser plein de sujets et m'interroger sur mes propres pratiques et expériences...

... mais omme ce n'est pas forcément ce que je veux faire ici, je vous citerais juste cette extension dont le but est de cliquer sur toutes les publicités d'une page, pour pourrir les données des annonceurs. J'en ailme beaucoup l'idée :) Ça s'appelle AdNauseam, et ce n'est disponible que pour Firefox car Google l'a supprimée du Chrome Store en disant qu'elle n'était pas "éthique" ! LOL (de toute manière, si vous avez une éthique, et si les principes du web vous sont chers, et si son avenir vous importe... Use Firefox).

URL ; reprenons les bases Coup de ❤️

Par Xavier Mouton-Dubosc

La dernière conférence... et, encore, une conférence qui m'a appris plein de trucs. Et pourtant, elle était trop courte et Xavier a du sauté plein de choses (j'attends avec impatience qu'il mette les slides à dispo, et qu'il en fasse une émission sur sa web-radio !).

La conférence était vraiment super riche, ce serait compliqué à résumer... je vais me contenter de vous restituer quelques informations que j'ai retenu. La plupart sont complétement inutiles, mais aussi parfaitement indispensables si vous prétendez améliorer votre culture web.

Commençons par la structure d'une URL :

En anglais : <scheme:>//<authority>>/<path>?<query>#<hash>

En français : <plan:>//<autorité>>/<chemin>?<requête>#<fragment>

En FALC : <Comment ?:>//<Chez qui ?>>/<Où ?>?<Question ?>#<Extrait ?>

1. On commence donc par le protocole, <scheme:>
   • Il y a des centaines de protocoles : http:, ftp:, mailto:, tel:, fax:, gopher:, smb:, mysql:, file:, etc.
   • mais vous pouvez aussi "inventer" vos protocoles en utilisant Navigator.registerProtocolHandler().
   suivi de // (ou \\ chez Microsoft), qui indique qu'on veut remonter dans le réseau
   • Dans le navigateur de fichiers de windows, ça sert à remonter sur le domaine local pour interroger une autre machine.
   • On a le droit d'ommettre le protocle et de commencer directement par // (ce qui indique qu'on garde le protocole courant)
2. Puis l'autorité, <authority:>, où on trouve comment s'identifier, sur quel serveur et quel numéro de port.

   <user>:<password>@<host>:<port>

   • user:mdp permet de préciser son identifiant, mais aussi son mot de passe (/!\ Ne le faites pas /!\, c'est déprécié, vous aurez un message d'avertissement.. mais ça marche encore très bien)
   • host, c'est le nom de domaine... mais on peut aussi utiliser :
     • une adresse IPV4 (par ex. 127.0.0.1),
     • mais aussi la version décimale d'une adresse IPV4 (par ex. 213706433),
     • voire une adresse IPV6... mais en l'encapsulant avec des crochets (car elle utilise elle-même le : comme séparateur... du coup, il ne faudrait pas le confondre avec le port) (par ex. [::1])

     Il y a un truc implicite qu'on écrit jamais pour un nom de domaine, c'est un . final.

     • Quand vous rentrez un nom de domaine, votre ordinateur essaie de le résoudre, puis, s'il n'y arive pas, il essaie sur les résolveurs DNS de même niveau que lui (votre entreprise, votre FAI...),
     • en mettant le . à la fin du domaine, vous indiquez explicitement que vous faites référence aux serveurs de noms de domaines de base du web (les root DNS).
     • Ça ne sert (plus) à rien, mais paris-web.fr et paris-web.fr., ce sont 2 adresses différentes !

   • Enfin le port
3. vient ensuite le chemin, /<path>

   /<sub-directory>/<sub-directory>/<filename>.<extension>

   • Comme séparateur entre sous-répertoires, on utilise généralement le / (sauf Microsoft)... mais ce séparateur n'a, en fait, jamais été défini...
   • On a le droit de mettre des paramètres (par exemple, public/media?deplie=oui/images). Ça servait à quelque chose... mais c'était dans les années 90...
   • La fin du chemin, c'est théoriquement le nom du fichier, <filename>.<extension>... mais rappelons que le point et l'extension, ce ne sont que des conventions (ça n'existe d'ailleurs pas dans les systèmes Unix). Notons aussi que le navigateur n'utilise pas cette extension, il se base sur le type MIME renvoyé par le serveur.
4. puis la requête, ?<query>, qui indique les paramètres. Ça a été imaginé pour des recherches, d'où le point d'interrogation.
   • Ce qui donne donc : ?je cherche cette phrase
   • ou, échappé, par le navigateur en ?je+cherche+cette+phrase (justement pour indiquer une recherche combinant ces termes)
   • mais la manière correcte d'échapper des espaces donnerait ?je%20%cherche%20cette%20phrase
   Par convention, en guise séparateur, on utilise...
   • l'esperluette ?cle1=valeur&cle2=valeur...
   • mais certains serveurs java utilisent le ; = ?cle1=valeur;cle2=valeur...
   • et, de toute manière, pour le navigateur, la notation c'est ?cle=valeur1,valeur2...
   • d'ailleurs, vous pouvez utiliser le paramètre ismap sur une image-lien (<a href="a"><img ... ismap></a>), le navigateur inclura aux paramètres du lien les coordonnées de la zone cliquée (a?14,25)...

   Vous avez déjà utilisé des liens mailto:email ?

   Hé bien, en fait, c'est une query, qui omet authority et path, qui utilise le paramètre par défaut du protocole, c'est à dire le destinataire (to)... mais il en existe d'autres : mailto:?tomark>=email&cc=email2&bcc=email3&subject=bonjour%le%monde&body=comment%20ça%20va

5. et, enfin, vient un fragment, #<hash>
   • Le plus souvent, ce fragment a pour valeur l'identifiant (attribut id) d'une balise HTML
     (mais les dinosaures comme moi se rappeleront avoir codé des <a name="hash" />)...
   • ... mais il peut également avoir plusieurs valeurs. Par ex. #clé1=valeur&clé2=valeur1,valeur2. C'est même un standard, le Media Fragment URI, qui permet de définir des limitations temporelles.

Maintenant qu'on a bien décortiqué cet objet, méconnu finalement, qu'est une URL, la question suivante se pose : Quelle est la longueur maximale d'une URL ?

La réponse n'est pas simple. On a bien un status de réponse HTTP prévu, 414 URI Too Long... mais rien n'est prévu pour dire à partir de quand une URI serait trop longue ! Et en fait, la réponse, c'est... ça dépends  (les chiffres datent de 2006)

• Pour un serveur Apache, c'est 8 000,
• mais pour un serveur IIS, c'est 16 000.
• Pour le navigateur Safari, c'est 80 000,
• alors que pour Opera, c'est 190 000...
• mais pour Internet Explorer 6, ce n'était que 2 000

Bon allez, je m'arrête là, y'avait encore plein de choses dans la conférence de dascritch, notamment sur l'utilisation du punycode dans les URL et sur les homoglyphes qui en découlent... non, vraiment, vivement le support et la captation de la conférence, mais aussi vivement son émission sur CPU.