Revoir le flux HTML du moteur de recherche pour l'accessibilité

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">