Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

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

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

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

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

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

Voir aussi