​

Accessibilité (RGAA, WCAG, ARIA)

​

WCAG (Web Content Accessibility Guidelines)

• Définition : Norme internationale, publiée par le W3C, fournissant des lignes directrices détaillées pour l’accessibilité des contenus web. C’est la référence mondiale.
• Principes (POUR) : Le contenu doit être :
  • Perceptible (informations et composants UI présentés de manière perceptible).
  • Opérable (l’utilisateur peut interagir avec les composants UI).
  • Unterstable (le contenu doit être compréhensible).
  • Robuste (le contenu peut être interprété de manière fiable par une grande variété d’agents utilisateurs, y compris les technologies d’assistance).
• Niveaux de Conformité : A (le plus bas), AA (le plus courant et souvent exigé légalement), et AAA (le plus strict).

​

RGAA (Référentiel Général d’Amélioration de l’Accessibilité)

• Définition : Adaptation française et obligation légale, basée sur la WCAG, qui s’applique à toutes les entités publiques et à certaines grandes entreprises privées en France.
• Objectif : Garantir la mise en conformité des sites et applications web aux normes internationales pour le contexte administratif et légal français.

​

ARIA (Accessible Rich Internet Applications)

• Définition : Ensemble d’attributs HTML spéciaux (role, aria-*) utilisés pour ajouter des informations sémantiques aux éléments d’interface qui n’en ont pas naturellement (widgets complexes créés avec des div).
• Rôle : Indiquer aux technologies d’assistance (comme les lecteurs d’écran) la fonction, l’état et la valeur d’un élément d’interface.

<div onclick="closeModal()">X</div> 

<div role="button" aria-label="Fermer la fenêtre modale" tabindex="0" onclick="closeModal()">
  X
</div>

​

Performance et Core Web Vitals

• Optimisation des Ressources :
  • Compression : Utiliser des formats d’image modernes (WebP, AVIF) et compresser les fichiers JS/CSS.
  • Lazy Loading : Différer le chargement des images et des composants situés hors écran (below the fold).
• Critial CSS : Isoler et charger en ligne (inline) le minimum de CSS nécessaire pour afficher le contenu visible immédiatement (le “Above the Fold”). Le reste du CSS peut être chargé de manière asynchrone.
• Réduction du JS Bloquant : Minimiser le code JavaScript qui doit être exécuté avant que la page ne devienne interactive. Utiliser le code splitting (séparer le code en petits paquets) et le chargement différé (defer, async).
• Mise en Cache Agresive : Utiliser des entêtes de mise en cache HTTP appropriées et des Service Workers (pour les PWA) afin de servir les ressources directement depuis le cache du navigateur.

​

Documentation des Composants (Storybook)

• Définition : Storybook est l’outil standard de l’industrie pour le développement, le test et la documentation des composants d’interface utilisateur (UI).
• Fonctionnement : Chaque composant est documenté par des “stories” qui représentent ses différents états (ex: un bouton désactivé, actif, en chargement).
• Avantages :
  • Développement Isolé : Permet de développer les composants indépendamment du contexte de l’application, améliorant la concentration et les tests.
  • Bibliothèque de Design : Sert de référence visuelle unique pour les designers et les développeurs, assurant la cohérence du système de design.
  • Tests de Régression Visuelle : Facilite la vérification que les changements de code n’ont pas introduit d’effets secondaires visuels indésirables sur d’autres états du composant.

// Button.stories.js (Fichier de documentation pour un composant 'Button')
import { Button } from './Button';

// Exportation de l'état "Primaire"
export const Primary = {
  args: {
    label: 'Envoyer les données',
    variant: 'primary',
    disabled: false,
  },
};

// Exportation de l'état "Désactivé"
export const Disabled = {
  args: {
    label: 'Opération impossible',
    variant: 'secondary',
    disabled: true, // Seul ce prop change
  },
};