Comment savoir, à l’étape trois d’un formulaire de déclaration de sinistre, s’il en reste deux ou six ? La personne qui remplit ce type de formulaire est rarement détendue : elle vient de subir un dégât des eaux, un accident ou un vol, et le dernier obstacle qu’elle veut rencontrer est une interface qui ne dit pas où elle en est.
Le cas traité ici porte sur un parcours de déclaration en cinq étapes chez une mutuelle : informations sur l’assuré, nature du sinistre, description des circonstances, dépôt de pièces justificatives, puis récapitulatif avant envoi. Deux de ces étapes impliquent un dépôt de fichier, souvent le point le plus fragile du parcours côté accessibilité.
Étape 1 : donner un cap dès l’arrivée sur le formulaire
Avant même de remplir le premier champ, la personne doit savoir combien d’étapes composent le parcours et où elle se situe. Un indicateur de progression textuel, annoncé par un lecteur d’écran, change tout :
<h2>Étape 2 sur 5 : nature du sinistre</h2>
<p>Prochaine étape : description des circonstances.</p>
Ce simple couple titre plus indication de la suite évite à l’utilisateur de naviguer à l’aveugle. Le titre de niveau 2 est aussi ce qui permet à un lecteur d’écran de sauter directement d’étape en étape via la navigation par titres, un réflexe courant chez les utilisateurs expérimentés de NVDA ou de VoiceOver.
Étape 2 : le dépôt de pièces justificatives, point sensible
Le champ <input type="file"> natif reste la base la plus sûre, à condition de l’associer correctement à son étiquette et d’annoncer clairement ce qui est attendu (format, poids maximal, nombre de fichiers). Le vrai problème apparaît après le dépôt : que se passe-t-il visuellement et sonorement une fois le fichier chargé ?
- Le nom du fichier déposé doit apparaître dans une liste lisible, pas seulement dans une info-bulle graphique.
- Une confirmation textuelle doit être injectée dans une région
aria-live="polite": « Photo-degat-cuisine.jpg ajoutée, 2,1 Mo ». - Un bouton de suppression par fichier doit être clairement étiqueté, par exemple
aria-label="Retirer Photo-degat-cuisine.jpg", pour éviter l’ambiguïté d’une simple croix.
Sans cette confirmation sonore, un utilisateur de lecteur d’écran ne sait tout simplement pas si son dépôt a fonctionné, et recommence parfois l’opération plusieurs fois par précaution, ce qui multiplie les fichiers en doublon.
Étape 3 : les messages d’erreur de validation, un par un
Sur la page de récapitulatif, si un champ obligatoire manque encore, le message d’erreur doit faire trois choses en même temps : être associé au champ concerné via aria-describedby, apparaître dans un résumé en tête de formulaire avec des liens d’ancrage vers chaque champ fautif, et recevoir le focus clavier automatiquement sur ce résumé au moment de la tentative d’envoi.
<div role="alert" tabindex="-1" id="resume-erreurs">
<p>2 champs nécessitent une correction :</p>
<ul>
<li><a href="#date-sinistre">Date du sinistre manquante</a></li>
<li><a href="#piece-jointe">Aucune pièce jointe fournie</a></li>
</ul>
</div>
Étape 4 : le récapitulatif final, une lecture rassurante
Avant l’envoi définitif, la page de récapitulatif doit reprendre chaque information saisie sous forme de liste structurée, avec un lien de modification par section plutôt qu’un unique bouton « Retour » qui ferait tout perdre. Un utilisateur qui repère une erreur dans la date du sinistre doit pouvoir y revenir directement sans repasser par les quatre étapes précédentes.
Étape 5 : la confirmation d’envoi
Une fois la déclaration transmise, la page de confirmation doit contenir un titre de niveau 2 clair (« Déclaration envoyée »), un numéro de dossier sélectionnable au clavier, et idéalement un lien vers le suivi du dossier. Le focus doit être déplacé vers ce titre de confirmation dès le chargement de la page, pour que la personne ne reste pas bloquée sur le bouton d’envoi qu’elle vient d’activer.
Conseil maison : testez ce parcours avec un lecteur d’écran ET en coupant le son, pour vérifier que rien ne dépend uniquement de l’audio ou uniquement de l’affichage.
Notre verdict
Un formulaire multi-étapes avec dépôt de fichiers n’a rien d’insurmontable, à condition de traiter chaque transition comme une information à part entière : où en est-on, qu’est-ce qui vient d’être ajouté, qu’est-ce qui manque encore. Sur un parcours aussi chargé émotionnellement qu’une déclaration de sinistre, cette clarté n’est pas un luxe, c’est ce qui permet à la personne de garder le contrôle du début à la fin.
