Cas d'utilisation: Ré-écriture d'un site pour mise en accessibilité incrémentale

[marc-bouvier]

TLDR; Mise en place de Frago sur mon site web https://baldir.fr et https://next.baldir.fr pour "dog fooding".

J'explique plus en détail la démarche dans cet article.

Mon objectif est dans un premier temps de m'auto-former dans l'accessibilité web et le numérique responsable pour valider ensuite mes compétences par des formations certifiantes.

J'écris un journal de bord qui permettra à chacun de voir les différents aspects de l'audit mais aussi de la mise en conformité technique. Avec cette approche "par l'exemple", j'espère sensibiliser sur cette activité et proposer un exemple concrèt à des futurs acteurs du numérique responsable et accessible.

Sources du projet : https://gitlab.com/marc-bouvier/baldir-fr

[bertrandkeller]

C'est super ça.

Pour le moment, Frago n'a pas de module qui pourrait être intégré à un site Hugo.
Frago est un dépôt à part orienté, pour le suivi multi site.

Il faut donc créer un dépôt avec un projet dedans.

Tout est dans le documentation.

Dis moi, ce dont tu as besoin.

[marc-bouvier]

Merci pour le retour.

Mon idée intuitivement serait d'avoir les données brutes dans le dépôt et lors de la CI importer frago juste le temps de la génération.
En copiant les données pour respecter la structure de frago, ca devrait le faire.

Ca pourrait devenir un template Gitlab ou une action Github a terme pour simplifier à l'extreme le processus.

[marc-bouvier]

Par ailleurs, je me pose la question de la license à propos des polices de la DINUM.
Ca me rassurerait d'avoir la possibilité de choisir ou non d'utiliser ces polices par configuration.

[bertrandkeller]

Tu peux surcharger le thème en ajoutant des fichiers :
https://disic.github.io/frago/docs/avancee/personnalisation/

Normalement ça marche.

[bertrandkeller]

Pour récupérer les chiffres de Frago. En théorie, tu peux ajouter des données dans content/audits.

Builder le site une première fois avec le thème frago. Récupérer les chiffres de l’API.

Builder avec un autre thème.
Puis aller appeler les fichier JSON générés dans le répertoire de build du premier build.

On pourrait imaginer ne générer que les JSON pour Frago. Et pas le reste des fichier HTML.

[marc-bouvier]

Je vois, en quelque sorte séparer la donnée "pure" (json) de la donnée formatée (html).
Pas sûr d'avoir le besoin pour le moment, mais ça pourrait être utile pour la suite.

[marc-bouvier]

J'ai jeté un oeil à la documentation, en particulier sur l'arborescence type.

Dans mon cas je pense faire du multi projet

• baldir : https://baldir.fr
• next_baldir : https://next.baldir.fr

J'aime bien le côté "multi-projet" car, il me permettra de comparer plus facilement les niveaux d'accessibilité des 2 sites.

Ce qui donnerait à partir de la documentation que tu as publié :

.
├── config.toml
├── content
│   ├── _index.md // page d’accueil du site :: ⚠️ Ajouter `type: projects` dans l’entête du fichier en cas de mono projet => va afficher directement la page de synthèse de tous les audits
│   ├── audits // Les pages pour afficher les audits (accessibilité, qualité, performance…) pour chaque projet
│   │    ├── baldir // Doit reprendre le nom du répertoire donné au projet dans `static`
│   │    │     └── index.md // ⚠️  pour avoir lister les pages sur l’accueil et avoir la page intermédiaire qui liste tous les rapports
│   │    └── next_baldir // Doit reprendre le nom du répertoire donné au projet dans `static`
│   │          └── index.md
│   ├── meetings
│   │    ├── _index.md // liste les réunions
│   │    └── 2020-10-22-reunion1.md // On indique la date dans le nom de fichier pour ranger les fichiers visuellement, il faut la répéter dans l’entête YML du fichier pour afficher les réunions sur la page dans un ordre par date.
│   ├── personas // ⚠️ Ne fonctionne pas en mono projet
│   │    ├── _index.md // Liste tous les personas
│   │    ├── simon.md
│   │    ├── annie.md
│   │    └── baldir
│   │         ├── _index.md // liste tous les personas
│   │         ├── simon.md
│   │         └── annie.md
└── static
    ├── baldir
    │    ├── accessibility
    │    │    ├── 2020-10-15.csv
    │    │    └── 2020-11-15.csv
    │    ├── lighthouse
    │    │    ├── 2020-10-15.json
    │    │    └── 2020-11-15.json
    │    ├── quality
    │    │    ├── 2020-10-15.yml
    │    │    └── 2020-11-15.yml
    │    ├── usertests
    │    │    ├── test1.json
    │    │    └── test2.json
    │    ├── backlinks.json
    │    ├── personas.json
    │    └── similary.json
    ├── next_baldir
    │    └── accessibility
    │         ├── 2020-10-15.csv
    │         └── 2020-11-15.csv
    ├── directory.json // Annuaire de contacts
    └── images
         ├── baldir // Doit reprendre le nom du répertoire donné au projet dans `static`
         │    ├── benchmark
         │    │    ├── titresiteweb-titreelementacomparer.png // nommage précis disponible sur la page rapport générée par Hugo
         │    │    ├── ojdcourtsepay.tylerhost.net-navigation-step.png
         │    │    ├── pages.fivepointpayments.com-navigation-step.png
         │    │    └── finepayment.saskatchewan.ca-navigation-step.png
         │    └── quality
         │         └── 2020-10-16 // Les titres formant les noms d’images doivent correspondre à des termes existant dans le fichier `.yml`
         │             ├── titrepage-[before ou after].png
         │             ├── titrepage-titrebloc-titreerreur-[before ou after].png
         │             ├── accueil-before.png
         │             ├── accueil-after.png
         │             ├── accueil-banniere-titres-before.png
         │             └── accueil-banniere-titres-after.png
         ├── next_baldir
         └── personas

[marc-bouvier]

Et avec une vue plus macro sur le dépôt git, ça donnerait quelque chose comme ça:

.
├── audit             # contenu de frago (voir arborescence décrite plus haut)
├── baldir.fr         # projet/générateur du site baldir.fr
├── infra             # scripts d'hébergement
├── next.baldir.fr    # projet/générateur du site next.baldir.fr
├── .gitlab-ci.yml    # pipeline de CI/CD gitlab
├── Makefile          # scripts d'automatisation
└── README.md

[bertrandkeller]

Tu peux mettre les audits directement dans content. Pas forcément dans static.
Mais j'ai prévu de pouvoir le faire donc si tu veux tout mettre dans static, tu peux.

Tu auras pas besoin des images non plus, c'est pour l'auditeur ultra avancé.

Mais j'ai pas creusé le fait d'ajouter Frago dans un site. C'est pas vraiment la priorité. Mais ça doit pouvoir se faire.

[marc-bouvier]

Merci pour l'info concernant static et content.

Si je le fais, ca pourra faire un exemple du coup.

[bertrandkeller]

Je vais essayer d'utiliser a même structure pour la documentation. Et avoir un site exemple pour présenter la navigation.

[bertrandkeller]

Hello,

Ça avance : https://disic.github.io/frago/audits/

Frago intégrer comme un second thème avec un module.

[marc-bouvier]

Hop,

Voila qui est déployé : https://audits.baldir.fr/

Pour le moment, le contenu des audits est bidon. Mais c'est construit via CI/CD de Gitlab et déployé automatiquement.

[marc-bouvier]

En attendant de me créer un logo j'ai mis ma tronche à la place de la république française :)