Observed behavior
The search field has two competing labels:
- an
aria-label="Saisie de recherche rapide" directly on the <input> element, which takes priority over the <label> in calculating the accessible name;
- a
<label for="...">Rechercher des documents</label> correctly coupled to the field via id and for.
The only visible text associated with the field is the placeholder "Tapez le nom d'un document". Voice restitution is therefore different from the text displayed on screen, and the three formulations are inconsistent with each other.
Expected behavior
The field must have a single label, carried by the <label> element, whose formulation is consistent with the placeholder. The aria-label attribute on the <input> must be removed. The placeholder can complement the label but cannot replace it.
Steps to reproduce
- Open the search modal.
- Navigate with a screen reader to the search field.
- Observe that voice restitution differs from visible text.
Possible solution
Before:
<label for="search-input">Rechercher des documents</label>
<input id="search-input" aria-label="Saisie de recherche rapide" placeholder="Tapez le nom d'un document">
After:
<label for="search-input">Tapez le nom d'un document</label>
<input id="search-input" placeholder="Tapez le nom d'un document">
RGAA criteria
Critère 11.1 : Chaque champ de formulaire a-t-il une étiquette ?
Critère 11.2 : Chaque étiquette associée à un champ de formulaire est-elle pertinente ?
Impact
A visually impaired user or a user with a cognitive disability starts typing a word in the search field. The visible text disappears and voice restitution does not match what is displayed on screen. They may no longer know what they are filling in.
Prioritization
P1
Observed behavior
The search field has two competing labels:
aria-label="Saisie de recherche rapide"directly on the<input>element, which takes priority over the<label>in calculating the accessible name;<label for="...">Rechercher des documents</label>correctly coupled to the field viaidandfor.The only visible text associated with the field is the
placeholder"Tapez le nom d'un document". Voice restitution is therefore different from the text displayed on screen, and the three formulations are inconsistent with each other.Expected behavior
The field must have a single label, carried by the
<label>element, whose formulation is consistent with theplaceholder. Thearia-labelattribute on the<input>must be removed. Theplaceholdercan complement the label but cannot replace it.Steps to reproduce
Possible solution
Before:
After:
RGAA criteria
Critère 11.1 : Chaque champ de formulaire a-t-il une étiquette ?
Critère 11.2 : Chaque étiquette associée à un champ de formulaire est-elle pertinente ?
Impact
A visually impaired user or a user with a cognitive disability starts typing a word in the search field. The visible text disappears and voice restitution does not match what is displayed on screen. They may no longer know what they are filling in.
Prioritization
P1