Dernières nouvelles

23 avril 2018

Intégrer des vidéos tierces de manière accessible

J’intègre rarement des vidéos dans mes billets et je me suis rendue compte que je ne savais pas comment Dotclear gérait ça. N’ayant rien trouvé, je me suis dit que ça pourrait être intéressant de faire le point sur l’intégration accessible de vidéos tierces dans Dotclear (et ailleurs).

Intégrer des vidéos tierces dans un billet Dotclear

Il existe un plugin, noembedMedia, qui permet d’intégrer facilement une vidéo[1] dans un billet pour un contributeur sans toucher à une ligne de code.

Il suffit de fournir l’URL de la vidéo, définir un positionnement (aucun, gauche, centre, droit) et d’ajouter un titre si on le souhaite. Le plugin ajoute alors le code suivant :

<div class="external-media" style="margin: 1em auto; text-align: center;">

<iframe width=" 459" height="344" src="https://www.youtube.com/watch?v=uKBWxvN0VMc?feature=oembed" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

</div>

On peut également insérer directement le code fourni par Youtube, Vimeo ou autre à l’endroit souhaité dans le billet. Ce code ressemble à ça :

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/0xQy4Ardi_c" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

Aparté vie privée : j’ai activé le mode de confidentialité avancé (le nocookie que vous voyez dans l’URL) pour que YouTube n’enregistre aucune information sur les internautes qui consultent la page sans regarder la vidéo.

Vous le trouvez généralement en cliquant sur Partager puis Intégrer sur Youtube par exemple.

Insérer ce bout de code est un jeu d’enfant sur Dotclear en wiki et encore plus en Markdown puisqu’il suffit de copier/coller le HTML sans rajouter de code supplémentaire.

Le problème ? Le code fourni n’est pas bon[2] et ne respecte pas les règles d’accessibilité numérique. Heureusement, ce n’est pas très compliqué à corriger si on a quelques notions en HTML et de CSS.

Vidéos tierces et accessibilité

Ce qui suit ne vaut pas que pour Dotclear, mais concerne plus largement l’insertion de vidéos tierces.

On va s’aider du Référentiel Général d’Accessibilité pour les Administrations (RGAA).

Pour faire simple, le RGAA vous invite à vous poser des questions sur l’accessibilité de vos contenus sur le web. 133 questions (critères) précisément, réparties en 13 thématiques. Celles qui vont nous intéresser et s’appliquer pour insérer une vidéo tierce, ce sont les thématiques Cadres, Multimédia et Présentation de l’information.

Si je souhaite intégrer une vidéo tierce contenue dans un cadre (iframe) de manière accessible, je dois vérifier que je réponds bien aux quatre critères RGAA 3[3] suivants :

Iframe : nettoyage et titrage

Note : le principe est le même pour des iframes qui insèrent autre chose que des vidéos.

On va d’abord s’intéresser au code présent dans l’iframe et le nettoyer (critère 10.1). On va supprimer frameborder (qui permet d’afficher ou non une bordure), width (largeur) et height (hauteur) qui sont des éléments de présentation qui doivent être traités en CSS. On obtient :

<iframe src="https://www.youtube-nocookie.com/embed/0xQy4Ardi_c" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

Si la CSS de votre thème a déjà prévu de styler les iframes, vous n’avez rien d’autre à faire. Youpi !

Si ce n’est pas le cas (souvent), vous pouvez au choix :

  1. ajouter du style en ligne (par exemple : style="border:none; width:560px; height:315px;) ;
  2. styler les iframes dans les CSS de votre thème pour avoir le rendu souhaité (si vous êtes amenés à insérer d’autres types d’iframes, ajouter une classe pour les vidéos) ;
  3. vous adresser à une personne qui sait faire et comprend les point 1 ou 2.

On va également identifier notre iframe (critère 2.1) et la titrer de façon pertinente (critère 2.2) pour permettre aux personnes aveugles de mieux s’y retrouver. Pour ça, on rajoute simplement title="Youtube".

Hop, c’est fini pour l’iframe :

<iframe src="https://www.youtube-nocookie.com/embed/0xQy4Ardi_c" title="Youtube" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

Identifier la vidéo si elle apporte de l’information

L’absence d’identification des vidéos par un titre ou un résumé peut rendre la recherche d’information particulièrement laborieuse pour les utilisateurs aveugles et les grands malvoyants.

Multimédia - Défauts d’accessibilité : Impacts sur les utilisateurs

On va donc de préférence faire précéder la vidéo d’un titre. On peut néanmoins également aussi l’évoquer dans un paragraphe qui la précède ou la suit immédiatement et qui en résume le contenu. C’est ce que j’ai fait dans mon billet sur l’exposition Kupka.

En résumé

Actuellement, seul un contributeur avancé peut éditer le code sans souci et ajouter des iframes vidéos accessibles, encore faut-il qu’il soit au courant des règles d’accessibilité évidemment.

On pourrait améliorer ce point assez simplement et automatiser toute la partie technique concernant l’intégration de l’iframe.

Le contributeur néophyte ou avancé n’aurait ainsi plus à se soucier des questions techniques et pourrait ainsi uniquement se concentrer sur l’identification de la vidéo (critère 4.15).

Notes

[1] En vérité, ce plugin fait bien plus que ça puisqu’il vous permet d’ajouter des contenus tiers type, je me concentre ici uniquement sur les vidéos.

[2] Il n’est pas valide HTML5, frameborder étant désormais obsolète.

[3] Pour chaque critère, le RGAA fournit une liste d’instructions simples à suivre (les tests) et un glossaire pour expliciter les termes importants.

22 avril 2018

Coupures de vie

Je cours toujours - le boulot, la famille, la vie - à se demander quand est-ce que les choses vont enfin ralentir.

Et puis les douleurs qui reprennent insidieusement d’abord avant de s’installer plus franchement1. Comme si le diagnostic, couperet brutal et soudain, les désinhibait. Je le digère tout doucement, j’ai besoin encore un peu de temps et tellement plus intéressant à faire que d’y penser. Je redoute un peu les résultats de l’IRM à vrai dire.

J’ai adopté des plantes (des succulentes et un aloe vera ou assimilé), elles m’apaisent et me réjouissent à chaque fois que je les vois.

Une crêpe bretonne au caramel beurre salé, Atom Heart Mother et Alan’s Psychedelic Breakfast, un imprimé citrons 🍋, du soleil et du repos. Ce week-end était plutôt pas mal.

P.S. : Je voudrais mettre plus de photos par ici. Dotclear a bien des qualités, mais pas celle de permettre de partager rapidement ou simplement des instantanés à partir du téléphone. Je cherche une alternative à Instagram que j’ai arrêté d’utiliser, si jamais vous avez des pistes, je prends.


  1. Pire que la douleur, supporter le pharmacien qui mecsplique les règles et l’endométriose en me disant qu’une boîte d’Antadys (15 comprimés) me suffira largement pour le mois parce que « Mlle, les règles, c’est 5 jours ». 

23 mars 2018

Kupka, l'abstraction tchèque

Il me semble ne vous avoir encore jamais saoulé (je cherche vraiment à vous enivrer avec n’importe quoi) avec mon irrationnel engouement pour les noms commençant par K. La généralisation est un peu cavalière étant donné qu’il n’y en a pas pléthore – je n’en vois même que deux, pour l’instant : Kafka et Kundera.

La souris, 2009

J’ignore si cet irrationnel engouement de La souris1 est contagieux ou s’il était déjà latent chez moi, en tout cas, celui-ci est désormais partagé. Kafka, Kundera, Kupka, pour le trio tchèque, mais aussi Kertész, Klee, Kandinsky. Ou oh tiens Kozlika et kReEsTaL ;)

J’ai découvert les œuvres de František Kupka, peintre tchèque, lors de mon séjour Erasmus à Prague au musée Kampa, accompagnée d’un doctorant en histoire de l’art. La visite n’en a été que plus passionnante. Évidemment, j’ai quasiment oublié toutes les explications données et ne me souviens que de quelques mots-clés (abstraction, biologie, philosophie et mathématiques) et de l’émotion ressentie devant ses œuvres.

Image
Image : Cosmic Spring, František Kupka, 1913-1914

Je ne vous dis pas à quel point je suis enchantée de voir que le Grand Palais lui dédie une rétrospective (du 21 mars au 30 juillet) qui a l’air très complète et bien pensée si j’en crois la vidéo de présentation, sous-titrée (c’est trop rare pour ne pas le souligner), de l’exposition. Je rajoute que l’on entend successivement deux des co-commissaires de l’exposition, Brigitte Leal et Markéta Theinhardt.

Je redécouvre qu’il était anticapitaliste et je ne l’en aime que plus <3

Me connaissant que trop bien, je préfère vous parler de cette exposition avant d’y aller et je vous recommande très vivement d’aller découvrir Kupka si vous en avez l’occasion.

Si certain·es souhaitent aller voir l’expo avec moi, faites moi signe. J’ai prévu d’y aller plusieurs fois2 pour en profiter un maximum.

Ajout du 24/03 : pour celles et ceux qui ne peuvent pas se rendre à l’exposition, un documentaire de Jacques Lœuille, Kupka - Pionnier de l’art abstrait, sera également diffusé sur Arte, ce dimanche à 17h35.


  1. Si l’on me demandait d’associer La souris à une anecdote, ce serait ces allitérations tchèques en k. 

  2. J’ai acheté une Carte Sésame uniquement pour cette expo. Merci au Grand Palais d’encore me considérer comme jeune \o/ 

19 février 2018

Entrain

Il y a quelques jours, ma mère m’a appris que mon arrière-grand-père était chef de gare. Ta grand-mère en était très fière. « C’était quelque chose à l’époque ! » disait-elle. Elle rit en imitant le ton emphatique de sa mère.

Chef de gare, c’est vrai ? Mais… mais… c’est génial !

Je ne crois pas que ma mère s’attendait à ce que sa révélation anodine provoque un tel emballement. Ravie et surprise, j’ai impression d’avoir enfin trouvé où placer une pièce de puzzle et d’obtenir ainsi un nouvel ensemble plus compréhensible et cohérent.

Les liaisons établies sont tout à fait arbitraires. Il n’y a évidemment aucun lien de causalité entre l’arrière-grand-père chef de gare et mon apprentissage chez SNCF ou bien mon intérêt pour le matériel roulant et les gares. Juste une coïncidence qui me fait sourire.

La pomme, l’arbre… Everything is connected!1


  1. Si vous ne connaissez pas encore la série Dirk Gently, je vous la conseille très chaudement ! 

2 février 2018

Rabougri

Je n’ai jamais été vraiment proche de lui.

Lui, c’est Louis, mon grand-père. Français1 eurasien, né le 29 août 1921 à Moncay dans le nord de l’Indochine. De père français et de mère vietnamienne. Marié en 1950 à Haïphong. Père de 4 enfants. Voilà pour l’état civil français.

Pour moi. Ses façons maladroites d’exprimer son affection. Les liserons d’eau cuits à l’eau et les nems2. Un billet rapidement et secrètement fourré dans ma poche en me demandant de ne rien dire à ma mère. Ses yeux vairons, magnifiques et fascinants, encore aujourd’hui.

Eurasien indochinois, un drôle de mélange des cultures française et vietnamienne3 et un produit de la colonisation française. Plus à sa place au Vietnam, pas complètement chez lui en France4. Je crois qu’il a toujours eu un certain sentiment d’infériorité vis-à-vis des Français “français”.

Je connais à peine quelques fragments de sa vie. Il n’a jamais été très loquace et enclin à partager ses souvenirs ou ses émotions. Il ne m’a jamais été possible de le faire parler sur les événements politiques au Vietnam et des impacts sur sa vie. Peut-être que je n’étais pas disposée à écouter non plus. Ma réflexion sur mon complexe héritage vietnamien est assez récente après tout.

Son quasi mutisme actuel m’empêche de développer le sujet avec lui. Plus grave, il l’empêche de se faire comprendre et d’être soigné plus efficacement. Le voir essayer péniblement de prononcer quelques mots est douloureux.

Cette perte progressive du langage infantilise. Ce silence l’isole également.

Je rappelle à ma mère et à ma tante que c’est un vieux monsieur et non un vieil enfant. Elles ne se rendent pas compte et je ne peux les blâmer, surtout pas ma tante, qui a mis sa vie entre parenthèses depuis fin septembre, pour s’occuper de lui au quotidien. J’imagine que moi aussi, je ne prendrais peut-être plus la peine de lui demander son avis au bout de la énième fois sans réponse5.

Difficile de savoir s’il ne nous comprend plus parce qu’il n’entend plus bien ou s’il déraille complètement.

Il me fend le cœur lorsqu’il semble vouloir communiquer et qu’il renonce ensuite en se recroquevillant sur lui-même. Il a alors l’air si seul, perdu dans ses pensées.

J’étais la petite-fille léopard en octobre lorsque je suis allée le voir à l’hôpital peu après sa chute. Un peu plus tard, lorsqu’on pensait qu’il récupérerait ses esprits, il a prononcé mon prénom en me voyant.

Aujourd’hui, il ne m’a pas reconnue.


  1. Ce qui l’a à la fois obligé et lui a permis de quitter Saïgon et de venir en France avec sa famille. 

  2. La nourriture et cuisine vietnamiennes plus généralement. Son éternelle préoccupation était de savoir si l’on mangeait correctement. 

  3. C’est flagrant chez lui, mais aussi très présent chez ma mère, mes tantes et mon oncle. 

  4. L’arrivée en France, encore un pan de l’histoire familiale peu ou pas documentée. Réussir l’assimilation française et oublier le passé. 

  5. Depuis l’accident de mon grand-père, je lis avec beaucoup plus d’attention les articles et témoignages sur le soin des personnes âgées. Ces lectures ont croisé des lectures sur le handicap et sa prise en charge problématique. L’institutionnalisation des personnes âgées ou handicapées m’apparaît désormais intolérable. D’autant qu’elle a un caractère systématique très dérangeant. Cachons ces personnes qui ne correspondent pas aux critères acceptables de la société et retirons-leur le droit de vivre parmi nous.