Tester l'accessibilité avec NVDA : Guide pratique 2026

L'accessibilité web est devenue un enjeu majeur en 2026, avec plus de 1,3 milliard de personnes en situation de handicap dans le monde. Pour garantir une expérience utilisateur inclusive, il est essentiel de tester vos sites web avec des technologies d'assistance. NVDA (NonVisual Desktop Access) s'impose comme l'outil de référence pour ces tests d'accessibilité.

Ce guide pratique vous accompagne dans la maîtrise de NVDA pour auditer efficacement l'accessibilité de vos sites web et identifier les points d'amélioration.

Qu'est-ce que NVDA et pourquoi l'utiliser ?

NVDA est un lecteur d'écran gratuit et open source développé par NV Access. Il permet aux personnes aveugles ou malvoyantes de naviguer sur le web en convertissant le contenu textuel en synthèse vocale ou en braille.

Contrairement aux outils automatisés, NVDA vous offre une expérience réelle de navigation non-voyante. Cette approche révèle des problèmes d'accessibilité que les scanners automatiques ne peuvent détecter, comme les problèmes de logique de navigation ou de cohérence sémantique.

Les avantages de NVDA pour les tests d'accessibilité :

• Gratuité totale (contrairement à JAWS qui coûte plus de 1000€)
• Compatible Windows avec une large base d'utilisateurs
• Mises à jour régulières et communauté active
• Support complet des standards d'accessibilité (WCAG, ARIA)

Installation et configuration de NVDA

L'installation de NVDA est simple et rapide. Rendez-vous sur le site officiel nvaccess.org pour télécharger la dernière version stable.

Étapes d'installation

1. Téléchargez l'installateur NVDA (environ 100 MB)
2. Exécutez le fichier en tant qu'administrateur
3. Suivez l'assistant d'installation
4. Choisissez les options de démarrage automatique si souhaité

Configuration initiale pour les tests

Pour optimiser NVDA pour vos tests d'accessibilité, ajustez ces paramètres :

• Vitesse de parole : Réglez entre 40-60% pour commencer
• Niveau de ponctuation : Choisissez "Quelques" pour entendre la structure
• Mode navigation : Activé par défaut pour le web
• Annonces de formatage : Activez pour détecter les liens et titres

Navigation de base avec NVDA

NVDA utilise un système de raccourcis clavier pour naviguer efficacement dans les pages web. Maîtriser ces commandes est essentiel pour conduire des tests approfondis.

Commandes essentielles

• NVDA + Ctrl + N : Activer/désactiver NVDA
• NVDA + S : Mode veille (arrêt temporaire)
• NVDA + F12 : Annoncer l'heure et la date
• NVDA + T : Lire le titre de la fenêtre

Navigation par éléments

NVDA permet de naviguer rapidement entre différents types d'éléments :

• H (1-6) : Titres par niveau
• K : Liens
• F : Champs de formulaire
• B : Boutons
• G : Images
• D : Régions ARIA

Utilisez Maj + lettre pour naviguer en sens inverse.

Méthodologie de test avec NVDA

Un test d'accessibilité efficace suit une méthodologie structurée. Voici une approche progressive pour auditer vos sites web.

1. Test de structure générale

Commencez par évaluer l'architecture de votre page :

• Vérifiez la hiérarchie des titres (NVDA + F6 pour naviguer entre les titres)
• Testez la navigation par régions (D pour les landmarks ARIA)
• Contrôlez l'ordre logique de tabulation (Tab/Maj+Tab)

2. Audit des contenus

Examinez ensuite le contenu de la page :

• Lisez la page du début à la fin avec les flèches directionnelles
• Vérifiez que tous les liens sont explicites (K pour naviguer entre les liens)
• Contrôlez les alternatives textuelles des images (G pour les images)

3. Test des formulaires

Les formulaires nécessitent une attention particulière :

• Naviguez entre tous les champs (F ou Tab)
• Vérifiez que chaque champ a un label explicite
• Testez les messages d'erreur et leur annonce
• Contrôlez les instructions et aides contextuelles

Identification des problèmes courants

Lors de vos tests NVDA, certains problèmes d'accessibilité reviennent fréquemment. Savoir les identifier vous fera gagner un temps précieux.

Problèmes de structure

• Hiérarchie de titres cassée : Saut de niveaux (H1 vers H3 directement)
• Absence de landmarks : Pas de navigation par régions possible
• Contenu non-ordonné : Ordre de lecture illogique

Problèmes de contenu

• Liens non-explicites : "Cliquez ici", "En savoir plus" sans contexte
• Images sans alternative : NVDA annonce "image" sans description
• Tableaux mal structurés : Absence d'en-têtes ou de résumé

Problèmes de formulaires

• Champs sans label : NVDA ne peut pas identifier le champ
• Messages d'erreur non-liés : Erreurs non-annoncées automatiquement
• Instructions manquantes : Format attendu non-précisé

Outils complémentaires pour l'audit

NVDA peut être associé à d'autres outils pour un audit complet de l'accessibilité de votre site web.

Extensions navigateur recommandées

• axe DevTools : Détection automatique de problèmes
• WAVE : Evaluation visuelle de l'accessibilité
• Colour Contrast Analyser : Vérification des contrastes

Intégration avec les outils d'audit web

Pour une approche globale, combinez NVDA avec des plateformes d'audit comme SiteRadar qui intègrent des vérifications d'accessibilité automatisées. Cette combinaison vous permet de couvrir à la fois les aspects techniques et l'expérience utilisateur réelle.

Qu'est-ce que le mode navigation de NVDA ?

Le mode navigation (Browse Mode) est le mode par défaut de NVDA pour consulter les pages web. Il transforme la page en document linéaire navigable avec les flèches directionnelles et les raccourcis de navigation rapide.

En mode navigation, NVDA charge tout le contenu de la page et permet de naviguer librement sans déclencher d'actions involontaires. C'est le mode idéal pour lire le contenu et effectuer des tests d'accessibilité.

Pour basculer entre mode navigation et mode formulaire, utilisez NVDA + Espace. Le mode formulaire est activé automatiquement dans les champs de saisie pour permettre la frappe.

Comment tester les images avec NVDA ?

Pour tester l'accessibilité des images avec NVDA, utilisez la touche G pour naviguer d'image en image. NVDA annoncera le texte alternatif de chaque image ou "image" si aucun texte n'est défini.

Une image accessible doit avoir :

• Un attribut alt descriptif pour les images informatives
• Un attribut alt vide (alt="") pour les images décoratives
• Une description longue (longdesc) pour les graphiques complexes

Si NVDA annonce seulement "image" ou le nom du fichier, c'est un signe que l'image n'est pas accessible. Les images décoratives ne doivent générer aucune annonce.

Comment vérifier l'accessibilité des formulaires ?

Pour tester un formulaire avec NVDA, commencez par naviguer vers le premier champ avec F ou Tab. NVDA doit annoncer le type de champ, son label et ses instructions éventuelles.

Un formulaire accessible présente ces caractéristiques :

• Chaque champ a un label explicite (balise label ou aria-label)
• Les champs obligatoires sont identifiés (required ou aria-required)
• Les erreurs sont liées au champ correspondant (aria-describedby)
• Les groupes de champs utilisent fieldset/legend

Testez également la soumission du formulaire et vérifiez que les messages d'erreur sont annoncés automatiquement par NVDA.

Quels sont les raccourcis NVDA essentiels pour les tests ?

Les raccourcis indispensables pour tester l'accessibilité avec NVDA sont :

• H/Maj+H : Navigation entre titres (tous niveaux)
• 1-6 : Navigation par niveau de titre spécifique
• K/Maj+K : Navigation entre liens
• F/Maj+F : Navigation entre champs de formulaire
• B/Maj+B : Navigation entre boutons
• D/Maj+D : Navigation entre landmarks (régions)
• NVDA+F7 : Liste des liens de la page
• NVDA+F5 : Actualiser la page
• NVDA+Ctrl+F : Rechercher dans la page

Ces raccourcis permettent de tester rapidement la structure et l'organisation du contenu de n'importe quelle page web.

Comment interpréter les annonces de NVDA ?

NVDA fournit des informations verbales riches qu'il faut savoir interpréter. Une annonce typique inclut le type d'élément, son contenu et ses propriétés.

Exemples d'annonces et leur signification :

• "Titre niveau 1 : Accueil" : Titre principal bien structuré
• "Lien Contactez-nous" : Lien avec texte explicite
• "Champ d'édition Email obligatoire" : Champ requis bien identifié
• "Image" : Image sans texte alternatif (problème d'accessibilité)
• "Bouton Menu déplié" : État d'un menu déroulant clairement indiqué

Une annonce claire et informative indique une bonne accessibilité, tandis qu'une annonce vague ou absente révèle un problème à corriger.