Accessibilité

Comment nous concevons pour le clavier, les lecteurs d'écran, les malvoyants et les utilisateurs à faibles ressources. Un instantané honnête et daté.

Nous rédigeons cette page comme le reste du site : ce qui fonctionne, ce qui ne fonctionne pas, et comment le vérifier vous-même. Elle est datée car l'accessibilité est une cible mouvante. Nous retestons après chaque version majeure.

Déclaration d'accessibilité formelle

Norme visée

WCAG 2.2 AA sur l'ensemble de l'expérience. Traitement AAA sur l'apparence du focus (anneaux épais à fort contraste, non masqués) et sur le libellé des formulaires + récupération des erreurs. Suivi par rapport à la Recommandation W3C, pas une paraphrase.

Dernier audit interne

2026-04-19. Passage manuel par notre propre équipe sur la page d'accueil, print-size, le hub /standards/ + 9 pages d'autorité, et les 45 pages d'atterrissage de schémas de paiement.

Audit externe

Commandé, rapport en attente. Publication à l'arrivée sur /accessibility/audit/ avec notes de remédiation, imperfections comprises, sans sélection arbitraire.

Cadence de vérification

Vérification mensuelle ponctuelle + passage manuel complet après tout changement majeur de l'interface. Les vérifications automatisées (linting du contraste, analyse des nouveaux critères WCAG 2.2) sont exécutées à chaque déploiement.

Contact + SLA

hello@abundera.ai, nous accusons réception des rapports d'accessibilité sous 2 jours ouvrés, les trions sous 5, et traitons les blocages clavier / lecteur d'écran / cognitifs comme des problèmes prioritaires (expédiés avant les travaux de fonctionnalités).

Conformité WCAG 2.2 AA par critère de succès

Les critères nouveaux dans la version 2.2 que nous surveillons activement. Le statut reflète ce que nous avons vérifié en interne ; l'audit externe primera.

Prise en charge des mouvements et des couleurs forcées

• prefers-reduced-motion: reduce, les transitions de flottement et de fondu de l'orbe ambiant sont supprimées. Les transitions fonctionnelles restent courtes. Vérifié avec macOS Reduce Motion et Windows "Afficher les animations" désactivé.
• forced-colors: active (Mode Contraste élevé Windows), les anneaux de focus utilisent la couleur Highlight du système ; les bordures héritent du CanvasText du système. Vérifié dans Edge sur Windows 11 High Contrast.

Limitations connues

• JAWS pas encore testé. Le prochain cycle AT cible JAWS sur Edge sur Windows 11.
• Le Concepteur de cartes de visite est d'abord orienté souris pour l'aperçu de glisser-déposer. Chaque contrôle a une alternative clavier, mais la boucle de retour en direct est encore visuelle. Les entrées de couleur, la grille de préréglages et les champs hex ont maintenant des liaisons ARIA explicites (2026-04-19).
• Le rapport d'audit externe est en attente. Le statut auto-attesté dans le tableau ci-dessus sera remplacé par les conclusions de l'auditeur à l'arrivée du rapport.
• Certaines technologies d'assistance tierces (Dragon NaturallySpeaking, Speech-to-text sur Android) ne sont pas dans notre matrice de régression ; nous acceptons les rapports de la communauté et corrigeons par ticket.

Journal des modifications d'accessibilité

• 2026-04-19 (PM), Double déclenchement de région en direct TalkBack corrigé : aria-live="polite" retiré du wrapper #qr-preview ; les annonces proviennent désormais uniquement du badge de scannabilité role="status", une fois par génération. Modal BCD : les sélecteurs de couleur ont reçu des liaisons <label for> appropriées (Arrière-plan, Texte, Accent, Dégradé) ; le conteneur de grille de préréglages a reçu role="group" + aria-label. Les tableaux d'accessibilité ont reçu <caption> + scope="col"/"row", WCAG 2.2 AA + la matrice AT s'annoncent maintenant correctement sur VoiceOver, NVDA et TalkBack.
• 2026-04-19 (AM), Indicateurs de focus améliorés (3 px + sauvegarde box-shadow). Prise en charge de forced-colors + prefers-reduced-motion ajoutée. Audit de taille de cible : .saved-profile-delete, .type-search-clear, .compat-toggle-btn portés à ≥ 28 px. Saut de niveau de titre corrigé (sous-titres vCard/MECARD h4 → h3). Déclaration formelle WCAG 2.2 AA + matrice AT publiées.
• 2026-04-18, Passage de référence manuel WCAG 2.2 AA documenté. Bandeau de confiance à quatre piliers réduit pour une hiérarchie plus claire.
• 2026-03-08, Page initiale /accessibility/ publiée.

Ce à quoi nous nous engageons

• Navigation complète au clavier. Chaque contrôle du générateur, chaque modal et chaque flux d'exportation est accessible sans souris.
• États de focus visibles. Les entrées, boutons et liens focalisés affichent un anneau clair. Nous ne nous appuyons pas uniquement sur la couleur.
• Étiquettes sur chaque champ. Les entrées de formulaire ont des éléments <label> associés ou des attributs aria-label. Le texte de remplacement n'est jamais utilisé comme seule étiquette.
• Régions en direct ARIA pour l'aperçu QR et les toasts. Les lecteurs d'écran entendent "QR généré" et les messages toast lorsqu'ils se déclenchent, pas seulement lorsque le focus se déplace vers eux.
• Alternatives textuelles pour les boutons icône uniquement. aria-label sur chaque bouton SVG uniquement.
• Signification de statut indépendante de la couleur. Les badges de scannabilité et les puces de compatibilité associent la couleur à un glyphe et une étiquette de texte.
• Noms de format d'exportation explicites. Les boutons de téléchargement indiquent "Télécharger PNG", "Télécharger SVG", etc., pas seulement "Télécharger".
• Grandes cibles tactiles mobiles. Les éléments interactifs font au moins 44 × 44 pixels CSS sur les pointeurs imprécis, conformément à WCAG 2.5.8.
• Respect du mouvement réduit. Les transitions sont désactivées sous prefers-reduced-motion: reduce.

Où nous sommes encore en défaut

• JAWS pas encore testé. Licence JAWS acquise, créneau de test réservé pour le prochain cycle AT. Tous les autres principaux (VoiceOver macOS + iOS, NVDA, Narrator, TalkBack) ont réussi la régression la plus récente.
• Le Concepteur de cartes de visite est fortement orienté souris par conception (glisser-déposer, aperçu sur canvas). Des alternatives clavier existent pour chaque contrôle, mais la boucle de retour en aperçu en direct est encore visuelle. Les contrôles de couleur utilisent maintenant des liaisons <label for> appropriées + role="group" sur le sélecteur de préréglages (2026-04-19).
• Les flux de générateur complexes (CSV par lots, assistant multi-étapes) pourraient bénéficier d'une meilleure structure de lien de saut. Planifié.
• Résumés descriptifs des tableaux. Les tableaux d'accessibilité + compatibilité ont maintenant des attributs <caption> + scope (2026-04-19). Des résumés narratifs plus longs au niveau des lignes pour chaque ligne sont encore planifiés.

Matrice de prise en charge des technologies d'assistance

Artefact d'ingénierie, pas une déclaration de relations publiques. Chaque ligne est une combinaison réelle de navigateur + AT + plateforme sur laquelle nous avons physiquement mis les mains. Le statut reflète le dernier passage manuel ; les mises en garde consignent tout ce qui bloque encore un passage complet.

Cadence de version : la matrice est réexécutée contre chaque changement majeur de l'interface. "Réussi" = aucun bloqueur ; les mises en garde sont des régressions cosmétiques ou à portée étroite en file d'attente pour la prochaine version. "Non testé" = nous n'avons pas encore physiquement exécuté la combinaison, nous le disons au lieu d'omettre.

Carte du clavier

• Tab / Shift+Tab : avancer / reculer parmi les éléments focalisables.
• Entrée / Espace : activer les boutons et les bascules.
• Touches fléchées : se déplacer entre les options dans un groupe radio (sélecteur de type, sélecteur de modèle, barre d'onglets).
• Échap : fermer les modaux (Concepteur de cartes de visite, contrôle en amont, services d'impression, recadrage d'image).
• Début / Fin dans un menu déroulant pour aller au premier / dernier élément.

Audit interne, 2026-04-19

Passage manuel WCAG 2.2 AA contre la page d'accueil, /print-size/, le nouveau hub /standards/ + 9 pages d'autorité, et les 45 pages d'atterrissage de schémas de paiement (qui héritent du modèle partagé). Ce que nous avons vérifié, ce que nous avons corrigé, et ce qui est ouvert :

Vérifié comme réussi

• La cible du lien de saut existe, le lien de saut (href="#generator") se résout en un élément visible sur chaque variante de page.
• Styles de focus visibles, :focus-visible est déclaré globalement avec un contour de 2px, plus des remplacements par entrée avec une bordure de couleur + ombre. Confirmé via l'audit CSS aux lignes 34 et 88 de site/css/style.c17bfd85.css.
• Toutes les entrées de formulaire ont des étiquettes, chaque <input> / <select> / <textarea> dans le générateur a soit un <label for="..."> explicite, soit un <label> enveloppant. Le texte de remplacement comme étiquette n'est utilisé nulle part.
• Les boutons ont des noms accessibles, chaque <button> a soit un contenu textuel, soit un aria-label. Les boutons SVG uniquement (hamburger, partager, installer) portent tous aria-label.
• SVGs décoratifs marqués comme cachés, aria-hidden="true" sur chaque icône décorative pour que les lecteurs d'écran les ignorent au lieu d'annoncer leur géométrie.
• Rôles ARIA corrects, role="radiogroup" sur le sélecteur de type avec role="radio" + aria-checked sur chaque option ; role="tablist" / role="tab" + aria-selected sur les onglets du panneau.
• Contraste du texte, le texte principal est #f5f5f5 sur #08090a (≈ 17:1, WCAG AAA). Le texte atténué #a3a3a3 sur le même fond est ≈ 8:1 (au-dessus de AAA 7:1).
• Le sélecteur de langue a aria-label="Language" même si l'étiquette visible est implicite.

Corrigé dans ce passage

• Saut de niveau de titre, trois sous-titres dans les sections de champs supplémentaires vCard / MECARD étaient des <h4> sous un <h2> sans <h3> intermédiaire. Les outils de plan du lecteur d'écran ont signalé cela comme "niveau sauté." Changé en <h3> pour que le plan lise h1 → h2 → h3 → h3 proprement.

Limitations connues

• Le balayage complet Axe / NVDA / VoiceOver nécessite un navigateur + AT que nous ne pouvons pas exécuter depuis le pipeline de construction. Passage manuel basé sur le navigateur planifié mensuellement.
• L'audit indépendant tiers est commandé (voir l'espace réservé /accessibility/audit/). Le rapport sera publié à l'arrivée même s'il contient des conclusions.
• Le raccourci clavier "/" pour la palette de commandes est un léger risque de collision sur les pages avec des champs de recherche. Nous utilisons preventDefault() uniquement lorsque le focus est en dehors d'une entrée ; documenté mais pas encore audité avec AT.

Signaler un problème

Si quelque chose est inaccessible au clavier, mal étiqueté ou autrement inutilisable avec votre configuration, envoyez un email à hello@abundera.ai. Incluez votre navigateur, OS, AT et le flux spécifique. Nous traitons les bugs d'accessibilité comme des problèmes prioritaires.

Dernière révision : 2026-04-19. Prochaine révision : après le prochain changement majeur de l'interface.