Expertise · Design UI/UX

Un système de design où le contraste est calculé, le mouvement a un bouton d’arrêt, et ce qui ne passe pas la vérification est écrit noir sur blanc.

Nous travaillons avec des jetons de couleur au rapport de contraste calculé, des modèles de clavier vérifiés élément par élément et des animations qui s’arrêtent selon la préférence du système. Nous vérifions avec un outil, sur de vraies pages, et nous publions aussi ce qui a échoué.

Discuter d'un projet

Déjà construitSistemul rulează pe site-ul acesta și se poate inspecta. Tokenul `--muted: #666b65` obține între 4,72:1 și 5,45:1 pe cele șapte fundaluri ale sitului — recalculat de noi cu formula de luminanță din WCAG, nu preluat dintr-un instrument. Opt culori scrise direct în foaia de stil produceau 2,88–4,49:1; le-am găsit cu axe-core 4.10.2 rulat pe zece pagini live și le-am înlocuit cu tokenul, iar corectura e deja în foaia servită de producție. A doua implementare verificabilă: mecanismul de oprire a animațiilor — 38 de elemente animate la infinit pe pagina de start, toate acoperite de un buton de pauză, plus regula globală care anulează animațiile la `prefers-reduced-motion: reduce`.

La plupart des « systèmes de design » sont une palette et une liste de composants. Le nôtre commence par quelque chose de plus ennuyeux et de plus utile : chaque couleur de texte a un rapport de contraste calculé par rapport à chaque arrière-plan sur lequel elle apparaît effectivement. Pas « ça rend bien », mais un nombre. Le jeton de texte secondaire de ce site, `--muted: #666b65`, obtient entre 4,72:1 et 5,45:1 sur les sept arrière-plans utilisés. Le seuil requis pour le petit texte est de 4,5:1.

Ce nombre n’est pas apparu par bon sens. Nous avons exécuté axe-core 4.10.2 sur dix pages du site propre et la seule règle WCAG systématiquement enfreinte était le contraste : 31 à 43 nœuds par page, dont 31 provenaient de l’en-tête et du pied de page, donc ils se multipliaient sur l’ensemble des 147 adresses. Huit couleurs écrites directement dans la feuille de style produisaient 2,88:1 à 4,49:1. La plus grave, à 10 px et 3,72:1, était exactement la ligne avec les liens juridiques — le chemin par lequel une personne arrive lorsqu’elle veut exercer un droit.

La deuxième partie du système est le mouvement, traité comme une fonction, non comme un décor. Sur la page d’accueil, il y a 38 éléments animés à l’infini. Tous sont couverts par un bouton de pause : à l’appui, ils passent à l’état arrêté, l’étiquette change et l’état est annoncé aux lecteurs d’écran. Séparément, une règle globale annule toute animation et transition lorsque le système demande un mouvement réduit, arrête le défilement fluide et masque même le bouton de pause, qui devient inutile. Nous avons aussi vérifié le piège classique — une animation qui commence à une opacité presque nulle et laisse le contenu invisible lorsqu’elle est annulée : il n’y en a pas ici.

Le reste est une question de discipline : indicateur de focus visible, de 2 px, appliqué uniquement à la navigation au clavier ; parcours avec les flèches dans les groupes d’onglets, selon le modèle recommandé ; formulaires avec erreurs annoncées comme alerte et confirmations annoncées comme état. Et une règle que nous tenons fermement : ce que nous n’avons pas pu vérifier est écrit comme non vérifié. L’audit interne comporte une section sur les limites de l’outil, et deux défauts trouvés là sont encore ouverts — ils sont ci-dessous, avec leur nom.

Ce que cela comprend

Le travail, par composantes

Les couleurs sont des jetons, et le contraste est un nombre calculé

La palette tient dans un bloc de 14 variables, et le texte secondaire utilise un seul jeton : `--muted: #666b65`. Les rapports, recalculés avec la formule de luminance relative du WCAG sur les sept fonds du site : 5,45:1 sur blanc, 5,15, 5,11, 5,03, 5,02, 4,79 et 4,72. Le texte principal, `--ink: #181a19`, obtient 17,49:1 sur blanc ; l’accent vert `#355c46`, 7,58:1. Lorsqu’une couleur n’atteint pas le seuil, c’est le jeton qui change, pas l’argumentation en réunion.

Les composants ont un modèle de clavier, pas seulement un aspect

Le groupe d’onglets de la page d’accueil utilise un index de tabulation mobile : seul l’onglet actif est accessible avec Tab, les autres sont retirés de l’ordre, et les flèches gauche/droite, Home et End déplacent le focus, avec le comportement par défaut de la touche annulé. C’est le modèle des pratiques recommandées pour les composants accessibles, implémenté, non cité. Dans les composants de base du site, il y a 21 étiquettes accessibles, 7 états pressé/non pressé, 3 liens entre titre et région, 2 états de sélection, 2 régions qui annoncent les changements et 2 liens entre la commande et le panneau qu’elle contrôle.

Le mouvement a un bouton d’arrêt et s’éteint selon la préférence du système

Sur la page d’accueil, il y a 38 éléments animés à l’infini, lancés automatiquement, qui durent plus de cinq secondes — exactement la situation régie par le critère « Pause, arrêt, masquage ». Les 38 sont couverts par des boutons de pause : à l’appui, les animations passent à l’état arrêté et l’état du bouton change. Séparément, avec `prefers-reduced-motion: reduce`, une règle globale annule toute animation et transition, arrête le défilement fluide, supprime le déplacement au survol de la souris et masque le bouton de pause. Dans la feuille principale, il y a sept blocs de ce type, plus un dans la feuille de base.

Indicateur de focus visible, seulement là où il faut

Contour solide de 2 px, dans le vert d’accent, avec 5 px d’écart, appliqué via `:focus-visible` — il apparaît donc lors de la navigation au clavier et non au clic de souris. Vérifié dans le navigateur, élément par élément, dans l’en-tête et sur les premières commandes du contenu : quatre éléments différents, le même contour. Nulle part dans la feuille de style il n’existe de contour supprimé sans remplacement.

Formulaires qui annoncent leurs états

Dans le formulaire de contact du site, les étiquettes sont implicites sur les champs, l’erreur est marquée comme alerte et la confirmation comme état — donc les lecteurs d’écran les annoncent sans que l’utilisateur doive chercher. Le piège pour les bots est correctement masqué : parent sans affichage, marqué comme masqué pour les technologies d’assistance et retiré de l’ordre de tabulation. L’audit interne confirme que les règles d’étiquetage, de nom pour les sélecteurs et de remplissage automatique passent toutes.

La vérification se fait avec un outil, sur des pages réelles

Nous exécutons axe-core 4.10.2 sur la page live, pas dans un environnement de test, sur un échantillon de dix pages couvrant différents modèles : la page d’accueil, le catalogue, une page produit, l’index des services, une page de service, la matrice de solutions, une combinaison de la matrice, le contact, les tarifs, un article et un document juridique. Le résultat brut est écrit sur la page, avec le nombre de nœuds, pas résumé en « conforme ».

Ce qui a échoué est publié, pas arrondi

Du même audit : à 320 px de largeur, la commande de l’en-tête et le bouton de menu dépassent l’écran de 22 px et la page défile horizontalement — l’arithmétique donne 362 px de contenu dans un conteneur de 280 px. Dans les documents juridiques, les liens dans le texte ne se distinguent du texte environnant que par la couleur, et le rapport entre l’accent et le texte courant est de 1,01:1, donc le soulignement est obligatoire. Les deux sont ouverts, avec correction écrite. Nous les publions parce qu’un acheteur qui demande l’accessibilité mérite de voir à quoi ressemble une vraie liste de défauts.

Pas de thème sombre — dit, non simulé

Le site n’a pas de thème sombre. Le bloc de jetons est déclaré pour trois sélecteurs qui reçoivent des valeurs identiques, et dans le code il n’existe aucune règle pour la préférence de schéma du système. Vérifié dans le navigateur avec le schéma sombre émulé : la page reste blanche. La conséquence utile : tous les rapports de contraste mesurés sont valables dans les deux schémas. La conséquence désagréable : le commutateur de thème est du code mort du point de vue de la couleur. Un vrai thème sombre signifie une nouvelle mesure complète du contraste, pas la copie des valeurs.

Typographie avec des règles, pas avec des préférences

Une seule famille pour les titres et le texte, avec un espacement des lettres ajusté par niveau — plus serré pour les grands titres, `-0,055em` aux niveaux un et deux, `-0,035em` au niveau trois — et une graisse 500 pour les titres. Les paragraphes utilisent l’équilibrage des lignes, afin qu’un mot ne reste pas seul sur la dernière ligne. Le conteneur a une largeur maximale de 1240 px avec des marges de 48 px, et les boutons ont partout la même hauteur de ligne. Ce sont des règles écrites dans la feuille de style, donc elles s’appliquent aussi après notre départ.

À quoi cela ressemble

Le parcours, étape par étape.

L’inventaire des tâches et des points de blocage

La première livraison est la liste des choses que les gens viennent faire, dans l’ordre de fréquence, avec l’endroit où ils s’arrêtent aujourd’hui. Sans elle, tout nouvel écran n’est qu’une préférence esthétique. Avec elle, chaque décision ultérieure a un critère.

Les jetons et la vérification du contraste, avant les écrans

On définit les couleurs, les fonds sur lesquels elles apparaissent effectivement et le rapport de chaque paire, calculé. Nous livrons le tableau des paires avec leurs rapports. C’est bien moins cher que de découvrir à la fin que la palette choisie ne peut pas être utilisée pour le petit texte.

Les composants, avec le modèle de clavier écrit en même temps que la mise en page

Chaque composant interactif reçoit, dans le même commit, la mise en page et le comportement : ce qui se passe avec Tab, avec les flèches, avec Escape, ce qui est annoncé et comment. Le modèle de clavier ajouté plus tard est une réécriture, pas un ajout.

L’audit avec un outil, sur des pages réelles, avec le résultat brut livré

Nous exécutons l’outil sur un échantillon qui couvre différents modèles et livrons la sortie brute, pas un résumé. Chaque constat reçoit l’emplacement dans le code, le critère violé, la correction proposée et le critère de vérification après correction — par exemple : le nombre de nœuds de contraste doit tomber à zéro sur la page qui ne contient que l’en-tête et le pied de page.

La remise, avec la liste de ce qui n’a pas été vérifié

Nous remettons les jetons, les composants, le document d’audit et la liste de ce qui n’a pas pu être vérifié, avec la raison. Pour ce site, la liste inclut l’activation au clavier et l’émulation de la préférence de mouvement réduit dans le navigateur — deux limites de l’outil, toutes deux écrites telles quelles.

Un ciclu în 3 pași

Les données

Ce que nous touchons, où elles sont et combien de temps elles restent

Les questions que pose toute personne ayant un délégué à la protection des données — posées ici avant qu'il ne les pose.

Ce que nous collectons à l’étape de recherche: Les tâches que les gens ont réellement à faire, le contexte dans lequel ils les font et l’endroit où ils se bloquent. Quand cela suppose des enregistrements, des entretiens ou l’observation de sessions réelles, on décide à l’avance qui participe, ce qui est enregistré, qui a accès et combien de temps cela est conservé — par écrit, pas par accord tacite.
Les résultats de l’audit d’accessibilité: La sortie brute de l’outil, le regroupement des nœuds par paire couleur–fond, les rapports recalculés indépendamment et l’emplacement dans le code de chaque couleur. Le tout est livré comme document versionné à côté du code, pas comme présentation — pour que chacun puisse reproduire la mesure avec les commandes de l’annexe.
Ce passe dans le code et ce reste en discussion: Les jetons, les composants, les motifs de clavier et les règles de mouvement vont dans la feuille de style et dans les composants. Les préférences qui ne peuvent pas s’exprimer comme une règle — « paraître plus chaleureux » — restent des décisions à discuter, et ne se glissent pas comme des valeurs écrites directement dans les composants. C’est de là que viennent, en général, les couleurs qui échouent à la vérification.
Les préférences du visiteur: La préférence de mouvement réduit se lit depuis le système, via la requête de media, et n’est pas stockée chez nous. Il n’y a pas de thème sombre à retenir. La mesure du trafic passe par l’outil configuré sur le projet et s’active après consentement ; elle ne relève pas du système de design, mais de la même page.
Ce que nous ne présupposons pas: Nous ne présupposons pas qu’un résultat automatique signifie la conformité. L’outil couvre une partie des critères ; le reste demande une vérification manuelle, et certaines choses n’ont pas pu être vérifiées du tout avec les outils disponibles — l’activation au clavier, par exemple, car le panneau de navigateur utilisé ne produit pas l’activation par défaut. C’est écrit ainsi dans l’audit : non vérifié, non passé.

Un cas

Huit couleurs, une seule variable, et la liste restée ouverte

La situation

Site propre, récemment refait, avec un système de jetons déjà existant. Personne n’avait rien signalé. La question n’était pas « est-ce beau ? », mais « que dit un outil qui n’a pas d’avis ? ».

Ce que nous avons construit

Nous avons injecté axe-core 4.10.2 dans la page live et l’avons exécuté sur dix pages choisies pour des motifs différents. La seule règle WCAG systématiquement enfreinte était le contraste. Nous avons regroupé les nœuds par paire texte–fond, recalculé chaque rapport avec la formule de luminance relative du standard — afin de ne pas dépendre d’un seul outil — et recherché chaque couleur dans la feuille de style. Huit valeurs écrites directement dans le code produisaient tous les échecs permanents : 3,89:1 sur les 25 liens du pied de page, 2,88:1 sur les numéros d’étape, 3,72:1 sur la ligne avec les liens juridiques, et encore cinq entre 3,99 et 4,49. Le bon jeton existait déjà ; le problème était que huit règles le contournaient.

Ce qui en est sorti

Les huit valeurs ont été remplacées par le jeton, et le jeton a été ajusté pour passer le seuil sur les sept fonds du site. Vérifié deux fois : dans le dépôt, aucune des huit couleurs n’apparaît plus, et la feuille de style servie aujourd’hui par la production ne contient que le jeton. Recalculé indépendamment : 4,72:1 dans le pire des cas et 5,45:1 sur blanc. Le reste de l’audit a confirmé ce qui était déjà correct — l’indicateur de focus, le motif de clavier dans les groupes d’onglets, les étiquettes et les états du formulaire, la couverture complète des animations avec des boutons de pause.

Ce que le cas ne dit pas

Deux constats sont restés ouverts et sont écrits comme tels : à 320 px de largeur, l’en-tête dépasse l’écran de 22 px, et dans les documents juridiques les liens dans le texte se distinguent uniquement par la couleur, avec un rapport de 1,01:1 par rapport au texte environnant — la couleur seule ne suffit pas, un soulignement est nécessaire. Et la limite de méthode : un outil automatique couvre une partie des critères. L’activation au clavier n’a pas pu être testée avec les outils disponibles et est marquée non vérifiée, non passée.

Questions

Ce que les gens nous demandent avant d'appeler

Qu’est-ce que signifie concrètement « design accessible » chez vous ?

Cela signifie des chiffres, pas des adjectifs. Le texte secondaire de ce site utilise un seul jeton, `#666b65`, qui obtient entre 4,72:1 et 5,45:1 sur les sept fonds où il apparaît — le seuil demandé pour le texte petit est de 4,5:1. Le focus est un contour de 2 px qui n’apparaît que lors de la navigation au clavier. Le mouvement a un bouton d’arrêt et se désactive complètement selon la préférence de mouvement réduit du système. Chacune de ces affirmations a une place dans le code et un mode de vérification.

Comment vérifiez-vous ? Avec quel outil ?

axe-core 4.10.2, exécuté sur la page live, sur dix pages couvrant des motifs différents — la page d’accueil, le catalogue, une page produit, l’index et une page de service, la matrice de solutions et une combinaison de celle-ci, le contact, les tarifs, un article, un document juridique. Le résultat brut, avec le nombre de nœuds par page, entre dans le document. Par-dessus, nous recalculons manuellement les rapports de contraste avec la formule du standard, afin de ne pas dépendre d’un seul outil. Et nous écrivons explicitement ce qui n’a pas pu être vérifié.

Qu’est-ce qui a échoué chez vous ?

Au moment de l’audit, la seule règle systématiquement enfreinte était le contraste : 31 à 43 nœuds par page, dont 31 dans l’en-tête et le pied de page, donc multipliés sur les 147 adresses. Huit couleurs écrites directement dans la feuille de style produisaient 2,88 à 4,49:1 ; la plus grave, à 10 px et 3,72:1, était la ligne avec les liens juridiques. Toutes huit sont maintenant remplacées par le jeton, et la correction se trouve dans la feuille servie par la production. Deux points restent ouverts : à 320 px, l’en-tête dépasse l’écran de 22 px, et dans les documents juridiques les liens dans le texte ne se distinguent que par la couleur, avec un rapport de 1,01:1 par rapport au texte environnant. Les deux ont une remédiation écrite.

Pourquoi publiez-vous les défauts de votre propre site ?

Parce que sinon « accessible » est un mot sans coût. N’importe qui peut écrire qu’il respecte la norme ; peu montrent la liste des non-conformités, avec le nombre de nœuds et la ligne de la feuille de style. Si nous travaillons ensemble, vous recevrez le même type de liste sur votre site — y compris les parties qui ne nous avantagent pas. Il est moins cher de l’apprendre de nous.

Le site a-t-il un thème sombre ?

Non, et je le dis parce que c’est vérifiable : le bloc de tokens est déclaré pour trois sélecteurs qui reçoivent des valeurs identiques, et il n’existe dans le code aucune règle pour la préférence de schéma. En émulant le schéma sombre dans le navigateur, la page reste blanche. Le bon côté est que tous les rapports de contraste mesurés sont valables dans les deux schémas. Le point à résoudre est qu’un commutateur de thème qui ne change pas les couleurs est du code mort. Un vrai thème sombre signifie remesurer entièrement le contraste — il ne se transfère pas depuis le thème clair.

Les animations ne gênent-elles pas les utilisateurs ?

Elles le peuvent, et c’est pourquoi elles ont deux sorties. Premièrement : chaque élément animé à l’infini est couvert par un bouton de pause — sur la page d’accueil, nous avons vérifié que les 38 sont couverts, zéro non couverts. Deuxièmement : avec la préférence de mouvement réduit du système, une règle globale annule toute animation et transition, arrête le défilement fluide et masque même le bouton de pause. Nous avons aussi vérifié le piège classique : si une animation démarre à une opacité presque nulle et est annulée, le contenu peut rester invisible. Ici, cela ne se produit pas, car les éléments n’ont pas d’opacité de base réduite.

Livrez-vous aussi du code, ou seulement des maquettes ?

Nous livrons les tokens et les composants dans le code. Un système de design qui reste dans l’outil de conception s’érode à la première urgence : quelqu’un écrit une couleur directement dans le composant parce que « cela rend mieux ici », et après six mois vous avez huit couleurs parallèles qui échouent à la vérification. C’est exactement ce qui s’est aussi produit chez nous, c’est documenté plus haut, et c’est pourquoi le token est la seule source de vérité pour la couleur du texte secondaire.

Que ne pouvez-vous pas vérifier ?

Quelques éléments concrets, écrits tels quels dans l’audit. Activation au clavier : le panneau du navigateur utilisé ne produit pas l’activation par défaut — l’appui sur Entrée sur un bouton ne génère pas de clic — donc nous ne rapportons pas de conclusions sur Entrée et Espace. Émulation de la préférence de mouvement réduit : nous n’avons pas pu l’activer dans le navigateur, donc la règle a été vérifiée dans la source, et un test manuel avec la préférence activée reste recommandé. Et les métriques de charge perçue n’étaient pas disponibles dans l’outil, donc elles sont marquées comme non mesurées, pas estimées.

Garantissez-vous la conformité WCAG ?

Non, et personne d’honnête ne devrait le faire sur la base d’un outil automatique. Un outil couvre une partie des critères ; le reste demande une vérification manuelle, et certains exigent de vrais utilisateurs. Ce que nous garantissons, c’est la méthode : échantillon déclaré, outil et version déclarés, résultat brut publié, rapports recalculés indépendamment, correction avec critère de vérification, et liste explicite de ce qui n’a pas pu être vérifié. Un certificat sans cette liste ne dit rien.

Sur quoi reposent les affirmations ci-dessus (15 sources)

Cele opt culori scrise direct în foaia de stil (2,88–4,49:1) nu mai există nici în depozit, nici în foaia de stil servită de producție; în locul lor e `var(--muted)`https://www.megapromoting.com/_next/static/chunks/0~95cl1qc44v9.css · 2026-09-06

14 d'entre elles sont du code et des fichiers de nos dépôts. Nous n'en publions ni le nom ni la ligne : réunies sur une seule page, elles décriraient trop précisément comment sont construits des systèmes qui ne sont pas seulement les nôtres. Nous les parcourons avec vous, dans le dépôt, sur demande — la vérification reste possible, elle se fait simplement lors d'un échange.

Comment nous travaillons Tous les services

Qu'est-ce que vous voudriez voir mieux fonctionner ?

Racontez-nous votre processus. Ensemble, nous décidons ce qui vaut la peine d'être construit, ce que nous pouvons connecter et comment nous vérifions le résultat.

Discutons