ARIA : rôle searchbox
Le rôle searchbox indique qu'un élément est un type de textbox destiné à spécifier des critères de recherche.
Description
Le searchbox peut être utilisé à la place de textbox lorsque la zone de texte se trouve à l'intérieur d'un élément avec le rôle search. Un searchbox est l'équivalent sémantique de l'élément HTML <input> de type search, <input type="search">, qui devrait être utilisé à la place si possible.
Le searchbox doit avoir un nom accessible. Si le rôle searchbox est appliqué à un élément HTML <input>, une <label> associée doit être utilisée. Sinon, utilisez aria-labelledby si une étiquette visible est présente, ou aria-label si une étiquette visible n'est pas présente.
Le lecteur d'écran annoncera « zone de recherche », « édition de recherche » ou « champ de recherche » plus le nom accessible. Cela peut être redondant si « recherche » est inclus dans l'étiquette.
Exemples
<div tabindex="0" aria-label="search" role="searchbox" contenteditable></div>
Bien que ce qui précède soit valide, il est plus simple, plus concis et moins redondant pour l'utilisateur·ice de lecteur d'écran d'écrire :
<input type="search" />
La section suivante est un formulaire de recherche avec une zone de recherche et un bouton, une région ARIA dynamique et un conteneur pour les résultats de recherche.
<form role="search">
<input
type="search"
role="searchbox"
aria-description="les résultats de recherche apparaîtront ci-dessous"
id="search"
value="" />
<label for="search">Rechercher sur ce site</label>
<button>Soumettre la recherche</button>
</form>
<div aria-live="polite" role="region" aria-atomic="true">
<div class="sr-only"></div>
</div>
<div id="search-results"></div>
Inclure role="searchbox" lorsque le formulaire possède le rôle search et que l'étiquette indique qu'il s'agit d'une recherche peut amener les technologies d'assistance à annoncer quelque chose comme « recherche recherche sur ce site zone de recherche », ce qui est redondant. L'ajout de role="searchbox" n'est pas nécessaire :
<input
type="search"
aria-description="les résultats de recherche apparaîtront ci-dessous"
id="search"
value="" />
Spécifications
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # searchbox |