Discipline : Accessibilité numérique universelle

Garantir l’usage de tous les services numériques, quelles que soient les capacités, les contextes techniques ou les contraintes de connexion.
RGAA, A11y, accessibilité cognitive, bas débit, vieux matériel, justice numérique, norme EN 301 549

  • Civic tech de l’information et des communs

    Il s’agit d’une branche de la civic tech centrée sur :

    • L’accès équitable, libre et durable à l’information publique, culturelle ou scientifique
    • La construction, la préservation et la diffusion de communs informationnels (bases de données publiques, archives ouvertes, contenus éducatifs libres, etc.)
    • L’interopérabilité, la réutilisabilité et la découvrabilité des ressources numériques
    • L’autonomie des structures intermédiaires (bibliothèques, médiathèques, centres culturels, associations) dans leur capacité à gérer, structurer et partager leurs propres contenus sans dépendre de géants technologiques

    Cette approche privilégie :

    • Des infrastructures légères, sobres et auto-hébergeables
    • Des CMS documentaires ou bases de connaissances orientés métadonnées, accessibilité et pérennité
    • Des moteurs de recherche internes intelligents, respectueux de la vie privée
    • Une architecture de l’information claire, inclusive et orientée usages publics

    Sous-domaines illustratifs

    1. Infrastructures documentaires citoyennes
      → Outils comme Omeka S, Kiwix, Publik, Archifiltre, ou des CMS sobres (Hugo, PubliForge, Dotclear, SPIP) pour structurer et diffuser des collections patrimoniales, éducatives ou associatives.
    2. Médiation numérique et accès public à l’information
      → Interfaces web accessibles dans les bibliothèques/médiathèques, bornes locales hors ligne, portails documentaires collaboratifs.
    3. Communs numériques locaux ou sectoriels
      → Bases de données partagées entre acteurs culturels, plateformes de mutualisation de ressources (ex. catalogues de médiathèques interconnectés via des API ou protocoles ouverts).
    4. Technologies de la résilience informationnelle
      → Auto-hébergement, formats ouverts, sauvegardes distribuées (IPFS, Dat), indexation sémantique (schema.org, Wikidata), compatibilité avec Google Dataset Search ou HAL.
    5. Design inclusif et sobre pour les services publics numériques
      → UX centrée sur les publics fragiles ou éloignés du numérique, interfaces WCAG/RGAA, absence de tracking, performances optimisées même en bas débit.

  • CAPTCHA accessible ou passif

    Un captcha passif est un mécanisme anti-robots qui protège les formulaires ou interactions numériques sans imposer de test perceptif (visuel, auditif) ou moteur à l’utilisateur, tout en restant utilisable par les personnes en situation de handicap, notamment celles utilisant des technologies d’assistance.

    Cette méthode vérifie que l’utilisateur est un humain en évitant toute exclusion fondée sur l’aptitude sensorielle, motrice ou cognitive.

    Contrairement aux CAPTCHA traditionnels (reconnaissance d’images, transcription de sons, puzzles interactifs), il repose sur des signaux contextuels, comportementaux ou logiques, tels que le temps de remplissage d’un formulaire, la navigation au clavier, la cohérence des actions, ou l’analyse invisible du trafic.

    Ces systèmes peuvent être entièrement invisibles (ex. Cloudflare Turnstile), adaptatifs (déclenchement conditionnel selon un score de risque), ou textuels simples (questions claires, balisées ARIA, compatibles avec les lecteurs d’écran).

    Ils respectent les principes Percevable, Operable, Understandable des WCAG et les exigences du RGAA (Référentiel général d’amélioration de l’accessibilité) en matière d’équité d’usage.

    Exemples de techniques incluses :

    • Analyse comportementale en arrière-plan (Turnstile, reCAPTCHA Enterprise invisble)
    • Défis textuels simples, correctement balisés
    • Honeypots + limitation de débit + vérification temporelle
    • Attribution d’un score de risque sans intervention utilisateur

    Critères d’accessibilité respectés :

    • Pas d’obligation de vision, d’audition ou de précision gestuelle
    • Compatibilité avec les lecteurs d’écran et la navigation clavier
    • Absence de discrimination cognitive ou linguistique
    • Transparence partielle ou totale de l’expérience utilisateur

    Les CAPTCHA passifs représentent aujourd’hui la solution la plus inclusive et efficace contre les bots modernes. Leur adoption répond à la fois à des impératifs d’accessibilité légale (RGAA, EN 301 549) et à une exigence d’expérience utilisateur fluide.

  • Linéarisation

    La linéarisation est un principe qui consiste à organiser le contenu d’une page web dans un ordre clair et logique, sans se baser uniquement sur la mise en page visuelle.

  • Ratio de contraste 4,5

    Le ratio 4,5 est le minimum requis par WCAG 2.1 pour du texte normal en niveau AA, afin d’assurer une bonne lisibilité pour les personnes ayant une vision normale ou modérément déficiente.

    Le ratio de contraste mesure la différence de luminosité entre la couleur du texte et celle de son arrière-plan. Il est exprimé sous la forme X:1, où X représente la clarté du texte par rapport au fond.

    Exemple concret d’un ratio 4,5:1

    • Texte #767676 (gris foncé) sur fond #FFFFFF (blanc) → Ratio ≈ 4,5:1
    • Texte #000000 (noir) sur fond #AAAAAA (gris clair) → Ratio ≈ 4,5:1

    Si le ratio est inférieur à 4,5:1, le texte risque de ne pas être suffisamment lisible pour certains utilisateurs, notamment ceux ayant une déficience visuelle.

    Les WCAG (Web Content Accessibility Guidelines) définissent des niveaux précis pour le contraste entre le texte et l’arrière-plan :

    Niveau WCAGRatio minimum exigé
    AA (Texte normal, ≤ 18pt)4,5:1
    AA (Texte large, ≥ 18pt en gras ou 24px normal)3,0:1
    AAA (Texte normal, ≤ 18pt)7,0:1
    AAA (Texte large, ≥ 18pt en gras ou 24px normal)4,5:1

    Echelle de contraste

    Minimum : 1:1 → Aucune différence de contraste (ex : blanc sur blanc).

    Maximum : 21:1 → Noir pur (#000000) sur blanc pur (#FFFFFF).

    21:1 est la valeur maximale théorique, correspondant au contraste le plus élevé entre deux couleurs visibles.

  • Navigation au clavier

    La navigation au clavier est une manière de se déplacer et d’interagir avec les éléments d’un site web ou d’une application en utilisant uniquement le clavier, sans recourir à la souris.

    Cette approche est essentielle pour l’accessibilité numérique, permettant aux personnes ayant des limitations motrices ou visuelles d’utiliser efficacement une interface.

    Principales combinaisons de touches pour la navigation au clavier

    Déplacement entre les éléments interactifs

    Tab → Avancer d’un élément interactif à l’autre (liens, boutons, champs de formulaire).
    Maj + Tab → Reculer d’un élément interactif à l’autre.

    Flèches directionnelles (↑ ↓ → ←) → Déplacer le focus dans les menus, listes et formulaires.
    Entrée (↵) → Valider un bouton ou ouvrir un lien sélectionné.
    Espace → Activer une case à cocher ou scroller vers le bas.

    Début (Home) → Aller en haut de la page ou du document.
    Fin (End) → Aller en bas de la page ou du document.
    Page Up / Page Down → Faire défiler la page par sections.

    Gestion des onglets et fenêtres

    Ctrl + Tab → Passer à l’onglet suivant du navigateur.
    Ctrl + Maj + Tab → Revenir à l’onglet précédent.
    Ctrl + W → Fermer l’onglet actif.
    Ctrl + T → Ouvrir un nouvel onglet.
    Alt + Tab → Basculer entre les applications ouvertes.
    Alt + Maj + Tab → Basculer en sens inverse entre les applications ouvertes.

    Raccourcis spécifiques aux formulaires

    Entrée (↵) → Soumettre un formulaire.
    Espace → Sélectionner / désélectionner une case à cocher.
    Flèches haut/bas → Parcourir les options d’un menu déroulant.
    Échap (Esc) → Fermer une boîte de dialogue ou un menu déroulant.

    Synonymes : navigation par touches, interaction clavier, déplacement par touches de navigation, contrôle au clavier, exploration via le clavier, navigation clavier

  • RAAM – Référentiel d’évaluation de l’accessibilité des applications mobiles

    Le RAAM (Référentiel d’Évaluation de l’Accessibilité des Applications Mobiles) est un cadre opérationnel français, développé par l’ANCT (Agence Nationale de la Cohésion des Territoires) en collaboration avec des experts accessibilité, des associations (notamment l’APF France Handicap) et des acteurs du numérique responsable.

    Il adapte les principes des WCAG 2.1 (Web Content Accessibility Guidelines) au contexte spécifique des applications mobiles (iOS et Android), en tenant compte de :

    • l’interaction tactile (gestes, pression longue, glissement),
    • la diversité des capteurs (gyroscope, accéléromètre, caméra),
    • la navigation vocale (VoiceOver, TalkBack),
    • les contraintes d’environnement (lumière, bruit, mobilité),
    • les spécificités UI/UX mobiles (taille des cibles, densité d’information, changement d’orientation).

    Ce que le RAAM apporte concrètement :

    • 67 critères techniques et fonctionnels, organisés en 13 thématiques (navigation, lecture, saisie, feedback, etc.),
    • des méthodes de test précises (outils, gestes à reproduire, configurations de lecteurs d’écran),
    • des cas utilisateurs réels (ex. : « Utilisateur malvoyant avec VoiceOver cherche un bouton de validation »),
    • une grille d’évaluation harmonisée, utilisable en audit interne ou externe.

  • Accessibilité numérique

    Capacité de tous les systèmes, services, contenus et outils numériques (pas seulement le web) à être utilisables de manière équitable par toutes les personnes, quel que soit leur contexte (handicap, langue, niveau technique, connexion, appareil, environnement).

    Périmètre : tout l’écosystème numérique

    • Logiciels bureautiques (LibreOffice, Word)
    • Applications mobiles (iOS/Android)
    • Interfaces vocales (assistants IA)
    • Documents PDF, ePub, vidéos
    • Bornes interactives, objets connectés
    • Et aussi le web

    Enjeux

    • Accessibilité cognitive (langage simple, structure claire)
    • Accessibilité situationnelle (utilisation en pleine lumière, en déplacement, avec une seule main)
    • Accessibilité culturelle (représentation, langues minorisées, codes visuels inclusifs)
    • Accessibilité économique (coût des outils, accès à l’équipement)

    Technologies et outils par domaine

    1. Accessibilité web (WCAG / RGAA)

    Outils d’audit automatisé

    OutilTypeSouveraineté
    axe (Deque)Bibliothèque JS / extension ChromeOpen source, exécutable localement
    Lighthouse (Google)Audit intégré à DevToolsCloud optionnel → utiliser en local
    WAVE (WebAIM)Extension + version webGratuit, mais version en ligne dépendante
    Pa11yCLI pour intégration CI/CDAuto-hébergeable, idéal pour GitLab CI
    Tota11y (Khan Academy)Bookmarklet légerCode open source, sans tracking

    Outils de test manuel

    • NVDA (Windows) – lecteur d’écran libre
    • VoiceOver (macOS/iOS) – natif, gratuit
    • Orca (Linux) – lecteur d’écran open source
    • Keyboard-only navigation – pas d’outil requis, juste un clavier

    Développement inclusif

    • HTML sémantique (<button>, <label>, ARIA si nécessaire)
    • CSS focus visibles (:focus-visible)
    • prefers-reduced-motion pour désactiver les animations
    • Contraste dynamique via CSS variables

    2. Documents accessibles (PDF, ePub, Office)

    FormatBonnes pratiquesOutils
    PDFBalisage structuré, tags, lang, titre, ordre de lectureLibreOffice (export PDF/UA), PDFtk, PAC 2024 (validateur RGAA)
    ePubStructure HTML5, métadonnées, navigationSigil (éditeur ePub open source)
    Word / ODTStyles titres, descriptions d’images, tableaux simplesLibreOffice Writer (meilleure accessibilité que Word Online)

    3. Médias accessibles (vidéo, audio, image)

    MédiaExigenceOutils libres
    VidéoSous-titres (SRT/VTT), transcription texte, audiodescriptionAegisub (sous-titres), FFmpeg (encodage), Amara (collaboratif)
    AudioTranscription textuelle, index temporelWhisper.cpp (transcription locale, pas de cloud)
    ImageTexte alternatif, descriptions longues si complexeRédaction humaine > IA (évite les alt génériques)

    4. Applications mobiles et desktop

    PlateformeTechnologiesBonnes pratiques
    AndroidAccessibility API, TalkBackTester avec TalkBack activé
    iOSVoiceOver, Dynamic TypeRespecter les tailles de texte système
    Desktop (Linux/Windows/macOS)ATK, UI Automation, AX APIUtiliser des toolkits accessibles (GTK, Qt)

    5. Interfaces vocales et IA générative

    EnjeuSolution éthique
    Reconnaissance vocalePrivilégier Whisper local plutôt que Google Speech-to-Text (vie privée)
    Chatbots / assistantsFournir alternative texte, éviter les boucles sans issue, permettre export
    Génération de altUtiliser LLM local (Mistral + RAG) → mais toujours valider humainement

    6. Outils de gouvernance et formation

    OutilUsage
    RGAA 4.1Référentiel officiel français (gratuit, open data)
    AccessiWebGrille pédagogique pour audits
    MOOC Accessibilité numérique (France Université Numérique)Formation gratuite
    Document d’accessibilitéObligatoire sur les sites publics → modèle conforme RGAA

    7. Auto-hébergement et souveraineté

    Pour éviter les dépendances cloud :

    • Audit local : Pa11y + Docker
    • Transcription : Whisper.cpp sur PC fixe
    • Hébergement de vidéos : PeerTube (avec sous-titres intégrés)
    • Analytics respectueux : Plausible (auto-hébergé) → pas de tracking invasif

  • Lecteur d’écran – screen reader

    Un lecteur d’écran (screen reader) est un logiciel d’assistance qui convertit le contenu visuel d’une interface numérique en restitution auditive (synthèse vocale) ou tactile (afficheur braille), permettant aux personnes aveugles, malvoyantes ou en situation de handicap cognitif de naviguer, lire et interagir avec des systèmes informatiques.

    Mais au-delà de l’outil, le lecteur d’écran révèle une vérité fondamentale : « Un site n’est pas accessible parce qu’il fonctionne avec un lecteur d’écran. Il fonctionne avec un lecteur d’écran parce qu’il est bien conçu. »

    En effet, le lecteur d’écran ne « corrige » pas un mauvais code : il expose la qualité sémantique, structurelle et comportementale de l’interface. Un bouton codé en <div onclick="..."> restera invisible ; un formulaire sans <label> sera incompréhensible.

    Outils et technologies de lecture d’écran

    1. Lecteurs d’écran libres et open source (recommandés)

    OutilPlateformeAvantages DMA
    NVDA (NonVisual Desktop Access)WindowsGratuit, open source, mis à jour régulièrement, compatible avec Firefox/Chrome
    OrcaLinux (GNOME)Intégré nativement, scriptable, respecte les standards d’accessibilité AT-SPI
    EmacspeakLinuxPour développeurs, intégré à l’environnement Emacs

    Pour tes tests : NVDA + Firefox est la combinaison la plus proche des usages réels en France (source : enquêtes APF, Agefiph).

    2. Lecteurs d’écran propriétaires (intégrés, mais acceptables)

    OutilPlateformeRemarque
    VoiceOvermacOS, iOS, iPadOSNatif, performant, gratuit, excellent pour tests mobiles
    TalkBackAndroidGratuit, intégré, personnalisable
    NarrateurWindowsFonctionnel, mais moins complet que NVDA

    Ces outils sont acceptables pour le test, car fournis par le système, sans tracking ni abonnement.

    3. Affichages braille (complément essentiel)

    TechnoRôle
    Afficheurs braille USB/Bluetooth (ex. : HumanWare Brailliant, Focus Blue)Restitution tactile en temps réel
    Prise en charge via API systèmeWindows (UI Automation), macOS (AX API), Linux (AT-SPI)

    Un bon site doit aussi fonctionner avec braille seul (pas de sons). Cela exige des textes alternatifs concis et une structure logique rigoureuse.

    4. Outils complémentaires pour les développeurs

    OutilUsage
    Accessibility Inspector (macOS)Explorer l’arbre d’accessibilité
    Windows Accessibility InsightsAudit détaillé, compatible NVDA
    axe DevToolsExtension Chrome/Firefox pour repérer erreurs WCAG
    WAVEVisualisation des problèmes d’accessibilité directement sur la page

    5. Bonnes pratiques pour compatibilité lecteur d’écran

    • HTML sémantique strict : <button>, <nav>, <main>, <h1>…
    • Liens significatifs : éviter « cliquez ici », préférer « Lire la définition de »
    • Gestion dynamique des mises à jour : aria-live="polite" pour contenus AJAX
    • Ordre de tabulation logique : cohérent avec la lecture visuelle
    • Pas de contenu caché non pertinent : masquer avec aria-hidden="true" si purement décoratif
    • Tests réels : au moins 10 minutes avec NVDA + clavier, yeux fermés

    6. À éviter absolument

    • Les interfaces 100 % JavaScript sans fallback HTML
    • Les carrousels automatiques (désorientent la lecture séquentielle)
    • Les icônes sans texte alternatif (<i class="fa-user"></i> → inaccessible)
    • Les messages d’erreur uniquement visuels (rouge, souligné, etc.)

  • Civic tech – technologie citoyenne

    La civic tech (ou technologie citoyenne) désigne l’ensemble des outils numériques, plateformes et pratiques technologiques conçus pour renforcer la démocratie, l’engagement citoyen, la transparence publique, l’accès à l’information et la coopération autour des biens communs. Elle vise à redonner du pouvoir d’action, de décision ou de contrôle aux citoyen·nes, souvent en s’appuyant sur les principes de l’open data, du logiciel libre, de la neutralité, de l’accessibilité et de la sobriété numérique.

    La civic tech (technologie citoyenne) est un champ vaste et interdisciplinaire, qui évolue selon les contextes politiques, sociaux et technologiques. Elle se déploie autour de plusieurs sous-domaines, souvent imbriqués, mais qu’on peut distinguer pour mieux en saisir la diversité.

    1. Transparence et Open Government

    Outils visant à rendre l’action publique plus visible, compréhensible et contrôlable.

    • Open data : plateformes de données publiques réutilisables (data.gouv.fr, etc.)
    • Suivi budgétaire : visualisation des dépenses publiques (ex. Budget participatif en ligne)
    • Accès aux documents administratifs : automatisation des demandes CADA/Loi de 1978
    • Monitoring législatif : suivi des textes de loi, amendements, votes (ex. NosSénateurs.fr)

    2. Participation citoyenne et Démocratie délibérative

    Dispositifs numériques facilitant l’expression, le débat et la co-décision.

    • Budgets participatifs en ligne
    • Consultations publiques structurées (ex. avec Citizen OS, Decidim)
    • Assemblées citoyennes numériques (tirage au sort + outils de délibération)
    • Pétitions citoyennes certifiées (ex. Change.org vs. plateformes institutionnelles)

    3. Engagement civique et mobilisation collective

    Technologies favorisant l’organisation, la coordination et l’action collective.

    • Plateformes d’entraide locale (voisinage, solidarité)
    • Cartographie collaborative de besoins ou ressources (ex. Umap, OpenStreetMap humanitaire)
    • Outils de campagne associative (emailing éthique, collecte de signatures, relais médiatiques)

    4. Accès aux droits et Justice sociale

    Numérique au service de l’inclusion juridique, administrative et sociale.

    • Chatbots d’orientation juridique ou sociale (ex. LegalBot, Mes-Aides)
    • Guides interactifs pour démarches administratives
    • Signalement de discriminations ou violences (avec anonymisation)
    • Cartographie des services publics de proximité

    5. Éducation civique et littératie numérique

    Former les citoyens à comprendre, interroger et agir dans l’espace public numérique.

    • Jeux sérieux sur la démocratie
    • Ateliers de médiation numérique critique
    • Outils pédagogiques sur la désinformation, les algorithmes, les données

    6. Civic tech de l’information et des communs

    Infrastructures documentaires, bases de connaissances, CMS sobres, moteurs de recherche internes, etc., au service des bibliothèques, centres culturels, associations, archives.

    • Gestion de communs informationnels
    • Structuration sémantique et interopérabilité
    • Auto-hébergement et résilience documentaire
    • Accessibilité cognitive et technique des contenus

    7. Surveillance citoyenne et Accountability

    Citoyens comme contre-pouvoir via la technologie.

    • Crowdsourcing de monitoring (qualité de l’air, travaux publics, élections)
    • Whistleblowing sécurisé (SecureDrop, GlobaLeaks)
    • Observatoires indépendants (corruption, lobbying, conflits d’intérêts)

    8. Technologies pour la démocratie locale et territoriale

    Renforcer les liens entre institutions locales et habitant·es.

    • Portails municipaux collaboratifs
    • Cartes participatives d’urbanisme
    • Réseaux sociaux locaux décentralisés

    9. Infrastructures critiques citoyennes

    Construire des alternatives techniques aux monopoles numériques.

    • Réseaux mesh (communication hors réseau centralisé)
    • Hébergement coopératif (associations d’autogestion du numérique)
    • Identité numérique souveraine (SSI – Self-Sovereign Identity)
    • Stockage distribué (IPFS, Solid, etc.)

    10. Éthique, gouvernance & design des civic tech

    Réflexion transversale sur les principes qui doivent guider ces outils.

    • Design inclusif et non extractiviste
    • Sobriété numérique et empreinte écologique
    • Interopérabilité et standards ouverts
    • Gouvernance partagée des plateformes (modèles coopératifs, communs numériques)

  • Stark

    Stark est un plugin et une suite d’outils de conception d’accessibilité pour les designers et développeurs, spécifiquement conçu pour être utilisé directement dans les applications de conception comme Figma.

    Son objectif principal est d’aider les équipes à vérifier, simuler et corriger les problèmes d’accessibilité dès la phase de conception, garantissant que les produits sont conformes aux normes internationales, principalement les WCAG (Web Content Accessibility Guidelines).

    Fonctionnalités clés dans Figma

    1. Contrast Checker (Vérificateur de Contraste) :
      • C’est la fonctionnalité la plus utilisée. Elle analyse le rapport de contraste entre le texte et l’arrière-plan sur un élément sélectionné.
      • Elle indique si le contraste respecte les niveaux d’accessibilité AA et AAA du WCAG.
    2. Colorblind Simulator (Simulateur de Daltonisme) :
      • Il permet de simuler 8 types courants de déficience visuelle des couleurs (daltonisme) directement sur votre maquette.
      • Cela garantit que l’information n’est pas transmise uniquement par la couleur.
    3. Focus Order (Ordre de Focalisation) :
      • Cet outil permet aux designers d’annoter l’ordre de tabulation (l’ordre dans lequel un utilisateur naviguant au clavier passe d’un élément interactif à l’autre).
      • C’est une étape cruciale pour l’accessibilité aux utilisateurs de claviers et de lecteurs d’écran.
    4. Alt-Text Annotations (Annotations de Texte Alternatif) :
      • Aide à documenter le texte alternatif requis pour les images, que les développeurs peuvent ensuite implémenter.

    Stark est un outil essentiel pour intégrer l’accessibilité dans le workflow de conception (Shift-Left Accessibility), en fournissant des métriques et des simulations précises directement là où le design est créé.

    Plugin Figma