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