Plusieurs modifications doivent être apportées sur le formulaire de recherche situé en haut de page pour respecter les critères RGAA (double A) :

Critère 7.4 : Pour chaque script qui initie un changement de contexte, l'utilisateur est-il averti ou en a-t-il le contrôle ?

Sur l'auto-complétion :

1. Par défaut, ajouter une balise <div aria-live="assertive" aria-atomic="true"> vide juste avant ou juste après la balise <input type="text" id="MOTS_CLEFS" />.
2. Cacher visuellement cette même balise <div> en CSS.
3. Dès que le champ de recherche est renseigné par l'utilisateur et que des propositions de résultats s'affichent, peupler dynamiquement cette même balise <div> d'un <p>[X] propositions de résultats. Utiliser les flèches haut et bas du clavier pour les parcourir.</p>. (Le [X] étant à remplacer par le nombre de propositions affichées.)
4. Dans le cas où l'autocomplétion ne propose aucun résultat, peupler cette balise <div> d'un <p>Aucune proposition de résultats.</p>.

Critère 10.13 : Pour chaque page web, les textes cachés sont-ils correctement affichés pour être restitués par les technologies d'assistance ?

1. Supprimer tabindex de la balise <button class="plier-deplier__bouton">
2. Ajouter aria-hidden="true" dans la balise <span class="icon icon-search">.

Critère 11.1 : Chaque champ de formulaire a-t-il une étiquette ?

Corrections à appliquer sur le champ MOTS_CLEFS :

1. Supprimer role="search".
2. Supprimer title="".
3. Ajouter aria-label="Recherche par mots clés".

Critère 11.9 : Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ?

Corrections à appliquer sur le bouton submit :

1. Supprimer tabindex
2. Ajouter aria-label="Lancer la recherche"

Critère 12.10 : Dans chaque page Web, les groupes de liens importants (menu, barre de navigation...) et la zone de contenu sont-ils identifiés sauf cas particulier ?

1. Ajouter role="search" dans la balise <div id="recherche-simple">