Université Paris 1 et HAS Santé échouent les critères clavier : pourquoi les secteurs santé/éducation rament

Sur les 11 sites publics français que Scrutia a audités, deux institutions emblématiques décrochent le même score de 58% de conformité confirmée RGAA :

Université Paris 1 Panthéon-Sorbonne (voir l'audit) — 58%
Haute Autorité de Santé (voir l'audit) — 58%

Coïncidence ? Non. Le même pattern technique. Les deux sites coincent quasi-exclusivement sur les critères clavier et composants interactifs — la zone aveugle des CMS publics, celle que les audits humains datant de 2-3 ans avaient pourtant signalée mais qui n'a pas été corrigée depuis.

Le profil technique commun

Les deux sites sont bâtis sur un socle ouvert français :

Univ-Paris1.fr : Drupal 9 customisé par les équipes internes + thème graphique sur-mesure
HAS-Sante.fr : Typo3 + nombreux modules métiers (publications scientifiques, recherche multi-facettes, formulaires de saisine)

Les deux héritent d'un même problème : des composants riches développés pendant des années par des équipes successives, sans tests clavier systématiques.

Les critères qui échouent en commun

Critère RGAA	Type de problème	Présent sur Paris 1	Présent sur HAS
7.1 Compatibilité technologies d'assistance	Composants ARIA mal exposés	✅	✅
7.3 Contrôlabilité clavier des scripts	Sliders, dropdowns souris-only	✅	✅
10.7 Visibilité du focus	Outline supprimé par CSS	✅	✅
11.2 Pertinence des étiquettes	Labels formulaires manquants	✅	✅
12.9 Pas de piège clavier	Composant carrousel	partielle	✅

Les deux sites ont :

Au moins 1 carrousel/slider sans contrôle clavier (Tab passe à travers sans s'arrêter)
Des modales (dialog) qui ouvrent mais ne piègent pas le focus
Des outlines de focus supprimés via outline:0 ou outline:none dans le CSS global

Pourquoi les universités et les sites santé sont particulièrement touchés

1. Densité de composants métier

Un site universitaire ou de santé publique n'est pas une vitrine — c'est un outil. On y trouve :

Des moteurs de recherche multi-critères (recherche de cours, de publications, de recommandations)
Des formulaires de candidature, de saisine, de signalement
Des tableaux de données complexes (programmes, planning, indicateurs)
Des cartographies interactives (campus, agences régionales)

Chaque composant métier = une chance de plus de rater un critère clavier. Une vitrine touristique a 5-10 composants interactifs. Un site santé en a 40-60.

2. Marchés publics et succession de prestataires

Les sites de l'enseignement supérieur et de la santé publique sont financés par marchés publics. Cela implique :

Plusieurs prestataires successifs (chaque module = un marché spécifique)
Pas de référent technique unique qui ait la vue d'ensemble
Délais courts par marché → les tests clavier passent en dernier (et souvent pas du tout)

Un audit Scrutia automatisé révèle ces dettes accumulées en 5 minutes. Là où un audit humain coûterait des semaines de travail, le scan automatique pointe immédiatement les composants à 0% clavier.

3. Charte graphique imposée vs accessibilité

La signature visuelle des sites de l'État français privilégie souvent un outline minimaliste : pas de bordures bleues type Windows, pas de halo de focus visible.

Concrètement, dans le CSS de univ-paris1.fr nous lisons :

/* Pattern fréquent : focus non visible */
*:focus { outline: 0; }
.btn:focus { box-shadow: none; }
a:focus { background: transparent; }

C'est très propre visuellement. C'est aussi inutilisable au clavier : critère RGAA 10.7 échec, critère WCAG 2.4.7 échec. Un utilisateur Tab sans repère.

La règle est simple : si tu retires l'outline par défaut, tu DOIS fournir un autre indicateur visuel de focus (changement de couleur, box-shadow custom, etc.). Sur les deux sites, l'indicateur custom n'est pas systématique.

Le coût caché : exclusion + risque légal

Côté utilisateurs

Les utilisateurs clavier-only représentent une part non négligeable des usagers d'un site santé ou universitaire :

Étudiants ou personnels en situation de handicap moteur
Patients utilisant des technologies d'assistance (lecteurs d'écran qui dépendent du clavier)
Power users qui naviguent vite au clavier

Un site clavier-cassé exclut activement ces personnes du service public.

Côté juridique

L'Université Paris 1 et la HAS sont des administrations soumises à l'obligation RGAA stricte (loi du 11 février 2005 + décret n° 2019-768). Sanctions financières prévues : jusqu'à 50 000 € par service en infraction depuis le décret de 2023. Un site universitaire est typiquement un seul service.

Calculer le risque pour ton organisation →

Comment corriger : 3 actions prioritaires

Action 1 — Restaurer la visibilité du focus (1 jour de dev)

Remplacer toutes les règles outline: 0 par un design custom visible :

/* Bon pattern : outline custom, visible */
:focus-visible {
  outline: 3px solid #FFCC00;
  outline-offset: 2px;
  border-radius: 4px;
}

Note : :focus-visible évite le halo souris-only et garde le focus clavier visible. Compatible navigateurs modernes (Edge 86+, Firefox 85+, Chrome 86+, Safari 15.4+).

Action 2 — Auditer chaque composant interactif au clavier (1 semaine de QA)

Lister tous les composants : menus, modales, carrousels, formulaires multi-étapes, dropdowns. Pour chacun, tester :

Tab : on peut atteindre chaque élément interactif ?
Enter / Espace : on peut l'activer ?
Escape : pour les modales/menus, ça ferme ?
Flèches : pour les onglets, listes, on navigue ?

C'est le test "5 touches" — il prend 30 secondes par composant.

Action 3 — Adopter un design system accessible (1 trimestre)

Plutôt que de patcher chaque composant historique, basculer progressivement sur un design system pré-audité :

Système de design de l'État français (DSFR) pour le secteur public
ou Material UI, Radix UI, Chakra UI pour le privé (tous testés WCAG 2.1 AA)

Un design system bien conçu garantit le clavier par défaut. Les composants accessibles, on n'y revient plus.

Audite ton site

Si tu travailles sur un site universitaire, hospitalier, ou plus largement un service public riche en composants interactifs, lance un audit Scrutia maintenant pour savoir où tu te situes vs Univ Paris 1 et HAS Santé. Le rapport te dira en 5 minutes quels composants coincent au clavier — avec leurs sélecteurs CSS exacts et un code de correction proposé.

Auditer mon site →