1. Vérifier que vous avez Node.js

   node -v

   puis de npm avec

   npm -v

   Sinon télécharger et installer Node.js

2. Installer gulp

   npm install gulp-cli -g

   gulp -v pour connaitre la version installer

3. Initialiser un nouveau projet

   npm init -y

   Un fichier package.json

   est créer

4. Installation de ce qui est nécessaire

   npm install --save-dev gulp gulp-sass browser-sync gulp-autoprefixer gulp-clean-css gulp-sourcemaps gulp-mode gulp-concat gulp-rename gulp-uglify

5. Créer le fichier gulpfile.js à la racine du projet

   const gulp =  require('gulp');
   const sass = require('gulp-sass')(require('sass'));
   const prefix = require('gulp-autoprefixer');
   const minify = require('gulp-clean-css');
   const sourcemaps = require('gulp-sourcemaps');
   const mode = require('gulp-mode')();
   const browserSync = require('browser-sync').create();
   const concat = require('gulp-concat');
   const rename = require('gulp-rename');
   const uglify = require('gulp-uglify');
   
   
   // compilation des styles CSS
   function styles(){
       // Emplacement des fichiers .scss
       return gulp.src('./_scss/style.scss')
       // Source map
           .pipe(mode.development( sourcemaps.init() ))
       // Passer ces fichiers au compilateur + si erreur affiche les log
           .pipe(sass().on('error', sass.logError))
       // Préfixer automatiquement les propriétés nécessaire
           .pipe(prefix('last 2 versions'))
       // Minifier
           .pipe(minify())
       // Source map
           .pipe(mode.development( sourcemaps.write() ))
       // Emplacement du fichier .css généré
           .pipe(gulp.dest('./style/'))
       // changements de flux pour tous les navigateurs
           .pipe(mode.development( browserSync.stream() ));
   }
   
   // compilation des scripts JavaScript
   function scriptJs(){
       return gulp.src('./js/*.js')
           .pipe(concat('script.js'))
           .pipe(rename({suffix: '.min'}))
           .pipe(uglify())
           .pipe(gulp.dest('./'))
           .pipe(mode.development( browserSync.stream() ));
   }
   
   // watch
   function watch() {
       browserSync.init({
           server: {
               baseDir: './'
           }
       });
       gulp.watch('./_scss/**/*.scss', styles);
       gulp.watch('./*.html').on('change', browserSync.reload);
       gulp.watch('./js/**/*.js', scriptJs);
   }
   
   // Compilation des styles pour la prod
   function buildScss(){
       // Emplacement des fichiers .scss
       return gulp.src('./_scss/style.scss')
       // Passer ces fichiers au compilateur + si erreur affiche les log
           .pipe(sass().on('error', sass.logError))
       // Préfixer automatiquement les propriétés nécessaire
           .pipe(prefix('last 2 versions'))
       // Minifier
           .pipe(minify())
       // Emplacement du fichier .css généré
           .pipe(gulp.dest('./style/'));
   }
   
   
   exports.watch = watch;
   exports.build = gulp.series(buildScss, scriptJs);

6. gulp build pour la production
   gulp watch pour la dev

• CSS
• JavaScript
• Démonstration
  • Basculer en mode sombre
  • Mode sombre par défaut

CSS

1. Utiliser les propriétés personnalisées (custom properties en anglais) pour gérer vos couleurs
   Donné un nom fonctionnel ou plus simplement numérote vos couleurs !

   body {
       background:var(--color1);
       color:var(--color2);
   }

2. Créer le thème par défaut dans :root

   Mode clair par défaut

   :root {
       --color1:white;
       --color2:black;
       --color3:#F2F2F2;
   }

   Mode sombre par défaut

   :root {
       --color1:#222;
       --color2:#FFF;
       --color3:#555;
   }

3. Définissez le jeu de couleurs du navigateur avec la propriété color-scheme ;

   Lorsqu'un utilisateur sélectionne un de ces jeux de couleurs, le système d'exploitation fait des ajustements à l'interface utilisateur. Cela comprend les contrôles de formulaires, les barres de défilement et les valeurs utilisées par le système de couleurs CSS.

   Mode clair par défaut

   :root {
       --color1:white;
       --color2:black;
       --color3:#F2F2F2;
       color-scheme: only light;
   }

   La valeur only sert à désactiver le remplacement de couleur du mode nuit du moteur de rendu Blink

   Mode sombre par défaut

   :root {
       --color1:#222;
       --color2:#FFF;
       --color3:#555;
       color-scheme: dark;
   
   }

4. Créé le thème équivalent pour l'autre mode

   Mode clair par défaut

   .dark {
       --color1:#222;
       --color2:#FFF;
       --color3:#555;
       color-scheme: dark;
   }

   Mode sombre par défaut

   .light {
       --color1:white;
       --color2:black;
       --color3:#F2F2F2;
       color-scheme: only light;
   }

JavaScript

1. let root = document.querySelector(":root");

2. Détecter la préférence de l'utilisateur

   Mode clair par défaut

   if (
       window.matchMedia &&
       window.matchMedia("(prefers-color-scheme: dark)").matches
   ) {
       root.classList.toggle("dark");
   }

   Mode sombre par défaut

   Comme dans la grande majorité des cas, le thème clair n'est pas demandé (car par défaut), je conserve le thème sombre du site

3. Détecter le changement de préférence utilisateur

   Mode clair par défaut

   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
       if(e.matches) {
           root.classList.add("dark");
       } else {
           root.classList.remove("dark");
       }
   });

   Mode sombre par défaut

   Pas de détection non plus

4. Basculer de mode à tout instant en une action

   Mode clair par défaut

   document.querySelector("button").addEventListener("click", () => {
       event.preventDefault();
       root.classList.toggle("dark");
   });

   Mode sombre par défaut

   document.querySelector("button").addEventListener("click", () => {
       event.preventDefault();
       root.classList.toggle("light");
   });

5. Je recommande de sauvegarder dans le localStorage tout changement de mode afin de pouvoir le configurer lors de la prochaine visite

Démonstration

Basculer en mode sombre

Mode sombre par défaut

Seuls les liens des extensions Firefox sont répertoriés parce que ce navigateur fait partie des environnements de test officiels à la différence de Chrome.

• Motif de conception — ajouté le 1 juin 2023

  Décrit structure, rôles et propriétés et comportement d’un composant JavaScript(widget).

  ARIA authoring practices

• HeadingsMap

  Génère la structure des titres et affichent les erreurs de niveau

  Addons Firefox

• WCAG Contrast checker

  Vérifie la conformité des niveaux de contraste de la combinaison des couleurs d'avant-plan et d'arrière-plan sur la base des exigences des WCAG 2.1.

  Addons Firefox

• Stylus

  Appliquez des styles personnalisés sur un site, gestionnaire de style

  • Addons Firefox
  • Style d'audit (.json 62ko)

• color.review

  Un outil moderne pour explorer et trouver des couleurs accessibles.

  https://color.review/

• Web Developer

  Ajoute divers outils de développement web au navigateur.

  Addons Firefox

• NVDA

  Un lecteur d'écran libre et gratuit pour Microsoft

  • https://www.nvda-fr.org/
  • Liste des raccourcis clavier NVDA (.pdf 443ko)

• A11y audit bookmarklets

  Une collection de marque page javascript axés sur l'accessibilité

  https://a11y-tools.com/bookmarklets/

• Validateur W3C

  Le service de validation de balises HTML

  • https://validator.w3.org/
  • Marque page javascript : Validateur

    Faites-le glisser dans votre barre d'outils ou cliquez avec le bouton droit de la souris et ajoutez-les à vos favoris. Vous pouvez ensuite les exécuter quand vous en avez envie.

• Introduction
• Un nom mémotechnique
• Principe de conception de l'architecture
  • Arborescence
  • Bonne pratique
  • Convention de nommage
• Quelques mauvaises expériences
  • Mauvaises traductions
  • Imbrication sur des composants complexes

Introduction

La modèle BUSE est un ensemble de principe de conception, de regle d'usage et d'organisation afin de mettre en place du code SCSS maintenable.
L'ensemble de ses règles n'est pas immuable et doit être adapté à vos besoins.
Les cas fondateurs du modèle

Un nom mémotechnique

• Base : Function, mixin, variable, reset
• Utilitaire : Les éléments de base réutilisable et partageable
• Structure : Les squelettes responsive sans le contenu
• Element : Spécificité d'un usage
• Satellite : Les bibliothèques externes et leurs surcharges

Principe de conception de l'architecture

• Avoir une arborescence simple et compréhensible par tous
• Appliquer des règles de nomenclature et les respecter
• Décider de tout cela avec son équipe, les impliquer

Arborescence

_sass
    1-Base
    2-Utilitaire
    3-Structure
    4-Element
    5-Satellite
    style.scss

Les dossiers principaux

L'ensemble des fichiers SCSS doit être regroupé et classé dans des répertoires
Préfixé chaque dossier par une numérotation afin de les faire apparaitre dans un ordre logique : du plus abstrait au plus spécifique

Chacun de ses répertoires possède un fichier index nommé __index.scss
Le double undersore permet que le fichier se retrouve toujours en haut de l'arborescence.

_sass
    2-Utilitaire
        __index.scss
        _block.scss
        _bouton.scss
        _espacement.scss
        _flex.scss
        _text.scss
        _z-index.scss

L'index sert de fichier d'intermédiaire pour importer tous les fichiers ou les index des sous-dossiers à la racine de ce répertoire.
Les imports sont classés par ordre alphabétique où par besoin quand c'est nécessaire
Utiliser des sous-dossiers dès lors que deux fichiers ou plus aborde le même thème

@import 'block';
@import 'bouton';
@import 'espacement';
@import 'flex';
@import 'text';
@import 'z-index';

@import 'breakpoint';
@import 'couleur';
@import 'taille';

@import 'font';
@import 'base';
@import 'z-index';

@import 'Variable/_index';
@import 'Function/_index';
@import 'Mixin/_index';

@import 'couleur';
@import 'focus';
@import 'font';
@import 'base';

La langue

Le français ou la langue maternelle de l'équipe :

• On évite tous problèmes de mauvaises traductions
• Le franglais est conseillé pour les mots francisés (pourriel par exemple) et pour des termes techniques (responsive, flex etc...)
• Un jargon métier est difficilement traduisible
• En cas de rachat, ça leur fera les pieds !
• Si votre équipe est internationale on utilisera l'anglais, imposés quelque court de rafraichissement à vos équipes !

Fichier a la racine

La feuille de style qui comporte tous les imports nécessaires, style.scss

@import '1-Base/_index';
@import '2-Utilitaire/_index';
@import '3-Structure/_index';
@import '4-Element/_index';
@import '5-Satellite/_index';

Au même niveau, l'on peux ajouter des feuille spécifique, qui importerait tous les styles de texte et lien/bouton pour les appliques dans un éditeur WYSIWYG par exemple

Bonne pratique

Établir des règles

Que l'on travaille seul où a plusieurs, il est essentiel d'établir des règles sans exception, pour ne pas à avoir à faire du cas par cas et a complexifié votre projet.
Des règles sur la nomenclature de fichier, de dossier, de nom de classe, de type de sélecteur, de norme d'indentation et de tous ce qui vous semble utile, de chose que vous avait pu rencontrer par le passé et que vous ne souhaitez pas revoir !
Idéalement il faut mettre tous ça par écrit, sur un page de votre style guide

Bannir les imbrications

Même si les imbrications peuvent faciliter la vie et que cette fonctionnalité est en working draft coté CSS, voir CSS Nesting Module
Son abus ou son utilisation pour des composants complexes est inapproprié.
Pour avoir une règle simple, mieux vaut l'interdire !

Établir une convention de Nommage

Utilisé une méthodologie existante ou faite en une a votre image : convention de nommage de BUSES

Découpage en dossier

À partir de deux fichiers traitant du même thème on, crée un sous-dossier avec un index

CSS réinitialisation

On n'utilise pas de CSS reset tout fait, on créé son propre fichier en fonction de son besoin.
Beaucoup de réinitialisations ne sont plus à jour ou peuvent ajouter des contraintes

Convention de nommage

Un savant mélange de BEM et de OOCSS afin de gommer les imperfections

• On n'utilise pas les imbrications
• On n'utilise pas les id
• On n'utilise pas de !important
• On n'utilise pas les classes de style pour cibler un élément en JavaScript
• On préfixe par js__ les classe pour le JavaScript
• On travail en utilitaire
• On utilise des sélecteurs à un seul niveau, __ pour un sous-élément

  .bouton { ... }
  .bouton__forme { ... }
  .bouton__icon { ... }
  <button class="bouton">
      <span class="bouton__forme">
          <img src="bouton__icon" alt="">
      </span>
  </button>

• Les modificateurs d'un élément sont préfixé v-- (v pour variation)
  

  .bouton { ... }
  .bouton.v--actif { ... }
  <button class="bouton v--actif"></button>

• On ne déclare que ce que l'on utilise
  Pas de fonction pour généré tout l'espacement possible en toutes les tailles, direction, point de rupture
• On utilise les initiles des propriété et valeur pour faires les utilitaires des espacement, du flexbox et cssgrid
  .mt-2 pour marin-top de taille 2
  .df pour display:flex
.ji-c pour justify-items: center;

Quelques mauvaises expériences

Mauvaises traductions

Je comptais ajouter un nouveau composant réutilisable pour géré les cadre, lorsque je découvrir qu'il en existait déjà un mais il était nommé card. Hors cadre en anglais c'est frame
Je pense qu'il y a confusion entre le sous-élément carte qui reprend une partie des propriétés d'un cadre.

Imbrication sur des composants complexes

En voulant changer la couleur de soulignement d'un lien actif sur un mega menu responsif, je suis tomber sur un fichier faisant plus de 300 lignes de code imbriqué, écris en BEM.
Des &__item il y en avait des dizaines sans compter tous les états actif, hover, focus...
Impossible de faire une simple recherche Ctrl + F

Sommaire

• Website Carbon Calculator
• GTmetrix
• PageSpeed Insights

Website Carbon Calculator

GTmetrix

PageSpeed Insights

• Bonne pratique
• Environnement de test
• Tabulation
• Base HTML
• Autre balise HTML
  • Citation
  • iframe
  • Image
  • Vidéo
  • Tableaux
• CSS
• Lien
• Formulaire
• Aria
• Laisser le contrôle à l'utilisateur

Bonne pratique

• Privilégier les éléments natifs HTML
• Ne modifier la sémantique des éléments natifs où sinon vérifié qu'il n'y est pas de conséquence
• S’assurer que les composants sont opérables au clavier et à la souris
• S’assurer que chaque composant a un nom correctement lié au composant
• Tester les composants, voir les environnements de test
• Passer la page au validateur du w3c

Environnement de test

• Environnement de bureau

  Technologie d’assistance	Navigateur
  NVDA (dernière version)	Firefox
  JAWS (version précédente)	Firefox
  VoiceOver (dernière version)	Safari

• Environnement mobile - Combinaison 1

  Système	Technologie d’assistance	Navigateur
  iOS	VoiceOver (dernière version)	Safari

  ou

  Environnement mobile - Combinaison 2

  Système	Technologie d’assistance	Navigateur
  Android	Talkback (dernière version)	Chrome

  Il est fortement conseillé de tester dans les deux environnements mobile

Tabulation

• Ordre de tabulation cohérent avec le code ; titre avant paragraphe, ordre des conteneurs ( vérifier avec le site sans styles)
• Pas de piège au clavier

• Ne jamais utiliser des tabindex supérieurs à 0, laissez le navigateur faire
  

  tabindex="0"

  Permets de capturer le focus et être atteint via la navigation au clavier
  Inclut l'élément dans le parcours séquentiel de tabulation pour un élément qui ne prend pas le focus, une div par exemple

  tabindex="-1"
  • L'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier
  • Exclu du parcours séquentiel un élément qui prend le focus (lien, button…)
  • Permets à l'élément ne prenant pas nativement le focus de le recevoir (méthode javascript focus)
  • Attention l'élément restera accessible par les techniques d'assistance (différent d'aria hidden="true")
• Accès au contenu additionnel affiché doit être atteint au clavier
• La zone doit rester visible tant que le focus se trouve dans l'élément
• Penser à mettre un bouton fermer pour pouvoir revenir à l'endroit initial
• Désactiver ou permettre de configurer les raccourcis

Base HTML

• Ordre des éléments logique (titre avant paragraphe) abusé du flex order ou grid
• Respect de la sémantique HTML

• <!DOCTYPE html>
  <html lang="fr">
  <title>Titre pertinents et unique</title>
  <header role="banner"></header>
  <main id="contenu" role="main" tabindex="-1"></main>
  <nav role="navigation"></nav><!--navigation principale et secondaire-->
  <aside role="complementary"></aside>
  <footer role="contentinfo"></footer>
  <div role="search">
      <form></form>
  </div>

• <h2 role="heading" aria-level="3">

• <nav role="navigation" aria-label="Accès rapide">
      <a class="lien-evitement" href="#contenu">
          Aller au contenu
      </a>
  </nav>
  .lien-evitement {
      position:absolute;
      left:-99999rem;
  }
  .lien-evitement:focus {
      left:0
  }

• Au moins 2 systèmes de navigation parmi :
  • navigation principale
  • plan du site : non exhaustif autorisé
  • moteur de recherche : exhaustif des pages
  Présentation cohérence et emplacement identique sur chaque page

• <nav role="navigation" aria-label="Menu de navigation">
      ...
  </nav>

  nav réservé aux zones de navigation principale et secondaire :
  • menu principal
  • menu de sous-rubrique
  • navigation dans les collections de pages
  • navigation dans les résultats de recherche
  • le Fil d'ariane
  • les liens d’évitement
• Changement de langue : ajouter l'attribut lang sur l’élément ou un parent.
• Changements de sens de lecture : dir
• Modal : Garder le focus à l'intérieur !

  <div aria-labelledby="title" tabindex="-1" role="dialog">
      <button title="Fermer"><span aria-hidden="true">X</span></button>
      <h1 id="title">Alan Turing</h1>
      content...
  </div>

Autre balise HTML

Citation

<blockquote>
    <p>Aimer, ce n'est pas se regarder l'un l'autre,
        c'est regarder ensemble dans la même direction.</p>
    <cite>Antoine De Saint-Exupéry</cite>
</blockquote>

iframe

<iframe title="Publicité"></iframe>

<!--Cadres techniques (Google Analytics, etc.)-->
<iframe aria-hidden="true"></iframe>

Image

• <!--décorative-->
  <img src="image.png" alt="" />
  <img src="image.png" aria-hidden="true"/>
  <img src="image.png" role="presentation"/>
  <svg aria-hidden="true"></svg>
  
  <!--porteuses d’information => Nom accessible /!\ Algorithme de calcul -->
  <img src="image.png" alt="foobar" />
  <img src="image.png" title="foobar" />
  <img src="image.png" aria-label="foobar" />
  <img src="image.png" aria-labelledby="desc" /><p id="desc">foobar</p>
  <svg role="img" aria-label="foobar">…</svg>
  <svg role="img" aria-labelledby="desc">…</svg><p id="desc">foobar</p>
  
  <!--Texte en images ou grande description-->
  <img src="img.png" alt="infographie" />
  <a href="description.html">Description détaillée de l'infographie</a>
  
  <img src="img.png" alt="infographie" />
  <button aria-expanded="false">Description détaillée de l'infographie</button>
  
  <!--Légendées sans alt-->
  <figure role="group|figure" aria-label="Légende de l’image">
      <img src="…" alt="" />
      <figcaption>
          Légende de l’image
      </figcaption>
  </figure>
  
  <!--Légendées avec alt-->
  <figure role="group|figure" aria-label="alt-image Légende de l’image">
      <img src="…" alt="alt-image" />
      <figcaption>
          alt-image Légende de l’image
      </figcaption>
  </figure>

• <!--Image map-->
  <img src="" alt="Carte de France" usemap="#LIEUX" />
  <map id="lieux" name="LIEUX">
      <area href="regi42" alt="Alsace">
      <area href="regi53" alt="Bretagne">
  </map>

• Captcha : porposer une alternative sonore ou mieu email/sms (captcha de google conforme)

  <img src="" alt="Code de confirmation à saisir"/>

Vidéo

• Contrôles obligatoires, Clavier/souris, Nom pertinant, maj des data timing...
• Alternatives : Transcription textuelle, sous-titre, Audiodescription
• Player accessible : Able Player, MFP Player, Plyr, BrightCove, YouTube

Tableaux

• Titré avec caption ou aria-labelledby="id"
• Tableau complexes : ajoute un résumé de l’organisation du tableau pour tous (afficher/masquer)

  <caption>
      Figure 2 - Répartition des déchets non dangereux non minéraux hors boues de l’industrie
      manufacturière par type en 2016
      <button type="button" aria-expanded="false">Résumé de l’organisation du tableau</button>
      <span class="hide">
          Les industries agroalimentaires (IAA) et les industries manufacturières (hors IAA)
          sont présentées sur 2 colonnes, avec, pour chacune d’elles la quantité en milliers
          de tonnes le pourcentage. Une troisième colonne présente le total des deux
          industries, en milliers de tonnes et en pourcentage.
      </span>
  </caption>

• Proposer une alternative pour tous (afficher/masquer) en mode liste par exemple
• Déclaration des entêtes <th scope="[col|row]">
• Cellules d’en-têtes

  <tr>
      <td aria-hidden="true"></td>
      <th id="entete1" colspan="2">Industries agroalimentaires (IAA)</th>
      <th id="entete2" colspan="2">Industries manufacturières (hors IAAA)</th>
      <th id="entete3" colspan="2">Ensemble</th>
  </tr>
  <tr>
      <td aria-hidden="true"></td>
      <th id="entete4">Quantités (en milliers de tonnes)</th>
      <th id="entete5">en %</th>
      <th id="entete6">Quantités (en milliers de tonnes)</th>
      <th id="entete7">en %</th>
      [...]
  </tr>
  <tr>
      <td>Déchets banals</td>
      <td headers="entete1 entete4">1 147</td>
      <td headers="entete1 entete5">31</td>
      <td headers="entete2 entete6">9 795</td>
      <td headers="entete2 entete7">97</td>
      [..]
  </tr>

CSS

• Une information ne doit pas être donnée uniquement par la couleur ou une forme
• Pas d’attribut de mise en forme, seul width et height sur les médias
• Pas de contenu dans le CSS, car insible pour les lecteur d'ecran
• Couleur de texte, de lien et de fond sur le body par défaut
• Texte lisible avec zoom à 200%
• Hors tableau, pas de scroll :
  • verticale : 320px de large minimum
  • horizontale : 256px de hauteur minimum
• Le texte reste lisible avec

  * {
      line-height: 1.5 !important;
      letter-spacing: 0.12em !important;
      word-spacing: 0.16em !important;
  }
  
  p {
      margin-bottom: 2em !important;
  }

• focus
  • touche Echap masque, survolé sans disparaitre, reste visible tant que le composant est actif
  • sauf amélioration pas touche au outline
• focus et hover : suffisamment contrastés
• Contrat des textes
  • + de 24px ou 18.5 gras : 3 minimum
  • - de 24px ou - 18.5px gras : 4.5 minimum
• lien souligné ou contrastés

Lien

• Intitulé explicite
• Ajouter un title sur les

• <a href="#url" aria-label="Retour Accueil du site">Retour</a>

• <a href="#url" title="Retour Accueil du site">Retour</a>
  <a href="blog" title="Blog Page active">Blog</a> <!-- page active -->

• <a href="#lien">
      <img alt="intitule">
  </a>
  
  <a href="#lien" aria-label="intitule">
      <i class="fa-solid fa-house"></i>
  </a>
  
  <a href="#lien">
      <span class="sr-only">intitule</span> <!-- méthode conseillée car native -->
      <i class="fa-solid fa-house"></i>
  </a>

• aria-label n'est pas correctement traduit par google translate
  Préféré les méthodes : sr-only ou title

Formulaire

• label visible et nom accessible (Le placeholder n’est pas suffisant)
• Si title et placeholder alors leur contenu sont identiques
• Les labels et les champs doivent être accolés
• Regroupement des ensemble de radio, checkbox, période de date (début et fin) ou d'ajout d'une répétition (une personne : nom, prénom et age)
• Les textes liés par les propriétés aria-labelledby ou aria-describedby font partie des propriétés de l’élément, ils sont donc toujours disponibles, y compris lorsqu’ils sont cachés par CSS avec display:none ou visibility:hidden

<fieldset>
    <legend>Adresse de facturation</legend>
    [champs ...]
</fieldset>
<!--ou-->
<div role="groupe" aria-labelledby="legendAdresse">
    <p id="legendAdresse"> Adresse de facturation : </p>
    [champs ...]
</div>

• Ajouté le complément directe dans l'étiquette de champ
  L'utilisation d'une double <label for=""> est déconseiller

  <label for="name">
      <strong>Prénom</strong><br>
      40 caractere max
  </label>
  <input id="name"/>

• ou une combinaison de label et de aria-describedby

  <label for="name">Prénom</label>
  <input id="name" aria-describedby="info"/>
  <p id="info">40 caractere max</p>

• ou utilisé un aria-labelledby multiple

  <p id="label">Prénom</p>
  <input type="text" aria-labelledby="label info"/>
  <p id="info">40 caractere max</p>

• <select>
      <optgroup label="Véhicules">
          <option>Voiture</option>
          <option>Motos</option>
          …
      </optgroup>
      <optgroup label="Immobilier">
          <option>Maison</option>
          <option>Appartements</option>
          …
      </optgroup>
  </select>

• Les boutons « ok », « valider », « envoyer », etc. ne sont pas suffisamment pertinents.

  <input type="submit" value="Envoyer le message" />
  
  <input type="image" src="loupe.png" alt="Rechercher sur le site">
  
  <input type="submit" value="OK" title="Envoyer le message" />
  
  <input type="submit" aria-label="Effacer mes données"/>
  
  <input type="submit" aria-labelledby="desc-btn" />
  <span id="desc-btn">Envoyer le message</span>
  
  <input type="submit" value="Enregistrer" aria-label="Enregistrer Valider mes modifications"/>

  aria-label ou aria-labelledby) sont toujours prioritaires sur les liaisons natives (value, alt, title)
• Obligatoire et facultative
  • Tout est obligatoire : le mettre en début de formulaire
  • Mixte : Ajouter une astérisque dans les champs obligatoire + mettre une légende en haut du formulaire
  • Majorité de facultatif : Possibililité de mettre les champs optionnels directement après le label
  • Attribut required sur chaque champ obligatoire ou aria-required="true"
  • Indication visible

    <label for="name">Prénom</label>
    <input id="name"/ aria-describedby="required">
    <p id="required">Champs obligatoire</p>

• Message d'erreur
  • Relié avec un aria-describedby
  • Fournis un exemple de saisie réelle
  • En cas de rechargement : Préfixé le titre de la page par « erreur sur le formulaire »
• Indication de format de saisie : requise que pour les champs obligatoires, mais conseillé globalement
  Si possible dans le label sinon aria-label, aria-labelledby ou title

  <label for="date">Votre date de naissance</label>
  <input type="text" aria-describedby="aidedate" id="date" />
  <p id="aidedate">La date est de la forme 12/07/1981</p>

• Champs qui collectent des informations personnelles sur l’utilisateur : autocomplete Liste des valeurs
• Suppression ou modification de données à caractère personnel : pouvoir annuler la suppression ou re-modifier par la suite ou confirmer explicitement par une case a coché supplémentaire

Aria

• Privilégier le natif et testez !
• Ne pas changer la sémantique (validator w3c siu besoin)
• Composant interactif utilisable au clavier, Motif de conception (en anglais)
• Tout composant interactif doit avoir un nom accessible
• Un composant qui déclenche l'ouverture d'une page ou d'un onglet doit être un lien même si ce sont des actions Javascript

  <a role="link" tabindex="0" onclick="myFunction()"></a>
  <!-- ou -->
  <a href="#" onclick="myFunction()"></a>

• État et changements d'état : Ne pas faire de rechargement de page, d'une partie ou de changement de page par défaut, mettre un bouton pour faire l'action
  • inactif disabled
  • Bouton qui affiche masque aria-expanded="true/false"
  • Élément actuel aria-current
  • Liste exhaustive des États et propriétés ARIA (en anglais)
• Statut
  • aria-live="assertive" : le contenu est vocalisé immédiatement
  • aria-live="polite" : le contenu est vocalisé dès que l'utilisateur est disponible
  • aria-atomic="true" restitue tout, à ne pas utiliser dans un tchat par exemple
  • aria-atomic="false" restitue uniquement le dernier ajout

  Ne pas en abuser, parfois contre-productif, repositionner le focus peut être plus pertinent

• Message
  • Messages d'erreurs :
    <p role="alert">Ceci est une alerte</p> ou aria-live="assertive"+aria-atomic="true"
  • Messages d'informations :
    <p role="status">Ceci est une information</p> ou aria-live="polite"+aria-atomic="true"
    Message d'erreur général en début de formulaire

    <div tabindex="-1" role="status">
        <p>Le formulaire contient des erreurs. Veuillez vérifier votre saisie puis envoyer à
            nouveau votre demande s’il vous plaît.</p>
    </div>

  • Messages de notifications :
    role="log" ou aria-live="polite" et aria-atomic="false"
  • Messages d’attente
    Seulement pour des tâches qui prennent beaucoup de temps.
    

    <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>
    <!-- ou -->
    <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2&nbsp;: Copie des fichiers…" aria-valuemax="100">
        Étape 2&nbsp;: Copie des fichiers…
    </div>

    Repositionner le focus sur un élément pertinent, par exemple la zone mise à jour

Laisser le contrôle à l'utilisateur

• L’utilisateur doit pouvoir supprimer ou augmenter la limite de temps (20h minium)
• L'utilisateur peut arrêter et relancer un rafraîchissement automatique, proposer un bouton pour désactiver/activer le live upload par exemple
• Pas de nouvelles fenêtres sans action de l’utilisateur
• Une seule fenêtre s'ouvre à la fois
• Documents en téléchargement : accessible ou alternative
• Évité de lancer une vidéo, un son ou un slider automatiquement sinon bouton pause
• Évité les effet de flash (3 flash par seconde)
• Le contenu doite être consultable portrait et paysage, ne pas bloquer
• Toutes fonctionnalités utilisables par des gestes doit avoir des équivalences en boutons
• Prévoir un mécanisme qui permet d’interrompre l'exécution de l'action avant la fin en cas de mousedown sur desktop et touchstart sur mobile

RGAA : Consultation

• Limite de temps de session
• Rafraichissement automatique
• Nouvelles fenêtres
• Documents en téléchargement
• Clignotement et contenus en mouvement
• Effet de flash
• Son déclenché automatiquement
• Indépendance de l’orientation
• Gestes complexes
• Annulation du pointeur
• Activation par le mouvement

Limite de temps de session

• L’utilisateur doit pouvoir supprimer ou augmenter la limite de temps ;
• La limite de temps est de vingt heures au moins ;
• Cas particulier lorsque la limite de temps est essentielle.

Il faut penser à ceux qui on besoin plus de temps que les autres pour faire les mêmes manipulations, pour un utilisateur de contacteur au souffle ou autre par exemple

Afficher un message dans une modale par exemple pour prolonger ou supprimer la limite de session

Rafraichissement automatique

• L'utilisateur peut arrêter et relancer le rafraîchissement ;
• L'utilisateur est alerté de l’imminence d’un rafraichissement et peut augmenter le délai de 10 fois au moins.

Que le rafraîchissement soit total soit partiel, proposer un bouton pour désactiver/activer le live upload par exemple

Nouvelles fenêtres

• Pas de nouvelles fenêtres sans action de l’utilisateur
• Une seule fenêtre s'ouvre à la fois

Documents en téléchargement

• Document accessible ;
• Ou alternative accessible : HTML, .doc, .odt structurés.

Pensez à fournir une alternative, notamment pour les PDF qui sont très difficile a rendre accessible

Ressources : Liste des critères Documents bureautiques en téléchargement (Le Grand-Duché de Luxembourg, docx, 66 kilo-octets). Attention basé sur le RGAA 3

Clignotement et contenus en mouvement

L'utilisateur doit pouvoir :

• Arrêter et relancer, sur un slider prévoir un bouton pause s'il se lance automatiquement
• Masquer et réafficher
• Afficher le contenu sans le mouvement
• Le mouvement dure 5 secondes ou moins
• Contrôle individuel

Évité de lancer une vidéo, un son ou un slider automatiquement

Effet de flash

• Fréquence limite =< 3 flash par seconde
• ou surface cumulée =< 21824 pixels

Outil PEAT (Photosensitive Epilepsy Analysis Tool)

Mauvais exemple : London 2012 Olympics Seizure

Son déclenché automatiquement

• Les sons et vidéo doivent être contrôlable
• On évite de les lancer automatiquement bien sur !
• De préférence, le contrôle doit être le premier élément de la page.

Indépendance de l’orientation

• Le contenu doite être consultable portrait et paysage, ne pas bloquer
• Sauf si l'orientation est essentielle

Gestes complexes

Les fonctionnalités utilisables par des gestes multipoints (zoom sur une carte) ou basés sur un tracé (swipe) :

• peuvent être réalisées avec un geste à point unique et/ou sans trajectoire,
• sauf si le geste est essentiel(ex. le dessin d’une signature).

Sur une slider au swipe, ajouter une navigation avec des boutons !

Annulation du pointeur

• Aucun événement ne doit être déclenché sur l’action descendante
  (down : mousedown sur desktop / touchstart sur mobile)
• ou prévoir un mécanisme qui permet d’interrompre l'exécution de l'action avant la fin ;
• ou un mécanisme permet d’annuler l'action.

Activation par le mouvement

Les fonctions qui sont déclenchées en déplaçant l’appareil (en secouant ou en basculant) ou lorsque l’utilisateur effectue un mouvement capté par les dispositifs de l’appareil (eg. une caméra) peuvent être :

• actionnées par des composants classiques (un bouton) ;
• désactivées pour éviter un déclenchement accidentel ;
• sauf si le mouvement est essentiel pour la fonction.

RGAA : Navigation

• Lien d’accès rapide
• Positionnement hors écran
• Landmarks ARIA
• Systèmes de navigation
  • Menu de navigation
  • Plan du site
  • Moteur de recherche
  • Fil d'Ariane
• Ordre de tabulation, piège au clavier
• Accès au contenu additionnel affiché
• Raccourcis clavier

Lien d’accès rapide

• Accès rapide au contenu principal (obligatoire), d'autres lien possible sans en abuser
• Visible à la prise de focus
• Doit se trouver en premier dans le code HTML de la page
• tabindex="-1" sur l'élément cible pour se retrouver sur la zone et non sur un élément à l'intérieur
  

  <a href="#main">contenu</a>
  <main id="main" tabindex="-1"> .... </main>

Positionnement hors écran

.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

Improved par #FFOODD

Landmarks ARIA

• Uniques dans la page :
  • role="banner" pour l’en-tête du document
  • role="main"
  • role="contentinfo" pour le pied de page
  • role="search" pour un formulaire de recherche, a positionner sur le conteneur du formulaire, pas sur la balise form
  • role="complementary" pour l'<aside>
• role="navigation" : plusieurs occurrences autorisées pour les navigations principales et secondaires

Systèmes de navigation

Il faut en avoir au moins deux parmi :

• Menu de navigation
• Plan du site
• Moteur de recherche

Menu de navigation

• Même place dans chaque ensemble de pages.
• Présentation cohérente dans chaque ensemble de pages.

La page d'accueil peut avoir un mise en page différente, navigation comprise

Plan du site

• Même place dans chaque ensemble de pages.
• Même méthode dans chaque ensemble de pages.
• Représentatif de l’architecture générale du site, pas besoin d'avoir toutes les pages référencer
• Tous les liens sont fonctionnels avec des intitulés pertinents

Moteur de recherche

• Même place dans chaque ensemble de pages.
• Même méthode dans chaque ensemble de pages.
• Doit indexer tous les contenus

Fil d'Ariane

• Pas d'obligation de le mettre dans le <main>, peut-être en fin de contenu ou dans le pied de page !
• Tous les liens sont fonctionnels avec des intitulés pertinents

Ordre de tabulation, piège au clavier

• Ordre de tabulation cohérent avec le code ; titre avant paragraphe, ordre des conteneurs ( vérifier avec le site sans styles)
• Pas de piège au clavier (focus figé, focus sur un élément invisible, bug JS, boucle infinie)
  Attention au datepicker, pensez à mettre un bouton calendrier pour ouvrir et surtout fermer le calendrier pour éviter toute boucle

• Ne jamais utiliser des tabindex supérieurs à 0, laissez le navigateur faire
  Il peut avoir plusieurs tabindex="0" et tabindex="-1" dans une page

  tabindex="0"

  Permets de capturer le focus et être atteint via la navigation au clavier
  Inclut l'élément dans le parcours séquentiel de tabulation pour un élément qui ne prend pas le focus, une div par exemple

  tabindex="-1"
  • L'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier
  • Exclu du parcours séquentiel un élément qui prend le focus (lien, button…)
  • Permets à l'élément ne prenant pas nativement le focus de le recevoir (méthode javascript focus)
  • Attention l'élément restera accessible par les techniques d'assistance (différent d'aria hidden="true")

Accès au contenu additionnel affiché

• L'élément doit être atteint au clavier
• La zone doit rester visible tant que le focus se trouve dans l'élément

Penser à mettre un bouton fermer pour pouvoir revenir à l'endroit initial (un bouton qui ouvre un pop-in après le footer dans le code)

Raccourcis clavier

• Désactiver ou permettre de configurer les raccourcis
• Ou le raccourci n'est effectif que lorsque le focus est dans le composant sur lequel il s'applique

RGAA : Formulaires

• Étiquette de champ
• Information complémentaire
• Nom visible et nom accessible
• Regroupement de champs
• Liste de choix
• Intitulés de bouton
• Champ obligatoire et facultatif
• Aides et contrôles de saisie
• Personnaliser les messages d’erreurs natif
• Modification, mises à jour ou récupération des données
• Champs avec saisi automatique

Étiquette de champ

Une étiquette pertinente :

• label visible
• ou un bouton visible
• ou, a minima, un attribut title

• Le placeholder ne remplace pas une étiquette visible.
• Si title et placeholder alors leur contenu sont identiques
• Les labels et les champs doivent être accolés, pas de définition claire (à l'appréciation de chacun !)

Dans le code, le champ doit avoir un nom accessible

• aria-label
• aria-labelledby / id
• <label> avec relation for / id
• title

Le placeholder n’est pas un nom accessible robuste

Information complémentaire

• Ajouté le complément directe dans l'étiquette de champ
  L'utilisation d'une double <label for=""> est déconseiller

  <label for="name">
      <strong>Prénom</strong><br>
      40 caractere max
  </label>
  <input id="name"/>

• ou une combinaison de label et de aria-describedby

  <label for="name">Prénom</label>
  <input id="name" aria-describedby="info"/>
  <p id="info">40 caractere max</p>

• ou utilisé un aria-labelledby multiple

  <p id="label">Prénom</p>
  <input type="text" aria-labelledby="label info"/>
  <p id="info">40 caractere max</p>

Nom visible et nom accessible

Le nom visible doit être contenu dans le nom accessible
Attention à l'algorithme de calcul du nom accessible

Regroupement de champs

Réunir les éléments communs avec :

• <fieldset> et titrer avec <legend>

  <fieldset>
      <legend>Adresse de facturation</legend>
      [champs ...]
  </fieldset>

• ou une div avec le role="group" et titrer avec aria-label ou aria-labelledby

  <div role="group" aria-labelledby="toto">
      <p id="toto">Adresse de livraison</p>
      [champs ...]
  </div>

La légende peut être masqué mais doit être restitué par les lecteurs d'écran

Exemple courant de regroupement à faire :

• Ensemble de Radio
• Ensemble de Chexbox
• Période d'une date (debut, fin)
• Ajouter un personne, se répétant, (nom, prénom, age)

Liste de choix

Regrouper les items de même nature d’une liste de choix <select> si nécessaire

<select>
    <optgroup label="Véhicules">
        <option>Voiture</option>
        <option>Motos</option>
        …
    </optgroup>
    <optgroup label="Immobilier">
        <option>Maison</option>
        <option>Appartements</option>
        …
    </optgroup>
</select>

Intitulés de bouton

• L'intitulé (nom accessible) est pertinent ;
  • «Valider» : ne permet pas de comprendre ce qui va se passer
  • «Calculer la simulation» : pertinent
• Si le bouton possède un nom visible alors il est aussi contenu dans le nom accessible

<input type="submit" value="Envoyer le message" />

<input type="image" src="loupe.png" alt="Rechercher sur le site">

<input type="submit" value="OK" title="Envoyer le message" />

<input type="submit" aria-label="Effacer mes données"/>

<input type="submit" aria-labelledby="desc-btn" />
<span id="desc-btn">Envoyer le message</span>

Champ obligatoire et facultatif

• Tout est obligatoire : Mettre en début de formulaire que tous les champs sont obligatoires
• Mixte : Ajouter une astérisque dans les champs obligatoire + mettre une légende en haut du formulaire
• Majorité de facultatif : Possibililité de mettre les champs optionnels directement après le label
• Ou au moyen d'un texte relié avec aria-describedby

  <label for="name">Prénom</label>
  <input id="name" aria-describedby="required"/>
  <p id="required">Champs obligatoire</p>

• Il faut une indication visible, un attribut required ne suffit pas !

Aides et contrôles de saisie

• Format attendu : fournir le format de saisie
• Contrôle de saisie : fournir un exemple de saisie

• Directement dans l'étiquette du champ concerné
• Ou via l’attribut aria-describedby="id_dun_texte", voir Information complémentaire
• L'indication doit être visible

Message d'erreur

Le message doit être visible est restitué
Les textes liés par les propriétés aria-labelledby ou aria-describedby font partie des propriétés de l’élément, ils sont donc toujours disponibles, y compris lorsqu’ils sont cachés par CSS avec display:none ou visibility:hidden

Champ obligatoire : format attendu à fournir (a faire de facon global si possible)
Message générique dans le titre de la page : « erreur sur le formulaire » est très suffisant

• Dans le message d'erreur on peut donner :
  • un exemple réel 01/02/23 au lieu du JJ/MM/AAAA, pour une date c'est clairement mieux, mais pour une adresse email c'est moins intéressant
  • de l'aide à la complétion, pas obligatoire mais mieux
• Les exemples de format ne doivent pas être que dans les placeholders car ce n'est pas accessible

Personnaliser les messages d’erreurs natif

L'API Constraint validation permet de personnaliser les messages d’erreurs générés par les type d’input particuliers.

• Support de l’API par les navigateurs (trés bon)
• Documentation MDN
• Custom Validation Messages for HTML5 Form Constraints

<form>
    <label class="label" for="emailform">Votre email:</label>
    <p><input type="email" name="email" id="emailform"></p>
    <input type="submit" value="valider">
</form>

var email = document.getElementById("emailform");
email.addEventListener('invalid', function() {
    if (this.value.trim() !== '') {
        this.setCustomValidity("Saisie invalide. Exemple valide\n: toto@foobar.com");
    }
}, false);

Modification, mises à jour ou récupération des données

Si le formulaire

• modifie ou supprime des données ;
• ou transmet des données sensibles, réponses à un examen ;
• a des conséquences financières, juridiques.

L'utilisateurs doit pouvoir

• vérifier, modifier ou annuler les saisies avant envoie du formulaire ;
• ou il existe un mécanisme de confirmation explicite via une case à cocher ou une étape supplémentaire.

Pour les formulaires de signature électronique, type mandat SEPA, la modification peut être désactivé comme le but de ces formulaires est de valider les données saisies précédemment

Champs avec saisi automatique

Pour les champs qui collectent des informations personnelles sur l’utilisateur, la nature du champ (finalité) est déterminable à partir du code (attributs/propriétés).

Utilisation de l’attribut autocomplete

La liste des valeurs disponibles est fournie par la spécification WCAG 2.1 :

• name - Nom complet ;
• honorific-prefix - Abréviation, civilité ou titre ;
• given-name - Prénom ;
• additional-name - Prénoms additionnels ;
• family-name - Nom de famille ;
• honorific-suffix - Suffixe honorifique ;
• nickname - Surnom, diminutif ;
• organization-title - Fonction, intitulé de poste ;
• username - Nom d’utilisateur ;
• new-password - Nouveau mot de passe (par exemple, lors de la création d’un compte ou d’un changement de mot de passe) ;
• current-password - Mot de passe actuel pour le compte identifié par le champ username (par exemple, lors d’une connexion) ;
• organization - Nom de l’organisation correspondant à la personne, à l’adresse ou à l’information de contact dans les autres champs associés avec ce champ ;
• street-address - Adresse postale (multiligne, nouvelles lignes conservées) - attention champ textarea attendu ;
• address-line1 - Adresse postale (une ligne par champ, ligne 1) ;
• address-line2 - Adresse postale (une ligne par champ, ligne 2) ;
• address-line3 - Adresse postale (une ligne par champ, ligne 3) ;
• address-level4 - Le niveau administratif le plus détaillé, pour les adresses pourvues de quatre niveaux administratifs ;
• address-level3 - Le troisième niveau administratif, pour les adresses pourvues d’au moins trois niveaux administratifs ;
• address-level2 - Le deuxième niveau administratif, pour les adresses pourvues d’au moins deux niveaux administratifs ;
• address-level1 - Le plus large niveau administratif d’une adresse, c’est-à-dire la province dans laquelle se trouve la localité ;
• country - Code pays ;
• country-name - Nom de pays ;
• postal-code - Code postal, code CEDEX (si le CEDEX est présent, ajouter “CEDEX”, et ce qui le suit doit être ajouté dans le champ address-level2) ;
• cc-name - Nom complet figurant sur le moyen de paiement ;
• cc-given-name - Prénom figurant sur le moyen de paiement ;
• cc-additional-name - Prénoms additionnels figurant sur le moyen de paiement cc-family-name - Nom de famille figurant sur le moyen de paiement ;
• cc-number - Code identifiant le moyen de paiement (e.g., un numéro de carte bancaire) ;
• cc-exp - Date d’expiration du moyen de paiement ;
• cc-exp-month - Le mois de la date d’expiration du moyen de paiement ;
• cc-exp-year - L’année de la date d’expiration du moyen de paiement ;
• cc-csc - Code de sécurité du moyen de paiement (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc.) ;
• cc-type - Type de moyen de paiement (e.g. Visa) ;
• transaction-currency - La devise qui a la préférence de l’utilisateur lors d’une transaction ;
• transaction-amount - Le montant qui a la préférence de l’utilisateur lors d’une transaction (e.g., en réponse à une enchère ou à un prix soldé) ;
• language - Langue préférée ;
• bday - Date d’anniversaire ;
• bday-day - Le jour de la date d’anniversaire ;
• bday-month - Le mois de la date d’anniversaire ;
• bday-year - L’année de la date d’anniversaire ;
• sex - Identité sexuelle ;
• url - Page d’accueil ou une autre page Web correspondant à l’organisation, la personne, l’adresse ou à l’information de contact dans les autres champs associés avec ce champ ;
• photo - Photographie, icône ou une autre image correspondant à l’organisation, la personne, l’adresse ou à l’information de contact dans les autres champs associés avec ce champ ;
• tel - Numéro de téléphone complet, y compris le code pays ;
• tel-country-code - Code pays du numéro de téléphone ;
• tel-national - Numéro de téléphone sans la partie code pays, avec un préfixe interne au pays, s’il y a lieu ;
• tel-area-code - Indicatif régional du numéro de téléphone, avec un préfixe interne au pays, s’il y a lieu ;
• tel-local - Numéro de téléphone sans la partie code pays ni l’indicatif régional ;
• tel-local-prefix - La première partie du composant du numéro de téléphone qui suit l’indicatif régional, lorsque ce composant est scindé en deux parties ;
• tel-local-suffix - La seconde partie du composant du numéro de téléphone qui suit l’indicatif régional, lorsque ce composant est scindé en deux parties ;
• tel-extension - Numéro de téléphone d’un poste interne ;
• email - Adresse électronique ;
• impp - URL correspondant d’un protocole de messagerie instantanée (par exemple, "aim:goim?screenname=example" ou "xmpp:fred@example.net").

RGAA : Présentation de l’information

• Utilisation exclusive de CSS
• Contenus visibles sans CSS
• Contenus compréhensibles sans CSS
• Couleurs par défaut
• Zoom texte
• Linéarisation des contenus
• Adaptation des textes
• Survol et focus
• Contrôle des contenus additionnels au clavier
• Visibilité de la prise de focus
• Visibilité des liens en environnement de texte
• Texte caché
• Information par la forme, la taille ou la position

Utilisation exclusive de CSS

• Utilisation exclusive de CSS :
  • <link rel="stylesheet"/> ;
  • <style></style> ;
  • ou attributstyle en ligne.
• Pas d’attribut de mise en forme <table border="0">.
• Pas de balise de mise en forme <font>.

Les attributs width et height utilisés sur d’autres éléments que les balises <img>, <object>, <embed>, <canvas> et <svg> sont également interdits.

Liste complète des attributs et balises interdites.

Contenus visibles sans CSS

Le contenu visible reste présent lorsque les feuilles de styles sont désactivées.

Attention, ne pas faire :

• Contenu inséré par CSS content (texte, icônes porteuses d’information)

  a[target="_blank"]:after{
      content:"nouvelle fenêtre"
  }

• Images de fond porteuses d’informations (background-image)

  h1:after{
      background-image:url("logo.png")
  }

Contenus compréhensibles sans CSS

Le contenu reste compréhensible lorsque les feuilles de styles sont désactivées.

• Ordre des éléments logique
• Ordre des éléments cohérent, l’enchaînement de la lecture est cohérent.

• Les informations qui se rapportent à un titre doivent être placé après et/ou tout mettre dans un li
• Le order en CSS n'est pas pris en compte par les lecteurs d'écran, pratique pour réagencer
• Le bandeau Cookie, doit être placer en début de page avant même le bandeau d'accès rapide
• Ne rien mettre dans le code après le bouton de validation d'un formulaire

Couleurs par défaut

• Toujours déclarer une couleur de texte, de lien et de fond sur le body

  body, body a{color:#000;}
  body{background-color:#fff;}

• Texte avec une image en arrière-plan : mettre un background-color

  .elt{
      background-image:url(...);
      color:#fff;
      background-color:#000;
  }

Zoom texte

Unités des tailles de police :

• Taille de police relatives : em, rem, %
• Depuis RGAA 4 : tailles de polices en px autorisées. (non conseillé car les tailles de police en pixels ne permettent pas d’agrandir les textes sur certains navigateurs)
• Quand un site propose un dispositif d’agrandissement des caractères (A+/A-), c'est cette fonctionnalité qui sera soumise à la conformité, mieux vaut laisser les navigateurs gérés !

Texte lisible avec agrandissement jusqu'à 200% :

• Zoom texte : Firefox : « Affichage > Zoom texte seul » : agrandissement à 200% (Ctrl + 6 fois)
• Ou utilisation des fonctions de zoom du navigateur (zoom graphique)

Linéarisation des contenus

Les contenus doivent rester présents, lisibles et utilisables sans utilisation des deux ascenseurs :

• Consultation verticale : 320px de large minimum
• Consultation horizontale : 256px de hauteur minimum

Les tableaux ont le droit d'être affiché avec un scroll

Adaptation des textes

Les textes doivent rester lisibles dans les conditions suivantes :

• interlignage augmenté de 1,5 fois la taille de police ;
• marge suivante : 2 fois la taille de police
• espacement des lettres : 0,12 fois la taille de la police
• espacement des mots : 0,16 fois la taille de la police

* {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

p {
    margin-bottom: 2em !important;
}

Cas particuliers : sous-titres incrustés, images-texte, texte dans une balise canvas.

Survol et focus — ancre

Contenus qui apparaissent à la prise de focus ou au survol d’un élément :

• Peut être masquer sans déplacer le focus ou le pointeur pointeur via la touche Echap
• Peut être survolé sans disparaitre
• Reste visible tant que le composant est actif

La balise title natif ou modèle de conception ARIA (tooltip, modale) n'est pas concernée par cette règle

Contrôle des contenus additionnels au clavier — ancre

Les contenus au survol doivent fonctionner aussi au clavier et autre périphérique de pointage équivalent

Visibilité de la prise de focus — ancre

• Pas de dégradation de l'outline natif outline:0 ou outline:none
• Ou utilisation d’une indication de focus augmentée suffisamment contrastée (ratio mini de 3)

Les états :focus, :hover des composants doivent également être suffisamment contrastés.

Attention aux composants interactifs masqués :

<input type="radio" id="default" class="sr-only" />
<label for="default">Défaut</label>

input:focus+label{ outline:1px dotted black }

Visibilité des liens en environnement de texte — ancre

A l'intérieur d'un bloc de texte

• Contraste suffisant (> 3 par rapport au texte environnant) ou ajouter un soulignement
• Indication supplémentaire a la couleur au survol souris ou prise de focus

Texte caché — ancre

Texte caché qui annule aussi la restitution d'écran :

• display:none
• visibility:hidden
• font-size:0

Uniquement pour la restitution d'écran :
aria-hidden="true" ou hidden

Information par la forme, la taille ou la position — ancre

Pensez au alternative textuelle ou une version alternative :

• Un petit curseur full CSS
• Une liste de progression sans texte
• Une petite fleche pour dire nouvelle fenêtre
• etc...

Une information ne doit pas être donnée uniquement par la couleur, ajouter un texte ou une image

RGAA : Structuration de l’information

• Utilisé les régions natives
• Titrage du contenu
• Listes
• Citations
• Cadres iframe et frame

Utilisé les régions natives

• Obligatoire pour l’en-tête du document
• Contenus d’introduction, peut contenir des titres, de la navigation
• Une balise <header> peux être utiliser dans une <section>

Unique ou une seule balise est visible simultanément

• une <div> n'a pas de valeur sémantique
• une <section> avec titre aria-label ou aria-labelledby : région déclarée dans les plans des lecteurs d'écran, ne pas en abusé car cela alourdit la page et complexifié inutilement le plan

Réservé aux zones de navigation principale et secondaire

Les navigations secondaires comprennent :

• menu de sous-rubrique
• navigation dans les collections de pages
• navigation dans les résultats de recherche
• le Fil d'ariane
• les liens d’évitement

Ne pas utiliser <nav> pour les listes de lien !

Le bouton "burger" doit être inclus dans l'élément <nav>
La navigation principale peut inclure le bouton burger et être inclus dans la même balise <nav>
Ou en cas de plusieurs <nav>, le bouton doit être dans une balise <nav> seul

• Optionnel
• Contenus indirectement reliés au contenu principal, peuvent être consultés de manière indépendante

• Obligatoire pour le pied de page du document
• Contenus de pied de page, d’articles ou de contenus regroupés par <section>

Titrage du contenu

• Hiérarchie cohérente, de h1 à h6
  Dans la version 4 du RGAA, la règle est plus souple
  • il peux y avoir des saut entre les titre h2 h4
  • ne pas avoir de h1 peut etre conforme dans certain cas
  • avoir plusieurs h1 c'est conforme aussi
• Uniquement les titres nécessaires, un texte ne gras n'est pas un titre
• role="heading" aria-level="[level]" Permet de déclarer un titrage aux technologies d'assistance sans utiliser les balises sémantique, à utiliser en cas de conflit avec les équipe SEO par exemple

  <h1>Accueil…</h1>
      <h2>Actualités…</h2>
          <h2 role="heading" aria-level="3">Où en est-on ?</h2>
          <h2 role="heading" aria-level="3">Ils arrivent bientôt !</h2>

Listes

• Liste non ordonnée : ul li
• Liste ordonnée : ol li
• Liste de définition : dl dt/dd
  C'est assez lourd pour les lecteurs d'écran, préféré de simples listes sauf pour la réalisation d'un glossaire
  Pour une légende d'un schéma, une liste non ordonnée est plus adaptée
  Un équivalant aux balises sémantiques :

  <div role="list">
  
      <div role="term">Terme à définir…</div>
      <div role="definition"> Définition… </div>
  
      <div role="term">...</div>
      <div role="definition">...</div>
  
  </div>

• Si pas de possibilité de faire une liste sémantique :
  • role="list" équivalent à un ul
  • role="listitem" équivalent à un li

  <div role="list">
      <div role="listitem">Favoriser l’information…</div>
      <div role="listitem">Permettre aux personnes…</div>
  </div>

• Les suites de liens doivent être structurées avec des listes.

Citations

• Citation en ligne <q>, mal restitué par NVDA préféré la citation de bloc
• Citation en bloc <blockquote>

  <blockquote>
      <p>Aimer, ce n'est pas se regarder l'un l'autre, c'est regarder ensemble dans la même direction.</p>
      <cite>Antoine De Saint-Exupéry</cite>
  </blockquote>

Cadres iframe et frame

• Contenu pertinent, ajouté un title

  <iframe title="Publicité"></iframe>

• Pas de titre dans le cas de cadres techniques (Google Analytics, etc.) mais cacher avec aria-hidden="true".

RGAA : Éléments obligatoires

• Respect des standard
• Respect de la sémantique
• Titre de pages
• Changements de langue
• Changements de sens de lecture

Respect des standard

Le code doit être valide selon le HTML Checker du w3C

• <!DOCTYPE > valide
• lang et/ou xml:lang
• dirObligatoire si changement de sens de lecture par rapport au reste des pages (rtl ou ltr)
• Imbrication des balises
• Ouverture et fermeture des balises & attributs
• Valeurs d’attribut id sont uniques dans la page
• Attributs pas doublés sur un même élément.
• Attributs et éléments obsolètes autorisés (mais à tester sur la base de référence)

Respect de la sémantique

Utiliser les balises pour leur rôle prévu par la spécification

• Pas de <div> pour les paragraphes
• Pas de balise de titre <hX> pour des légendes d'image
• Pas de paragraphe vide pour faire des espace
• <p>a utilisé quand il y a un verbe

Titre de pages (<title>)

Obligatoire, pertinent et de préférence unique dans le site

• Unique
• Résultat de recherche : doit contenir les mots saisis
• Ajouter les erreur de formulaire (facultatif, mais conseillé)
• Ajouter la pagination si il y en une
• Tag (facultatif, mais conseillé)

Sans rechargement de page :
Simuler le rechargement de la page en changeant le <title>, avec les nouvelles informations en synchro avec la page puis déplacer le focus sur le début de la page
Article pour en savoir davantage :Comment gérer le rechargement de page dans les « Single Page Applications » ?

Changements de langue

• Nom propre, lieu, marque, personne : on ne change pas la langue
• Les mots francisés, exemple «newsletter» «barbecue», «email» : faire un test avec le lecteur d'écran
  • «e-mail»,c'est bon, mais dans «email» sans le tiret deviens «émail»

En cas de changement de langue, ajouter l'attribut lang sur l’élément ou un parent.

<p>Des contenus vidéos sur le Web
    (<span lang="en">on</span>
    et <span lang="en">offline</span>).
</p>

Changements de sens de lecture

• dir sur l’élément lui-même ou un parent ;
• Deux valeurs : ltr ou rtl ;
• ltr implicite, peut être omise sur l’élément html.

<span lang="ar" dir="rtl">
    شكرا جزيلا
</span>

RGAA : Scripts

• ARIA
  • Notes
  • 5 règles de base
• Compatibilité
• Rôle pertinent
• État et changements d'état
• Changement de contexte
• Message de statut
  • Messages d'erreurs
  • Messages d'informations
  • Messages de notifiactions
  • Messages d’attente
• Ressources
• Motif de conception
• Environnement de test

ARIA

Notes

Surcharge de propriété, support général bon

• Notes on Using ARIA in HTML
• Autre note pour les développeurs ARIA : partie 1, partie 2, partie 3

5 règles de base

1. Privilégier le natif !
   Et tester la restitution.
2. Ne pas changer la sémantique
   Sémantique de titre conservé, vérifié avec le validateur du W3C si besoin

   <div role="tab">
       <h2>Titre onglet</h2>
   </div>

3. Composant interactif utilisable au clavier
   • Les composants doivent pouvoir être atteint à la tabulation, voir tabindex
   • Un bouton doit être sélectionnable avec espace et entrée
4. Ne pas supprimer la sémantique des éléments interactifs ou empêcher leur restitution
   • Attention aria-hidden="true" s'hérite des parents
   • Pour bloquer l'accès à un bouton

     <button type="button" tab-index="-1">Menu</button>

5. Tout composant interactif doit avoir un nom accessible
   Algorithme de calcul du nom accessible

Compatibilité

• Nom, rôle et valeurs
• Accès à la souris et au clavier
  Voir les Motif de conception (en anglais)
• Ou une alternative accessible
  Avec un datepicker non conforme, l'ajout d'un input saisissable rend le composant conforme
  (attention à ne pas être piégé dans une boucle de focus)

Rôle pertinent

• Lien : changement d'URL
• Bouton ou implémentation du motif ARIA button : action, événement, fonction JavaScript etc...

Même pour les single page application ;
Un composant qui déclenche l'ouverture d'une page ou d'un onglet doit être un lien même si ce sont des actions Javascript

<a role="link" tabindex="0" onclick="myFunction()"></a>
<!-- ou -->
<a href="#" onclick="myFunction()"></a>

État et changements d'état

• État sélectionné d'un bouton

  <button aria-pressed="false">Filtrer par nom</button>
  <button aria-pressed="true">Filtrer par nom</button>

• Composant inactif, on utilisera l'attribut disabled
• L'attribut aria-expanded="true/false" est défini sur un élément pour indiquer si un contrôle est développé
• Sur un groupe d'éléments liés, indiquer à l'utilisateur qu'il s'agit de l'élément actuel aria-current
• Lorsqu'un composant change d'état, que sa fonctionnalité est modifiée, on peut également passer par un changement de nom accessible ou de description (par exemple, la transformation d'un bouton lecture en pause, on vérifiera que l'intitulé a bien été modifié pour retranscrire la fonctionnalité qui sera déclenchée à la prochaine activation du bouton, pas uniquement l'apparence visuelle).

  <button>Lecture</button>
  <button class="hide">Pause</button>

• Liste exhaustive des États et propriétés ARIA (en anglais)

Changement de contexte

• un texte explicatif précédant le changement de contexte
  Ne pas faire de rechargement de page, d'une partie ou de changement de page par défaut, mettre un bouton pour faire l'action
• un bouton ou un lien explicite

Message de statut

Informer les technologies d’assistance des messages d’alerte de confirmation ou de statut, sans déplacer le focus de l'utilisateur.
Ne pas en abuser, parfois contre-productif

Si le focus est déplacé sur le message ok/Ko général alors pas besoin de mettre le role="alert" ou si la page se recharge et que le bloc est dans le DOM Dans tous les cas on fait une reprise de focus.

En cas d'erreur, ont se déplace l'utilisateur sur le premier champ en erreur/ ou message de confirmation + le mieux et de mettre aussi un message dans le titre de la page

Messages d'erreurs — Haute priorité

<p role="alert">Ceci est une alerte ajoutée dynamiquement</p>

Messages d'informations — Attends que ce soit son tour pour être vocalisé

<p role="status">Ceci est un status ajouté dynamiquement</p>

<p><span id="myLiveRegion1" aria-live="polite">Mais je sais rester polie</span></p>

Messages de notifiactions

Messages d’attente

Seulement pour des tâches qui prennent beaucoup de temps.

<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>

<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2&nbsp;: Copie des fichiers…" aria-valuemax="100">
    Étape 2&nbsp;: Copie des fichiers…
</div>

Repositionner le focus sur un élément pertinent, par exemple la zone mise à jour

Ressources

• Une étude de l’accessibilité de certains bibliothèques JavaScript : jQuery + jQuery-ui, Bootstrap + plugin Paypal, AngularJS + AngularUI Bootstrap, React + Bootstrap, ReactJS.
• Correctifs proposés pour React Bootstrap, ReactJS, Jquery UI, Angular Bootstrap, Bootstrap Paypal.
• Une suite de tests mocha (nodejs)

Motif de conception

Motif de conception (design pattern) : décrit structure, rôles et propriétés et comportement d’un composant JavaScript(widget).
ARIA authoring practices

Environnement de test

Il est nécessaire de réaliser des tests de restitution et d'utilisation avec les lecteurs d'écran de la base de référence.
Guide sur les lecteurs d'écran.

Pour tester un site web sur un terminal mobile, l’environnement de test devra comporter une des deux combinaisons (iOS ou Android). À noter que dans le cas d’un site web mobile grand public, il est fortement conseillé de tester dans les deux environnements.

Tableau d'évaluation d'un modif de conception aria (.xlsx 128ko)

RGAA : Images

• Liens explicites
  • aria-label
  • title
• Liens identiques
• Liens vides
• Traduction

Liens explicites

L'intitulé permet de comprendre ou le lien va nous emmener
ou
Le contexte le permet (Titre, paragraphe et phrase précédente)

• «la suite», si le texte est seul, ce n'est pas explicite
• «la suite», précédé d'un article (titre ou paragraphe), c'est conforme

Mais on peut améliorer l'intitulé !

Si un lien n'est pas explicite pour le voyant, ce n'est pas une faute, mais plutôt un problème d'UX
Le nom visible doit être contenu dans le nom accessible

Pour expliciter un intitulé :

• via un texte caché en sr-only : non voyant uniquement
• title : tous le monde
• aria-label ou aria-labelledby : pas natif donc pas pour tout le monde

aria-label

Doit comporter l'intitulé du lien

<a href="#url" aria-label="Retour Accueil du site">Retour</a>

aria-label surcharge l'intitulé, c'est pour ça que l'on doit mettre l'intitulé dedans

title

• Le title sera restitué par les lecteurs d'écran et à la souris
• Par défaut le title est restitué en plus de l'intitulé, mais certain le configure pour etre que seul le title soit restitué

Doit comporter l'intitulé du lien

<a href="#url" title="Retour Accueil du site">Retour</a>

Liens identiques

Des liens dons l'intitulé et le contexte sont identiques et ont la même destination
Si ce n'est pas le cas :

• Ajouter un titre pour préciser la différence entre les liens
• Changer le contexte

Liens vides

Pas de lien vides
Attention au lien avec des images, aux polices d'icônes où les mise en forme en CSS uniquement (content:"")

Mettre un alt sur les images liens

<a href="#lien">
    <img alt="intitule">
</a>

Ajouter un aria-label ou aria-labelledby sur le lien si besoin,
utilisé si possible les propriétés natives

<a aria-label="intitule">
    <i class="fa-solid fa-house"></i>
</a>

Un texte positionné hors de l'écran est la méthode conseillée

<a href="#lien">
    <span class="sr-only">intitule</span>
    <i class="fa-solid fa-house"></i>
</a>

Traduction

aria-label n'est pas correctement traduit par google translate
Préféré les méthodes : sr-only ou title

RGAA : Tableaux

• Faire de la mise en forme
• Tableaux simples
  • Sémantique
  • Équivalents ARIA
• Équivalents ARIA
• Tableaux complexes
  • Titre et résumé de l’organisation du tableau
  • Version alternative
  • Cellules d’en-têtes

Faire de la mise en forme

• Même si leur utilisation pour faire de la mise en forme n'est pas interdite cela n'est pas conseillée
  Si c'est tout de même utilisé pour faire de la mise en en forme, il ne faut pas utiliser des balises ou d’attributs de tableaux de données :
  <th> <thead> <tfoot> <caption> scope headers colgroup axis role="columnheader" role="rowheader"
• role="presentation" sur la balise table
  Cette propriété supprime la sémantique du tableau, penser à redonner de la structure aux textes (titres, paragraphes, listes ...) dans ces cas.
• Si la propriété summary="" est présente (HTML4), videz la !

<table role="presentation">
    <tr>
        <td>
            <p>Retrouvez nos vidéos d’informations !…</p>
        </td>
    </tr>
</table>

Tableaux simples

Sémantique

• Un titre <caption>
  Si le tableau est précédé d'un titre et que le <caption> est non nécessaire, il faut relié ce titre via un aria-labelledby=""

  <h2 id="exemple">Mon titre</h2>
  <table aria-labelledby="exemple">
      ...
  </table>

• Déclaration des entêtes <th scope="[col|row]">
  Permets d'indiquer la direction de la cellule d'entête
  Le scope est obligatoire si plusieurs entré

  <table>
      <caption>Parc et fréquentation des autres hébergements collectifs touristiques en 2018</caption>
      <tr>
          <th scope="col">Type d’hébergement professionnel</th>
          <th scope="col">Nombre d’établissements</th>
          [...]
      </tr>
      <tr>
          <td>Résidences de tourisme</td>
          <td>2 426</td>
          [...]
      </tr>
  </table>

Équivalents ARIA

• Tableau : role="table"
• Titre : aria-label="Nom du tableau" ou aria-labelledby="id_titre"
• Entêtes de colonne : role="columnheader"
• Entêtes de rangée : role="rowheader"
• Cellules : role="cell"

<p id="titre">Parc et fréquentation des autres hébergements collectifs touristiques en 2018</p>
<div role="table" aria-labelledby="titre">

    <div role="row">
        <div role="columnheader">Type d’hébergement professionnel</div>
        <div role="columnheader">Nombre d’établissements</div>
        [...]
    </div>

    <div role="row">
        <div role="cell">Résidences de tourisme</div>
        <div role="cell">2 426</div>
        [...]
    </div>

</div>

Tableaux complexes

Un tableau est complexe quand il contient plus d'une ligne d'entête (col ou row) ou s'il y a des fusions cellule

Titre et résumé de l’organisation du tableau

• Dans le caption ou via le aria-labelledby="", mettre le titre + un résumé de l’organisation du tableau (HTML5)
• Pour le résumé pour les versions précédentes de HTML, le mettre dans summary=""(HTML4)

<caption>
    Figure 2 - Répartition des déchets non dangereux non minéraux hors boues de l’industrie
    manufacturière par type en 2016
    <span class="sr-only">
        Les industries agroalimentaires (IAA) et les industries manufacturières (hors IAA)
        sont présentées sur 2 colonnes, avec, pour chacune d’elles la quantité en milliers
        de tonnes le pourcentage. Une troisième colonne présente le total des deux industries,
        en milliers de tonnes et en pourcentage.
    </span>
</caption>

Le sommaire, pouvant être utile à d'autres usagers que ceux utilisant un lecteur d'écran, il est préférable de le mettre dans un bloc qui s'affiche via un bouton de type afficher / masquer

<caption>
    Figure 2 - Répartition des déchets non dangereux non minéraux hors boues de l’industrie
    manufacturière par type en 2016
    <button type="button" aria-expanded="false">Résumé de l’organisation du tableau</button>
    <span class="hide">
        Les industries agroalimentaires (IAA) et les industries manufacturières (hors IAA)
        sont présentées sur 2 colonnes, avec, pour chacune d’elles la quantité en milliers
        de tonnes le pourcentage. Une troisième colonne présente le total des deux industries,
        en milliers de tonnes et en pourcentage.
    </span>
</caption>

Version alternative

Pour les tableaux complexes préférés une alternative car cela inclura tout le monde et non seulement les lecteurs d'écran (et c'est plus simple à développer !)

• Passage en mode liste par exemple
• On affiche un bouton pour afficher la version alternative

Plus besoin de mettre le résumé et header s'il y a une alternative

Cellules d’en-têtes

Identifier les cellules d’en-têtes via un attribut id et lier les cellules de données via l’attribut headers.

Exemple : headers="id_1 id_2".

<tr>
    <td aria-hidden="true"></td>
    <th id="entete1" colspan="2">Industries agroalimentaires (IAA)</th>
    <th id="entete2" colspan="2">Industries manufacturières (hors IAAA)</th>
    <th id="entete3" colspan="2">Ensemble</th>
</tr>
<tr>
    <td aria-hidden="true"></td>
    <th id="entete4">Quantités (en milliers de tonnes)</th>
    <th id="entete5">en %</th>
    <th id="entete6">Quantités (en milliers de tonnes)</th>
    <th id="entete7">en %</th>
    [...]
</tr>
<tr>
    <td>Déchets banals</td>
    <td headers="entete1 entete4">1 147</td>
    <td headers="entete1 entete5">31</td>
    <td headers="entete2 entete6">9 795</td>
    <td headers="entete2 entete7">97</td>
    [..]
</tr>

RGAA : Images

• Média temporel
  • Vidéo
  • Autres
• Alternatives aux médias
• Média non temporel

Média temporel

Vidéo

• Contrôles obligatoires
• Clavier/souris
• Nom pertinent : mises à jour des noms play/pause
• Mises à jour des valeurs : timing, son, etc.

Lecteurs vidéos :

• Able Player, accessibles
• MFP Player, accessibles
• Plyr, accessibles
• BrightCove, accessibles
• YouTube, conforme, mais les pubs peuvent être problématiques
• Dailymotion, non conforme
• Balise <video> native, problème a priori avec NVDA, a confirmé

Autres

Identifiable grâce au contexte adjacent: titre précédent ou texte adjacent

Alternatives aux médias

• Transcription textuelle, texte structuré qui reprend l'ensemble du contenu oral et visuel en consultation libre de type Disclosure
• Sous-titres synchronisés
• Audiodescription, obligatoire uniquement si la bande son originale dispose des espaces blancs suffisant pour inclure la piste d'audiodescription

Média non temporel

Animations intégrées dans Canvas ou svg : Mettre en place une alternative textuelle si nécessaire

RGAA : Couleurs

• Information par la couleur
• Contrastes
• Contrastes des éléments graphiques

Information par la couleur

Cas les plus courants :

• indication de page active ;
• indications d’onglets affichés ;
• carrousel : indication de contenu actif.

Une information ne doit pas être donnée uniquement par la couleur, ajouter un texte ou une image

Contrastes

Ou prévoir un mécanisme de remplacement

• color.review
• Contrast finder
• Color Contrast Analyzer
• WCAG Contrast checker (Firefox)

Contrastes des éléments graphiques

Évaluation pour tous les éléments graphiques porteurs d’information (images, boutons, icônes, etc.) sauf cas particuliers

• Contraste minimum de 3:1
• Présence d’un mécanisme de remplacement.

Exemples de cas particuliers : composant inactif, composants natifs du navigateur, éléments avec une alternative, logo…

RGAA : Images

• Nom accessible
• Images décorative
  • Bitmap
  • Vectorielles
• Images porteuses d’information
  • Bitmap
  • Vectorielles
• SEO
• Image map
• Images description détaillée
• Image captcha
• Texte en image
• Images légendées

Nom accessible

Utiliser par les lecteurs d'écran, le nom accessible n'est pas toujours affiché (le alt par exemple)

<img src="img.png"
         alt="2019 EESC Civil society prize Award ceremony 12 december 2019"
         aria-label="image"/>

Le nom accessible de l'exemple sera : « image »

En cas d’implémentation multiple, le nom accessible utilisera par ordre de priorité :

1. aria-labelledby
2. aria-label
3. alt
4. title
5. Si aucune des attributs précédents est valide, il n'y aura pas de nom accessible attribué

Images décorative

• Pas d'information dans l'image ni de volonté d'en transmettre une
• Une image peut comporter du texte sans que celui-ci soit à but d'informatif, elle peut être juste décorative pour habiller une section

Bitmap

• alt=""préféré cet attribut car natif
• aria-hidden="true"
• role="presentation"

<img src="image.png" alt="" />
<img src="image.png" aria-hidden="true"/>
<img src="image.png" role="presentation"/>

Vectorielles

• aria-hidden="true" sur l’élément <svg>
• Aucun des attributs suivants ne doit être présent : aria-label, aria-describedby, aria-labelledby, role="img", title
• Les balises <title> et <desc> doivent être vides ou absentes

<svg aria-hidden="true">
    …
</svg>

Images porteuses d’information

Vérifier auprès du contributeur ou de ce qu'a fait le bloc quelle information il veut véhiculer

Bitmap

• alt renseigné, solution a privilégié
• title
• aria-label
• aria-labelledby

Ne pas cumuler les méthodes car ça peut être contre-productif
aria-label écrasera le rendu de alt
aria-labelledby écrasera le rendu de tous le reste !

<img src="image.png" alt="2019 EESC Civil society prize Award ceremony 12 december 2019" />

Vectorielles

Il faut utiliser ses deux attributs sur l’élément

• role="img"
• aria-label contenant l’alternative de l’image

<svg role="img" aria-label="Profil renseigné à 90%">
    …
</svg>

Un alternative existe, mais balise title n'est pas bien supporté, préféré la première version

<svg role="img" aria-labelledby="title_svg">
    <title id="title_svg">Profil renseigné à 90%</title>
    …
</svg>

SEO

• Mettre plein de mot clé dans l'altest une idée reçue, ça ne fonctionne pas
• Si l'équipe SEO impose de mettre du contenu dans le alt, ajouter aria-hidden="true" pour que le texte ne soit pas interprété pour les utilisateurs

<img src="" alt="Carte France Production Usine" aria-hidden="true" />

Image map

• alt sur l'img pour décrire sa fonction
• alt sur chaque area

<img src="" alt="Carte de France" usemap="#LIEUX" />
<map id="lieux" name="LIEUX">
    <area href="regi42" alt="Alsace">
    <area href="regi53" alt="Bretagne">
</map>

Images description détaillée

Description détaillée adjacente où bien lien adjacent
Exemple : access42.net (description détaillée adjacente)

Commme aria-label et aria-labelledby ne sont exploités que par les lecteurs d’écrans.
La meilleure solution est de proposer une alternative (modal, nouvelle page ou afficher/masquer)
Mettre un alt trés général puis le bouton «lire la description détaillée de l'infographie» par exemple

<img src="img.png" alt="infographie" />
<a href="description.html">Description détaillée de l'infographie</a>

<img src="img.png" alt="infographie" />
<button aria-expanded="false">Description détaillée de l'infographie</button>

Image captcha

L’alternative de l’image doit permettre d’identifier la nature de l’image

<img src="" alt="Code de confirmation à saisir"/>

Proposer une alternative

• Captcha sonore; pas idéal, le son peut être dangereux pour certaines typologies
• Captcha de logique; pas conseiller car problématique pour certaines typologies
• Envoi du code par email/SMS; Recommander si possible car plus lourd techniquement

Le captcha de google est conforme !

Texte en image

Interdit sauf pour les logos
ou proposer un mécanisme de remplacement :

• Déclencher par l'utilisateur via une option accessibilité
• via un plugin

Images légendées

Légende : texte adjacent à une image

Si un alt est renseigné, il faudrat reporter son contenu dans le aria-label et dans la figcaption

<figure role="group|figure" aria-label="alt-image Légende de l’image">
    <img src="…" alt="alt-image" />
    <figcaption>
        alt-image Légende de l’image
    </figcaption>
</figure>

<figure role="group|figure" aria-label="Légende de l’image">
        <img src="…" alt="" />
        <figcaption>
            Légende de l’image
        </figcaption>
    </figure>

Si un lien est présent dans le figcaption, reporté unique son intitulé dans le aria-label

• Un droit fondamental
  • Contexte
  • Pourquoi faire de l'accessibilité
• Norme et référentiel
  • Norme
  • Référentiel RGAA
  • Aménagement raisonnable

Un droit fondamental

Contexte

13 décembre 2006 : Convention relative aux droits des personnes handicapées de l’ONU

Signé par tous les États membres dons la France (le 18 février 2010)

Incapacité physique, mentales, intellectuelle ou sensoriel

C'est le manque d'adaptation qui crée la situation de handicap

Différents types de handicaps physique et sensoriel

• Visuel (contraste, tache, vision)
• Cognitif (décodage, DYS)
• Physique

Polyhandicap : multiple handicap

En accessibilité on ne cible pas par type de handicap (car il y en trop), mais par besoin

L'universalité inclut l'accessibilité.
Le W3C ce veut Universalité : matériel, logiciel, infra, langue, culture, localisation et aptitudes physique ou mentale

Accessibilité c'est différent du référencement et de la performance, c'est même parfois contre-productif

Les personnes en situation de handicap n'ont pas de possibilité de résoudre leur problème
À ne pas confondre avec le handicap situationnel qui peut être résolu sans aide, par exemple si on est dans un milieu trop ensoleillé ou dans un véhicule qui bouge

Pourquoi faire de l'accessibilité

Le numérique, c'est une promesse d'inclusion

• Faire des choses qui n'étaient pas faisables en autonomie
• Parfois la seule méthode pour communiquer

• Parler des personnes en situation de handicap
• Respect de leur droit
• Ne pas parler de «ça sert à tout le monde», car ils vont penser que c'est de l'amélioration alors que l'accessibilité entraine des contraintes

Exemple de besoin

• Navigation clavier (par forcement clavier dalleur, ça peut être des boutons au niveau de la tete)
• Uniquement a la souris : dispositif qui déplace le curseur (eyes tracking pa exemple
• Description élément visuel (aveugle, mal voyante)
• Description audio (sourd, malentendant)
• Naviguer à son rythme, maitrise son environnement (trouble psychique)
• Personnalise l'affichage (couleur, taille police, police etc.
• Perte acuité visuel, audition, mental
• Appréhension technologique, peur de casser, faire mal

Améliorer la participation des personnes handicapées à la société (enfin !) grâce à l’accessibilité numérique

Technologie d'assistance, quel exemple : Plage braille, clavier mono manuel, headstick, eye-tracking, clavier visuel, lecteur écran, contacteur au souffle, trackball, contrôle par la pensée (à l'état de recherche) etc

Norme et référentiel

Norme

• UAAG pour les agents utilisateurs (navigateur, lecteur d'écran) : affichage par le navigateur de l’info-bulle d’un lien à la souris et au clavier.
• ATAG pour les outils d’édition de contenus (CMS) : alternatives aux boutons de mise en forme, production de contenus conformes.
• WCAG pour les contenus web : alternatives aux éléments graphiques.
• L’API ARIA pour les composants riches.

Version du WCAG :

• Avant la 2.1, pour les non voyant essentiellement
• version 2.1 : basse vision, troubles cognitifs, difficultés d’apprentissage et DYS
• version 2.2 : prévue pour début 2023

Trois niveaux d'accessibilité WCAG

• A : Accès à l’information et d’une utilisabilité de base : 80% des critères.
• AA : Améliorations et la prise en charge de contextes particuliers
  (les couleur par exemple)
• AAA : Ne peut pas s'appliquer à tous les types de contenus et de situations

En France, le niveau légal requis est le double A (AA) : pour être conforme il faut que tous les critères A et AA applicable du référentiel, soient conformes.

Il n’est pas recommandé de faire de la conformité au niveau AAA une politique générale pour des sites entiers parce qu’il n’est pas possible de satisfaire tous les critères de succès de niveau AAA pour certains contenus.

Source WCAG (en anglais)

Référentiel RGAA

En France on a créé un révérenciel; donner une méthode opérationnelle pour vérifier que les WCAG sont bien respectées sans avoir à tout lire (rédaction indépendantes des technologies et souvent abstraites)

C'est le RGAA

• Évaluer la conformité à la norme.
• Mesurer et attester.
• Servir de socle technique à la réglementation.
• Attention au risque d'obsolescence

La version 4 du RGAA a été publiée en septembre 2019. Elle est venue mettre à jour et remplacer le RGAA 3.2017

Conformité obligatoire (RGAA 100%) selon la législation française : (décret du 14 mai 2009)

• Administration
• Privé qui gère du public (transport, eau)
• Culturel, social
• Les entreprises privées dont le chiffre d’affaires excède 25 millions d'euros

• Sanction administrative, jusqu'à 5000 €, prononcée chaque année lorsque le manquement perdure
• Les délais de mise en conformité des sites existants ne peuvent excéder trois ans

Critères et tests du RGAA

Aménagement raisonnable

« On entend par “aménagement raisonnable” les modifications et ajustements nécessaires et appropriés n’imposant pas de charge disproportionnée ou indue apportés, en fonction des besoins dans une situation donnée, pour assurer aux personnes handicapées la jouissance ou l’exercice, sur la base de l’égalité avec les autres, de tous les droits de l’homme et de toutes les libertés fondamentales. »

Article 2 de la CRDPH.

En d'autre termes, en cas de dérogation sur un cas particulier, il faudrait fournir tous de même une alternative
Sauf si cette alternative représente elle aussi une charge disproportionnée
Alors il faut pouvoir permettre à l'utilisateur de faire un signalement et de lui répondre dans un délai raisonnable

Refus d'aménagement raisonnable est puni par l'article 225-2 du Code pénal
La loi prévoit entre 3 et 5 ans d'emprisonnement et entre 45 000 et 75 000 euros d'amende.

Introduction

Selon le motif de conception du W3C, lorsqu'une boîte de dialogue s'ouvre, le focus doit déplacer vers un élément à l'intérieur de la boîte de dialogue

• Tab :
  • Déplace le focus sur le prochain élément tabulable de la boîte de dialogue.
  • Si le focus est sur le dernier élément tabulable de la boîte de dialogue, il est déplacé vers le premier élément tabulable de la boîte de dialogue.
• Shift + Tab :
  • Déplace le focus sur l'élément tabulable précédent dans la boîte de dialogue.
  • Si le focus est sur le premier élément tabbable de la boîte de dialogue, il est déplacé vers le dernier élément tabbable de la boîte de dialogue.
• Echap : Ferme la boîte de dialogue.

Code

Le code suivant est largement inspiré de celui Yogesh Chavan avec quelques optimisations pour une meilleur re-utilisation

function trapFocusIn(modal) {
  modal.addEventListener("keydown", function (e) {

    let isTabPressed = e.key === "Tab" || e.keyCode === 9;

    if (!isTabPressed) {
      return;
    }

    let focusableElement = modal.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    let firstFocusableElement = focusableElement[0];
    let lastFocusableElement = focusableElement[focusableElement.length - 1];

    if (e.shiftKey) {
      // if shift key pressed for shift + tab combination
      if (document.activeElement === firstFocusableElement) {
        lastFocusableElement.focus(); // add focus for the last focusable element
        e.preventDefault();
      }
    } else {
      // if tab key is pressed
      if (document.activeElement === lastFocusableElement) {
        // if focused has reached to last focusable element then focus first focusable element after pressing tab
        firstFocusableElement.focus(); // add focus for the first focusable element
        e.preventDefault();
      }
    }

  });
}

Rendu

Depuis mon emménagement, ,
j'ai commencé à fabriquer des meubles, luminaire et autres objets

Sommaire

• Bibliothèque et bureau
• Luminaire
• Horloge Lego
• Bougoir
• Cuisine enfant
• Aménagement toilette
• Lit étagère
• Lampe vertical
• Miroir (WIP)

Bibliothèque et bureau — 13 janvier 2021

Mon premier meuble sur mesure.
J'avais réalisé un tableau qui calculait automatiquement la taille des planches selon les épaisseurs que je saisiser comme la taille du meuble était fixe

Luminaire — 21 novembre 2021

Impossible de mettre une suspension au-dessus de ma table à manger sans faire de gros travaux et en réalisant quelque chose de propre
Un lampadaire est idéal pour ce genre de situation mais leurs prix sont exorbitants si l'on veut quelque chose d'esthétique

Horloge Lego — 18 décembre 2021

Une commande de ma belle-mère qui voulait que je lui réalisasse quelque chose en Lego.
Il est difficile de se procurer une liste de pièces définies (hors énorme quantité), je suis partis sur quelque chose d'assez abstrait et artistique, réalisable avec une boîte de base que l'on trouve facilement.
Ma belle-mère étant dingue d'horloge, il était évident que je lui en réalise une

Bougoir — 01 janvier 2022

Réalisé à partir à partir d'une palette en bois

Je voulais faire une forme géométrique, mais ce fut impossible à faire avec les outils à ma disposition.
J'ai fini par arrondir les angles, le résultat reste sympa même si pas du tout symétrique comme il était alors prévu

Cuisine enfant — 04 septembre 2022

Aménagement toilette — 16 septembre 2022

Lit étagère — 8 octobre 2022

Lampe vertical — 15 octobre 2022

Miroir (WIP) — 19 octobre 2022

Concept de deux miroirs juxtaposés, l'un avec un cadre le plus propre possible et l'autre réalisé a à base de chutes de bois de découpe précédente
Reste a poncé, huilé, assemblé....

Services et pre-requis

Il est nécessaire de créer un compte sur ces différents services

• GitHub : Hébergement des sources
• Strapi : CMS open-source headless
• Heroku : Plate-forme d'applications en ligne
  À partir du 28 novembre 2022, les ressources gratuites Heroku Dynos, Heroku Postgres et Heroku Data for Redis® ne seront plus disponibles.

De la création du projet à sa mise en production

1. Créer un projet Strapi V4 :
   Dans un terminal à l'emplacement du dossier de projet désiré
   yarn create strapi-app dossier-du-projet --quickstart
2. Une fois l'installation terminée, le navigateur ouvre automatiquement un nouvel onglet.
   Il faut enregistrer le premier utilisateur qui sera le super admin
3. Commit/push le projet sur GitHub
4. Allez sur Heroku.com, se connecté,
   Cliquez sur "create a new app"
5. Entrez le nom de votre application (Heroku vous dira si le nom est disponible).
6. Choisissez GitHub, puis recherchez le dépôt que vous souhaitez déployer
7. Activez les déploiements automatiques, puis déployer
8. Si vous avez une erreur, pas de panique, on continue !
9. Utiliser l'add-on Postgres de Heroku comme base de données
   Cliquez sur le menu "Ressources"
   puis dans la barre de recherche "Heroku Postgres"
10. Submit Order Form
11. menu "Settings"
12. En cliquant sur "Reveal Config Vars" vous afficherez uniquement DATABASE_URL.
    Voici à quoi devrait ressembler la syntaxe complète
    postgres://{user}:{password}@{hostname}:{port}/{database-name}
13. Ajouter les "key value" selon votre DATABASE_URL
    postgres://aaaaaaaa:bbbbbbbbbbbbbbbbbbbbbbbbbbbb@ccc-cc-ccc-cc:dddd/eeeeeee

    KEY	VALUE
    DATABASE_USERNAME	aaaaaaaa
    DATABASE_PASSWORD	bbbbbbbbbbbbbbbbbbbbbbbbbbb
    DATABASE_HOST	ccc-cc-ccc-cc
    DATABASE_PORT	dddd
    DATABASE_AUTHENTICATION_DATABASE	eeeeeee
    DATABASE_NAME	eeeeeee

    et à la racine de votre projet, dans le fichier .env vous trouveriez quatre autres jeux de "key value" à ajouter à la suite

    KEY	VALUE
    ADMIN_JWT_SECRET	fffffffffff/fffff==
    API_TOKEN_SALT	ggggg/ggggggggggg==
    APP_KEYS	hhh/hhhh==,hhh/hhhh==,hhh/hhhh==,hhh/hhhh==,
    JWT_SECRET	iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii==

    

14. Ajoutez les variables d'environnement à Strapi
    Dans le dossier ./Config de votre projet, créez les sous-dossier env/production puis les fichiers database.js et server.js à l'intérieur, ajoutez-y les codes suivant

    

    database.js

    const parse = require('pg-connection-string').parse;
    const config = parse(process.env.DATABASE_URL);
    
    module.exports = ({ env }) => ({
      connection: {
        client: 'postgres',
        connection: {
          host: config.host,
          port: config.port,
          database: config.database,
          user: config.user,
          password: config.password,
          ssl: {
            rejectUnauthorized: false
          },
        },
        debug: false,
      },
    });
                

    
    
    server.js

    module.exports = ({ env }) => ({
        url: env('MY_HEROKU_URL'),
    });
                        

15. Dans le terminal, lancer les commandes
    yarn add pg-connection-string
    et
    yarn add pg
16. Commit/push le code sur Github
17.  
18. Ajouter /admin pour accéder à Strapi

Un petit défit personnel, de réaliser en JavaScript un des jeux qui a bercé mon enfance.
Un jeu idéal pour tuer le temps quand c'est nécessaire...

jeux.pierre.tl

Source sur Github

Merci à Dan Urbanowicz pour son modèle pré-généré

Services et pre-requis

Il est nécessaire de créer un compte gratuit sur ces différents services

• GitHub : Hébergement des sources
• Netlify : Déploiement
• Netlify CMS : système de gestion de contenu, pas de compte a créé celui de Netlify suffit

C'est partie !

Production

1. Déploiement du site de démonstration sur netlify
2. Cliquez sur le bouton «Connect to Github»
3. Renommez le «Repository name», peut être fait plus tard dans les réglages de Github
4. Cliquez sur le bouton «Save & Deploy»
5. Le site se déploie, cela ne prend qu'une dizaine de seconde.
   L'URL passe en vert quand c'est terminé avec plus bas la mention «Your site is deployed ✓»
6. Un des deux mails que vous recevraient vous invitera à crer le premier utilisateur sur le CMS.
   Cliquez sur le lien dans le mail
7. Vous allez être redirigé sur votre site, ajouter à la fin de l'URL «/admin»
8. Vous êtes inviter à saisir un mot de passe sinon saisir votre adresse mail et cliquez sur le lien «Forgot password?»

Developpement

Mise en place

1. Clone le dépôt {site} sur Github
2. Installer le projet en mettant dans la console npm install @11ty/eleventy
3. Lancer le build : npx @11ty/eleventy --serve

Accédé au CMS

1. Allez dans le fichier : {site}\admin\config.yml
2. Ajoutez à la ligne 9
   

   # Please run "npx netlify-cms-proxy-server" for local backend
   local_backend: true

3. Lancer la commande npx netlify-cms-proxy-server

Ma collection de Manga grandissant sans cesse.
Il me venait difficile de suivre à quel tome de quelle série j'en étais.
Mon system de liste dans un carnet était à bout de souffle
J'ai donc entrepris de faire un mini-site Liste de lecture à la place.

Initialement «Mangathèque», il se diversifie au fil des années (Comics, Roman, Bande Dessinée), même si la grande majorité des ouvrages référencer reste des mangas

Sommaire

• Évolution du design
• 2008 : Style Apple
• 2009 : Version 2
• 2010 : Version 3
• 2011 : Version 4
• 2013 : Version 5
• 2022 : Version 6

Évolution du design

Listage des lectures

Options de d'affichage

2008 : Style Apple

• Design inspiré de iOs de l’Iphone à cette période
• Ajout d’un backoffice pour gérer la liste
• Choix d’affichage : séries en cours, terminées ou les deux par ordre alphabétique

2009 : Version 2

• Design plus chaleureux rappelant un château japonnais
• Ajout d’un favicon pour les navigateur web :
• Ajout du choix d’affichage séries abandonnées et du classement par préférence (notation sur 6)
• Une seconde version ajoutera un abécédaire au debut de chaque lettre en guise d’intercalaire et un lien vers la page otions

2010 : Version 3

• Réorganisation de l’affichage
• Ajout de plus de statistiques
• Optimisation des fonctions
• Correction des beugs

2011 : Version 4

• Nouveau design
• Agrandissement des zones cliquables de l’abécédaire
• Réduction des informations visibles par défaut
• La notation passe à une note sur 10, avec de nouveaux smiley pour les représenter
• Ajout d’une icon iPhone personnalisé
  
• Ajout d’un system accordéon qui affiche des informations supplémentaires (auteur, éditeur, résumé et avis si renseigné.) Selon le type d’affichage en cours. L’index étant toujours la liste des mangas en cours les seules informations supplémentaires sont l’auteur et l’éditeur pour ne pas alourdir la page. Sur celle qui affiche tous les mangas, toutes les informations suplémentaires apparaissent.
• Fusion de la page Option et Identification
• Refonte totale des fonctions, simplification et optimisation pour un rendu plus rapide.

2013 : Version 5

• Barre de menu toujours visible
• Suppression de l’abécédaire en guise d’intercalaire
• Image adapter au écran classique et Retina/HD
• Ajout des icons mobile (iphone, windows phone, android ) personnalisé
  
• Favicon :
• Suppression de l’accordéon d’information supplémentaire qui était peu utile et qui alourdissez le site
• Fusion de la page Option/Identification et de la liste
• Utilisation de la librairie Minifield, bien plus légère que jQuery

2022 : Version 6

Nouvelle version avec une approche plus hétéroclite ;
Manga, Comics, Roman, Bande Dessinée etc...

• Source du projet sur github
• Thème sombre par défaut et un clair en option. La préférence est enregistrée dans le Local Storage
• BDD via une feuille de calcul Google
• Une animation se joue le temps du chargement des données, mais comme c'est très rapide, on pas le temps d'en profiter !
• Affichage du menu via le header ou le footer
• Selon la position du clic/tap, le menu s'ouvre du côté (droite/gauche) correspondant et du sens (haut/bas) de manière que le bouton fermé soit le premier accessible.
  Il est possible de fermer le menu également en cliquant à l'extérieur du menu
  Option qui permet d'avoir une interface et un menu avec les labels
• Ajout des icons mobile (iphone, windows phone, android ) personnalisé
  
• Favicon :
• Suivi de projet : « Liste de lecture »
• lecture.pierre.tl

Avant propos

Tous les deux ans en moyenne, je réalise une nouvelle version de mon portfolio. Le site étant en lui-même le projet le plus récent que j'ai à présenter, il me permet surtout d'expérimenter des méthodologies, d'appliquer des idées de conception et d'utiliser des technologies.

Ce qui ma pousser à faire une nouvelle version, c'est le résultat que j'ai obtenu sur Website Carbon Calculator et comme cela faisait un moment que je vois passer des articles sur les générateurs de site statique, je me suis dit que l'heure était venu

A faire

• Image
  • Compression
  • Ajouter les images en webp article
  • Réduction des images à partir d'image retina
  • Conversion en format « webP » et « avif »
• Tag

11 janvier 2022

• Mise à jour des informations de licence et d'auteur sur package.json du site
• Passage du suivi de l'avancement du projet « Liste de lecture » directement sur le domaine dédié : lecture.pierre.tl

03 janvier 2022

• Prise en compte des caractères spéciaux dans les titres, la liste des « Recueil », le fil d'Ariane et titre de page

21 octobre 2021

• Passage en revus des règles 6 à 24 de la Checklist qualité Web
• Debug de l'affichage des messages de la recherche

19 octobre 2021

• Mise en place du re-design de mon avatar en guise de logo

12 octobre 2021

• Correction du lien du footer

11 octobre 2021

• Repasse microtypographie
• Date en français et en toutes lettres sur la page exhaustive des recueils
• Ajout d'une page mentions légales
• Passage en revus de la Checklist qualité Web pour ce site

03 octobre 2021

• Ajout de la palette de couleur au styleguide
• Position sticky du champ de recherche sur le styleguide

11 septembre 2021

• Repasse mise en forme Liste, Titre, Marge, Caractères spéciaux sur Safari mobile
• Ajout des sites et services qui ont participé à l'élaboration du ce site
• Passage du menu Recherche en pictogramme

10 septembre 2021

• Couleur bordure rouge si le champ mail du formulaire de contact n'est pas valide

8 septembre 2021

• Formulaire de contact et sa page de succès
• Ajout d'ancre sur les titres des éléments du styleguide
• Ajout des nouveaux éléments de formulaire au styleguide

7 septembre 2021

• Harmonisation des espacements
• Refonte du menu principal pour ordonner manuellement les liens

6 septembre 2021

• Coloration syntaxique des balises de code sur le styleguide
  Personnalisation des couleurs sur une base monokai
• Correction des liens pointant sur le styleguide à partir d'une recherche
• Remplacement de la police raleway pour OpenSans car les chiffre ne font pas tous la même taille :
  
  Mais quelle idée franchement !?!
• Affichage du focus des liens et boutons au clavier uniquement
• Harmonisation des bordures arrondis + changement de style les inputs type text et search

5 septembre 2021

Refonte styleguide + ajout recherche

29 aout 2021

• Correction duplication de contenu dans le RSS
• Premier jet de design de pagination pour la recherche
• Ajout de la recherche et de la functionnalité sur la page 404
• Ajout de la taille des images sur la mosaïque pour améliorer les perf

28 aout 2021

• Test d'outils pour utiliser google Sheets en base de données
• Ajout de l'année pour chaque ligne du journal de bord
• Suppression de l'url Radiophonix, car le site a brulé avec OVH le 11 mars 2021
• Ajout de mon logo au header
• Repasse alignement du header suite à l'ajout du logo
• Ajout flux RSS

17 aout 2021

• Correction du design des liens suite au passage du site en https://
• Ajout d'un meta description par défaut
• Ajout d'une Content Security Policy <meta http-equiv="Content-Security-Policy" content="default-src 'self';"> annulé car cela désactive les styles et scripts inline
• Écris Performance du site
• Mise à jour du styleguide

15 Aout 2021

• Repasse graphique sur les titres, la graisse des textes et les couleurs des composants
• Correction coquille sur la page 404

24 juillet 2021

• Passage de la police en local pour améliorer les performances du site
• Correction lien en 404 sur gitpod
• Ajout des images de l'accueil en webp et avif quand elles ne sont pas vectoriel

21 juin 2021

• Liaison de mon nom de domaine à Netlify

13 juin 2021

• Ajout de la balise <desciption> pour chaque page
• On affiche la balise <meta name="date" seulement pour les réalisations et articles
• Ajout page de maintenance
• Passage du script de changement de thème sombre/clair en «in line»
• Utilisation du logo en ascii pour la page de maintenance

06 juin 2021

• Suppression de l'intitulé de poste dans le header
• Changement de taille, couleur et d'espacement dans le header
• Repasse sur le menu principal et le sous-menu du styleguide
• Repasse Intitulé de poste
• Écris Machine à écrire
• Mise à jour du styleguide

05 juin 2021

• Retropixel : mise en forme du reste à faire + repasse logo
• Pixel-art : ajout des concours Retropixel + mise en forme du vrac/reste à faire
• Mise à jour mosaique pour Retropixel et Pixelart

04 juin 2021

• Rédaction Poweo, page de maintenance
• Suite de la rédaction de Retropixel (en cours)
• Rédaction Mangatheque
• Rédaction Kinematik

24 mai 2021

• Mise a jour des lien
• Galerie d’image en full HTML/CSS style lightbox, voir pixels en vrac

22 mai 2021

• Correction affichage du caractères spécial "↗" sur Safari mobile
• Ajout macro "code", "titre h2" et "sommaire"

19 mai 2021

• Rédaction article
• Ajout de média

02 mai 2021

• Conversion automatique en format "webP" et "avif" pour les images en .png .jpg et .jpeg
• Correction focus theme switch
• Retire les recueils en brouillon

25 avril 2021

• Ajuste des styles pour les balise <code> <pre>
• passage de la citation en html dans le markdown pour respecter la charte
• Rédaction suite et fin : site statique
• Changement du style pour les <figcaptions> dans un lien
• Correctif espacement liste
• Correctif style liste sommaire
• Ajout fil Ariane
• Ajout du sitemap.xml

21 avril 2021

• 1er commit via Gitpod
• Coloration des listes ordonnée
• Ajout de "créer un site statique" au recueil (wip)

20 avril 2021

• Rédaction suite et fin : site perso

18 avril 2021

• Changement de style de base des listes non ordonnée
• Modification graisse style de base
• Ajout style de lien secondaire
• Ajout style liste sommaire
• Script pour scroll horizontalement avec un molette normal
• Suite de la rédaction : site perso
• Repasse styleguide

17 avril 2021

• Rédaction en cours : historique portfolio site perso
• Ajout d'un composant qui scroll horizontalement

16 avril 2021

• Amélioration du rendu des images en pixel art
• Ajout des vignettes de concours
• Ajout projet wet

15 avril 2021

• Optimisation des images de la mosaïque

13 avril 2021

• Test image responsive

11 avril 2021

Changement de la mosaïque :

• Améliore l'affichage en mobile
• Diminution du code
• Changement d'aspect au survol

10 avril 2021

• Repasse rédactionnel sur Metalfest et Kirby
• Rédaction et mise en forme pour Radiophonix, Aux délices d'Ahmed, Formz et Faire part mariage
• Rédaction et mise en forme en cours pour Pixel Art

05 avril 2021

• Design citation
• Couleur de fond clair pour les images sombre dans le thème sombre
• Ajout de 2 tailles pour faire des mises en pages en large
• Ajout intro facultatif au macro du styleguide
• Rédaction et mise en forme : Cuyz, Kirby, Norder's Meat

21 mars 2021

• Script machine à écrire sur la page d'accueil uniquement
• Mise en place lien d'évitement
• Repasse rédactionnel sur la réalisation t-shirt Metalfest

20 mars 2021

• Ajout des pages de réalisation pour la mosaïque, contenu rédiger
• Simplification de l'organisation des couleurs
• Mise en forme des éléments de mosaïques s'il n'y a pas d'image
• Dynamisation de la taille d'un élément de mosaïque
• Mise en place du script machine à écrire

17 mars 2021

• Article "intitulé de poste" + lien caché dans le header
• Ajout d'un mailto crypté pour le contact au lieu d'une page avec un formulaire.
• Ajoute "↗" apres les liens ne provenant pas pierre.tl, ptl9.netlify.app ou étant local.
  C'est pas idéal mais ca fonctionne pour les pages écrite en markdown

10 mars 2021

• Réorganisation des couleurs
• Ajout des styles pour le focus des liens/label
• Ajout de la mosaïque des realisation (en cours)
• Ajustement des listes non ordonnée
• Ajout d'élément dans la liste des choses à faire
• Ajout de 3 réalisations pour la mosaïque (rédaction et dynamisation en cours)

06 mars 2021

• Refonte des couleurs de l'ascii art
• Ajout page 404
• Correction des menus en small

05 mars 2021

• Passage du switch de thème en icone
• Découpage des layouts en include
• Ajouts des icons & favicons (génération via Favicon Generator)
• Amélioration de l'affichage en mobile

01 mars 2021

Ajout de metadata, amélioration du layout standard, ajout d'une todolist, styleguide, repasse sur les styles

26 février 2021

Ajout du journal de bord, repasse design menu

25 février 2021

Dynamisation des menus en Nunjucks et réorganisation des fichiers, merci Bryan Robinson Dans mes sources d'inspiration je suis tombée sur un site qui afficher un texte et le corriger façon machine à écrire j'ai beaucoup aimé le style ne pas la façon de faire donc j'ai recréé un code JavaScript permettant de faire le même résultat mettre un un codeoen. Je compte l'utiliser pour l'intitulé de mon job qui est quelque chose de très controversée dans le métier français faire un lien vers l'article en question

22 février 2021

Durant ma recherche d'inspiration je suis tombé sur une site qui avait animé un texte façon machine à écrire. Super effet pour introduire mon intitulé de poste si controverser. Création d'un script Javascript Vanilla pour reproduire l'effet

20 février 2021

Ajout du design de base

17 février 2021

Mise en place de la méthode BUSES et d'un switch de thème sombre/clair

14 février 2021

Ajout de la compilation de SASS dans 11ty, merci Dennis Hagemeier et Cassey Lottman

12 et 13 février 2021

Mise en place du projet grâce au super tutoriel de Kyle Mitofsky Contenu de démo et déploiement automatique sur Netlify

Sommaire

• Introduction
• Objectif
• Inspirations
• Google Sheet as BDD
• Couleurs
• Wireframe
• Prototype
• Dépôt, déploiement et sous-domaine

Introduction

Anciennement Mangathèque, pour sa version sixième version j'ai envie de faire plein de changement technique et assez peu finalement d'évolution fonctionnelle

Objectif

• Fini MySQL et PHP, on passe à des données provenant d'un Google Sheet
• Redesign dans un ton plus moderne et simpliste, voir les inspirations
• Wireframe sur Figma
• Ajout d'un thème sombre/clair
• Ajout des notions « vendu », « lu »
• Animation du logo avec Animate pour un petit effet Wahoo
• Ajout d'une recherche

Inspirations

J'aime beaucoup l'association des couleurs : rouge, blanc, noir, gris
et la grosse illustration du Tori et de la montagne

Google sheet as BDD

Google a modifié quelque chose car les méthodes pour passer un sheet en json ne fonctionnent plus, j'ai tenté pas mal d'outil en ligne qui fait toujours le travail mais sans payer les limites sont trop facilement atteints.

Pour arriver enfin à avoir un résultat basique en Javascript

C'est une première partie mais ça ne sera pas suffisant.
La manipulation du « json » va être coton (me faudrait un dev pour faire ça correctement), donc je vais voir pour contourner le problème avec listjs comme je veux de toute façon l'utiliser pour la recherche.

Couleurs

Wireframe

Prototype — 5 janvier 2022

Dépôt, déploiement et sous-domaine — 8 janvier 2022

• Dépot : https://github.com/pierretl/liste-de-lecture
• Déploiement : chez Netlify, https://liste-de-lecture.netlify.app
• Sous-domaine : Via Netlify également : lecture.pierre.tl

Sommaire

• JavaScript
• Outils en ligne

JavaScript — 02 janvier 2022

Outils en ligne — 28 aout 2021

100 lignes maximum par tableur, trop restreint donc éliminé

20 lignes maximum par tableur, c'est encore pire, éliminé aussi

25 lignes maximum par tableur, éliminé

• 2 spreadsheets APIs
• 500 request/month
• Handlebars snippet
• Custom permissions

• 3 connections
• 500 requests/month
• Google Spreadsheets connection
• Full CRUD API

See the Pen sheet.best by Pierre TL (@pierre_tl) on CodePen.

Connaître la configuration MX d’OVH

Selon la documentaion d'OVH
Certaines offres mails OVH ont des MX particulier

• Allez dans le menu Web Cloud
• Menu déroulant Noms de domaines
• Clique sur le nom de domaine désiré exemple.fr
• Onglet Zone DNS
• Vous trouverez un tableau, les lignes de type : MX nous intéresse

Renseigner les DNS chez Netlify

• Menu Domains
• Cliquer sur votre nom de domaine
• Dans la partie DNS settings
• Bouton Add new record
• Saisis les DNS trouvé précédemment
  • Record type :sélectionner MX
  • Name : Laissez le « @ »
  • Priority : voir les recommendations dans le tableau
  • Value : voir le tableau
  • TTL : le 3600 seconds par défaut est recommandé
• Bouton Save
• Ajouté autant DNS record qu'il y a de ligne MX dans votre tableau

Un délai de 15 minutes à 48 heures est nécessaire pour la propagation

La checklist opquast, en bref

La présente checklist se compose de 240 règles. Chacune d’entre elle est discutée de manière communautaire. La checklist est diffusée sous licence ouverte. Chaque règle contribue à produire mieux et plus vite de meilleurs sites et applications web.

Opquast

Vérification pour ce site

Règles 2020 – Version : 4.0

Contenus

1. Le site fournit aux utilisateurs la possibilité de connaître les nouveaux contenus ou services.
   ↳ Journal de bord
2. Les informations relatives aux droits de copie et de réutilisation sont disponibles depuis toutes les pages.
   ↳ Licence
3. Le code source de chaque page contient une métadonnée qui en décrit le contenu.
   ↳ Utilise en une par défaut si une page n'en a pas de spécifique
4. Les dates sont présentées dans des formats explicites.
   ↳ Repasse sur toutes les pages
5. La première occurrence d'une abréviation ou d'un acronyme dans le corps de chaque page donne accès à sa signification.
   ↳ Tous les jours je me bas contre l'abus d'abréviations et d'acronymes et j'en avais plein dans mon site !
6. La date de publication des contenus qui le nécessitent est indiquée
   ↳ Ajout de la date des réalisations et recueils sous le titre de page
7. Un lexique ou un glossaire adapté au public visé explique le vocabulaire sectoriel ou technique.
   ↳ Non applicable
8. Les contenus publicitaires ou sponsorisés sont identifiés comme tels.
   ↳ Ni de pub, ni sponso ici
9. Les conditions de modération des espaces publics sont indiquées.
   ↳ Non applicable
10. Les contenus ou fichiers destinés à des espaces publics peuvent être vérifiés avant leur envoi définitif.
    ↳ Non applicable
11. Les espaces publics proposent au moins un moyen de signaler les abus.
    ↳ Non applicable
12. Chaque graphique est accompagné de ses données numériques
    ↳ Non applicable
13. La page des résultats de recherche indique le nombre de résultats, le nombre de pages de résultats, et le nombre de résultats par page.
    ↳ Fait

Données personnelles

14. La politique de confidentialité et de respect de la vie privée est disponible depuis toutes les pages.
    ↳ Deja dans le footer !
15. La procédure d'accès et de rectification des données personnelles est décrite.
    ↳ Non applicable
16. La création de compte est possible sans recours à un système d'identification tiers.
    ↳ Non applicable
17. La création d'un compte est soumise à un processus de confirmation.
    ↳ Non applicable
18. Le site propose un mécanisme de prévention des usurpations de compte ou d'identité
    ↳ Non applicable
19. Les comptes ou abonnements ouverts en ligne peuvent être fermés par le même moyen.
    ↳ Non applicable
20. Si le site propose un espace personnel ou abonné, il est possible de sauvegarder les contenus personnels.
    ↳ Non applicable
21. La connexion à tous les services proposés est possible avec les mêmes identifiants
    ↳ Non applicable
22. Il est possible de se déconnecter des espaces privés.
    ↳ Non applicable
23. Le site accepte les alias mail contenant le signe +
    ↳ Pas de problème sur le formulaire de contact

Reste 216 règles à vérifier !

Gamme 1 — Base

var(--gamme1__fond)
var(--gamme1__bordure)

var(--gamme1__texte1)
var(--gamme1__texte2)
var(--gamme1__texte3)
var(--gamme1__texte4)

Gamme 2 — Sélection de texte

var(--gamme2__fond)
var(--gamme2__texte1)

Gamme 3 — Démo de code simple et Formulaire

var(--gamme3__fond)
var(--gamme3__bordure)
var(--gamme3__texte1)
var(--gamme3__texte2)

Récupération des Serveurs DNS de votre projet coté Netlify

• Allez sur le projet Netlify
• Cliquer sur le bouton sur « Domain settings »
• « Options »
• « Edit domain »
• Trouver la liste de 4 dns commencent par dnsx.
  • dns1.riri.fifi.loulou
  • dns2.riri.fifi.loulou
  • dns3.riri.fifi.loulou
  • dns4.riri.fifi.loulou

Renseigner les quatre DNS trouvé dans OVH Cloud

• Menu « Web cloud »
• Menu «Nom de domaine »
• Cliquer sur votre nom de domaine
• Menu « Serveur DNS »
• Bouton « Modifier les serveurs DNS »
• Saisis les quatre DNS trouvé précédemment
• Bouton « Appliquer la configuration »

Un délai de 48h est nécessaire pour la propagation aux autres DNS

Tutoriel rédiger d'après la vidéo de Cloé Coupris

Inspiration

Lorsque que j'ai parcourus le net en recherche d'inspiration pour la nouvel version de mon site, je suis tomber sur un site avec un effet machine à écrire sur un texte.

Utilisation

À ce moment là encore j'hésite sur l'intitulé de mon poste et je me suis dit que c'était une bonne façon de montrer cette indécision

Création

Démo

Pour simplifier le header et parce-que mon site n'est pas un simple portfolio sur mon métier, j'ai décidé de le supprimer.
Voici le rendu de ce moment la :

Intégrateur Web, Frond-End Développer, Front-End Designer, pourquoi autant d'intitulé ?

1. Le terme intégrateur existe qu'en France

2. Quand nos amis du numérique Digital grand amateur d'anglicisme ainsi que des commerciaux et recruteurs cherchant plus un intitulé à la mode qu'autre chose, ils se sont tourné sur l'équivalent anglais «Front-End Developper»

3. Sauf qu'au même moment, pléthore de techno basée sur du Javascript arrive à la mode. Pas mal de développeurs back se reconvertissent sans pour autant toucher une bille en HTML, CSS, qualité, accessibilité, SEO etc…

En 2015 déjà Marie Guillaumet et STPo ouvraient le débat dans le métier francophone sur cette dénomination foireuse, suivi en 2017 par Julie Moyat pour cité que ces trois la. De nos jours en parcourant les profils Twitter de nombreux professionnel, c'est la véritable foire à la saucisse de l'intitulé 😅

Alors du coup je suis quoi ? J'ai longuement hésitez avec tous ce que j'ai pus lire sur le sujet.
Je vais rester simple :

Historiquement dans mon boulot cela a toujours été les développeurs et les intégrateurs. Le rôle de chacun et le qui fait quoi est clair. À savoir que lorsque je suis allé en mairie pour ajouter mon enfant sur mon livret de famille, seul une profession en français était accepté, oublié donc ce à base de «Front-End» quelque-chose.

Voici dans les grandes lignes ce que je fais tous les jours :

• Transformer et interpréter des maquettes graphiques en code
• Concevoir et documenter le design system
• Concevoir des modules éditoriaux souples, mais qui ne sorte pas de la charte
• Faire attention au respect de la charte et harmoniser ses évolutions
• Décliner des interfaces
• Décorréler le SEO de l'aspect graphique
• Dynamiser des composants pour rendre les développeurs plus autonomes
• Optimiser les images, les .svg et le code
• Critiquer un projet, en argumentant et en faisant des propositions d'amélioration
• Apporte des idées et conseil selon un besoin
• Faire des recommandations ergonomiques
• Faire des croquis et schémas pour illustrer une idée, un parcours
• Penser avant tous aux visiteurs (prospect et client)
• Bannir les abréviations et les acronymes
• Faire du responsif (et non seulement pour les résolutions à la mode)
• Faire des sites accessibles et prêcher la bonne parole

Code

<ul class="ul-reset">
    <li>↗ default</li>
    <li class="fontptl">↗ fontptl</li>
    <li class="sans-serif">↗ sans-serif</li>
    <li class="system">↗ system-ui,-apple-system,sans-serif</li>
</ul>

Rendu de votre navigateur

• ↗ default
• ↗ fontptl
• ↗ sans-serif
• ↗ system-ui,-apple-system,sans-serif

Rendu sur Safari mobile

• Dans l'explorateur de fichier
• Cliquez dans la barre d’adresses
• taper cmd puis entrée
• une fenêtre Invite de commandes s’ouvre
• dir : affiche la liste des fichiers
• dir /s >liste.txt : créer un fichier texte avec les infos dedans

À chaque push, le site sera compilé et mis en ligne

Sommaire

• Git
• PhpStorm
• Eleventy
• Netlify

Git — 1

Exemple pour GitHub

Dans le menu Repositories, cliquez sur le bouton New

PhpStorm — 1

Mettre en place l'environement sur l'IDE

• Menu Git
• clone
• url : coller le lien du dépot
• Directory : Ajouter un dossier du nom du projet avec un antislash \mon-projet
• Dans le terminal :
  • npm install -y pour installer npm
  • npm install -g @11ty/eleventy pour installer eleventy
  • npx eleventy --serve pour lancer la dev/preview

Coloration syntaxique de Nunjucks

• Go to File -> Settings -> Editor -> File Types
• Find Twig, it's identical template engine but for PHP and add custom extension. click green plus and type *.nunj. Now all *.nunj files are parsed as Twig so in the end - support Nunjucks.

Eleventy — 1

Eleventy est un générateur de site statique,
il fonctionne nativement avec de nombreux moteur de template, comme Nunjucks

Exclure de Git le site compilé

# eleventy
_site/

Exclure de la compilation d'Eleventy un dossier/fichier

dossier/sous-dossier-exclu/
fichier-exclu.md

Principal ligne de commande

Compiler du SASS

Merci Dennis Hagemeier et Cassey Lottman

Installer les dépendances

Dossier et fichier de base : _sass/style.scss

Configuration dans 11ty

const fs = require("fs-extra");
const sass = require("sass");
const postcss = require("postcss");
const autoprefixer = require("autoprefixer");

module.exports = function (eleventyConfig) {

    // compile sass and optimize it https://www.d-hagemeier.com/en/articles/sass-compile-11ty/
    eleventyConfig.on("beforeBuild", () => {

        // Compile Sass
        let result = sass.renderSync({
            file: "_sass/style.scss",
            sourceMap: false,
            outputStyle: "compressed",
        });
        console.log("SCSS compiled");

        // Optimize and write file with PostCSS
        let css = result.css.toString();
        postcss([autoprefixer])
            .process(css, { from: "style.css", to: "style.css" })
            .then((result) => {
                fs.outputFile("_site/style.css", result.css, (err) => {
                    if (err) throw err;
                    console.log("CSS optimized");
                });
            });
    });


    // trigger a rebuild if sass changes
    eleventyConfig.addWatchTarget("_sass/");

};

Netlify — 1

Netlify est une plateforme de déploiement et de collaboration basé sur Git (GitHub, GitLab, Bitbucket)

• Dans le menu Sites, cliquez sur le bouton New site from git
• Continuous Deployment : GitHub
• Autorisé le lien entre les 2 plateformes
• Choisir le dépot
• Deploy site

Renommmer l'url :

• Deploy settings
• Change site name
• mon-projet
• save

gitpod.io un éditeur de code dans le cloud ou un IDE Online

C'est une version rafraîchissante des éditeurs de code cloud (ou des IDE, si vous voulez) qui vise à garder votre code toujours testé et à jour. En d'autres termes, il est profondément intégré à GitHub et chaque fois que vous ajoutez du code, il exécute vos tests et vos pipelines CI / CD pour s'assurer que le code est toujours à 100% d'intégrité.
Vaut le détour si vous aimez l'expérience VSCode et que vous voulez quelque chose qui prend en charge tous les principaux langages et frameworks back-end / front-end (Django, Rails, Revel, vous l'appelez).

geekflare

Utilisation

Pour lancer ce site, il suffit de

1. Etre connecté à Gitpod via GitHub
2. Préfixer de gitpod.io/# un répertoire GitHub, exemple : gitpod.io/#https://github.com/pierretl/ptl9
3. Attendre un peu et c'est bon !

Il restera plus qu'à aller dans le terminal :

• npm install -y pour installer npm
• npm install -g @11ty/eleventy pour installer eleventy
• npx eleventy --serve pour lancer la dev/preview

Coloration selon le thème

<svg width="18px" height="18px" class="fill--mode">
    <use xlink:href="#darkMode"></use>
</svg>

Changement de couleur au survol

<svg width="18px" height="18px" class="fill--mode var--lien">
    <use xlink:href="#darkMode"></use>
</svg>

Pagination pour la recherche : utilise listjs.com
Cette recherche impose les classe CSS page, active, disabled et interdit l'utilisation de pagination sinon plus rien ne fonctionne !

<ul class="ul-reset d-flex ai-c ts-l mr-m__enfant">
    <li>
        <a class="page lien-niveau2" href="#" data-i="1" data-page="3">1</a>
    </li>
    <li class="disabled">
        <a class="page lien-niveau2" href="#">...</a>
    </li>
    <li>
        <a class="page lien-niveau2" href="#" data-i="4" data-page="3">4</a>
    </li>
    <li>
        <a class="page lien-niveau2" href="#" data-i="5" data-page="3">5</a>
    </li>
    <li class="active">
        <a class="page lien-niveau2" href="#" data-i="6" data-page="3">6</a>
    </li>
    <li>
        <a class="page lien-niveau2" href="#" data-i="7" data-page="3">7</a>
    </li>
    <li>
        <a class="page lien-niveau2" href="#" data-i="8" data-page="3">8</a>
    </li>
    <li class="disabled">
        <a class="page lien-niveau2" href="#">...</a>
    </li>
    <li>
        <a class="page lien-niveau2" href="#" data-i="10" data-page="3">10</a>
    </li>
</ul>

Ajouté la classe CSS markdown à la balise du conteneur

Sur la page utilisant le layout-standard.njk ajouté markdown: "true"

Espacement standard

Conteneur header et footer

<div class="px-tranche">
    header ou footer
</div>

Enfant d'un conteneur

S'applique aux enfants direct, quelle que soit la balise, sauf au premier enfant

<div class="d-flex mr-m__enfant">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<div class="d-flex ml-s__enfant">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Liste standard de contenu

<ul>
    <li>un</li>
    <li>deux</li>
    <li>trois</li>
</ul>

Liste pour sommaire

<ul class="ul-sommaire">
    <li class="mb-xs">
        <a href="#" class="lien-niveau2">
            un
        </a>
    </li>
    <li class="mb-xs">
        <a href="#" class="lien-niveau2">
            deux
        </a>
    </li>
    <li class="mb-xs">
        <a href="#" class="lien-niveau2">
            trois
        </a>
    </li>
</ul>

{{ macro.sommaire(["Un", "Deux", "Trois"]) }}

Liste sans style — Reinitialisé

<ul class="ul-reset">
    <li>un</li>
    <li>deux</li>
    <li>trois</li>
</ul>

Liste numéroté

<ol>
    <li>un</li>
    <li>deux</li>
    <li>trois</li>
</ol>

<a href="#">Lien primaire</a>
<a href="0" rel="external">Lien primaire externe</a>

<a class="lien-niveau2" href="#">Lien secondaire</a>
<a class="lien-niveau2" href="0" rel="external">Lien secondaire externe</a>

<ul class="ul-sommaire">
    <li><a class="lien-niveau2" href="#">Sommaire</a></li>
</ul>

<a href="#" class="tg1-1 td-0">Lien de couleur "une"</a>

La lien d'évitement est affiché au focus en absolute en haut à gauche

<a href="#contenu" class="lien-evitement">Lien évitement</a>

<a href="#" class="tg1-1 tw-7">Menu header niveau 1</a>
<a href="#" class="tg1-1">Menu header niveau 2</a>
<a href="#" class="tg1-1 td-0">Menu footer</a>

<a class="bouton sticky-retour js--go-top-btn" href="#contenu" title="Retour en haut de page">Retour en haut</a>

Empêche que l'image soit flout

<img src="" alt="" loading="lazy" class="pa"/>

Medium down : Les colonnes font 100% et sont espacé de $espace-m
Large : La deuxième colonne est de la taille indiqué moins la taille de la gouttière $espace-m

<div class="d-flex">
    <div class="w-">Largeur du contenu</div>
    <div class="w-">Largeur du contenu</div>
</div>

<div class="d-flex">
    <div class="w-50">Colonne 1</div>
    <div class="w-50">Colonne 2</div>
</div>

<div class="d-flex">
    <div class="w-70">Colonne 1</div>
    <div class="w-30">Colonne 2</div>
</div>

<div class="d-flex">
    <div class="w-33">Colonne 1</div>
    <div class="w-33">Colonne 2</div>
    <div class="w-33">Colonne 3</div>
</div>

Texte courant

<span class="tw-3">300 - Trois-cents (Normal)</span>
<p class="tw-4">400 - Quatre-cents</p>
<span class="tw-7">700 - Sept-cents</span>, <strong>strong</strong>

Couleur quatre

<p class="tg1-4">500 - Cinq-cents (défaut)</p>
<p class="tg1-4"><span class="tw-7">700 - Sept-cents</span>, <strong>strong</strong></p>

Thème sombre : Fond clair + padding
Thème clair : transparent sans padding

<img src="" alt="" loading="lazy" class="fond-clair"/>

Sur un sommaire, par exemple, répartis la liste sur deux colonnes en small-only

<ul class="ul-sommaire cc2-so">
    <li><a class="tg1-1 td-0 tw-4" href="#">un</a></li>
    <li><a class="tg1-1 td-0 tw-4" href="#">deux</a></li>
    <li><a class="tg1-1 td-0 tw-4" href="#">trois</a></li>
    <li><a class="tg1-1 td-0 tw-4" href="#">quatre</a></li>
    <li><a class="tg1-1 td-0 tw-4" href="#">cinq</a></li>
</ul>