search

ARIA-роль ориентира для области поиска по сайту.

Такая же семантика у HTML-тега <search>.

        
          
          <form role="search">  <label for="search-field">Найти на сайте:</label>  <input    type="search"    id="search-field"    name="search"    placeholder="Например, смысл жизни"  >  <input type="submit" value="Искать"></form>
          <form role="search">
  <label for="search-field">Найти на сайте:</label>
  <input
    type="search"
    id="search-field"
    name="search"
    placeholder="Например, смысл жизни"
  >
  <input type="submit" value="Искать">
</form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Скринридер не расскажет о роли области, но пользователь сможет с помощью горячих клавиш быстро перейти к ней.

Добавьте к тегу role="search". Это может быть <div>, <span> или <form>. Пока что у одноимённого элемента <search> нет стабильной поддержки скринридерами (хотя у браузеров с тегом всё в порядке), задавайте на всякий случай явную роль как в этом примере:

        
          
          <search role="search">  <!-- Поле и другие элементы поиска --></search>
          <search role="search">
  <!-- Поле и другие элементы поиска -->
</search>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Внутри элемента с ролью search может быть не только поле поиска <input type="search">, но также связанные с поиском фильтры и ссылки. Например, чекбоксы для выбора типа товара или его цвета, ссылки на инструкции по поиску, комбинированный список со словами для автозаполнения поискового поля или подсказки.

        
          
          <form role="search">  <label for="search-field">Найти на сайте:</label>  <input    type="search"    id="search-field"    name="search"    aria-describedby="hint"    placeholder="Например, смысл жизни"  >  <span id="hint">    Поддерживаем русский, корейский, латынь и пушту.  </span>  <a href="#">Советы по поиску</a>  <fieldset>    <legend>Тип товара:</legend>    <label for="crowns">Короны</label>    <input type="checkbox" id="crowns">    <label for="cloaks">Мантии</label>    <input type="checkbox" id="cloaks">    <label for="scepters">Скипетры</label>    <input type="checkbox" id="scepters">  </fieldset>  <input type="submit" value="Искать"></form>
          <form role="search">
  <label for="search-field">Найти на сайте:</label>
  <input
    type="search"
    id="search-field"
    name="search"
    aria-describedby="hint"
    placeholder="Например, смысл жизни"
  >
  <span id="hint">
    Поддерживаем русский, корейский, латынь и пушту.
  </span>
  <a href="#">Советы по поиску</a>
  <fieldset>
    <legend>Тип товара:</legend>
    <label for="crowns">Короны</label>
    <input type="checkbox" id="crowns">

    <label for="cloaks">Мантии</label>
    <input type="checkbox" id="cloaks">

    <label for="scepters">Скипетры</label>
    <input type="checkbox" id="scepters">
  </fieldset>
  <input type="submit" value="Искать">
</form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

С ролью search сочетаются все глобальные ARIA-атрибуты, но чаще всего пригодятся:

• aria-label, если нет видимой подписи к области поиска;
• aria-labelledby, когда у области search есть видимая подпись;
• aria-describedby для подсказок;
• aria-errormessage для описания ошибок после отправки формы.

Целиком подписывать область search полезно, когда на сайте есть глобальный поиск и поиск по отдельной странице. Пользователи быстрее найдут нужный элемент в списке всех ориентиров благодаря такой подписи.

Пример с подписью прямо в атрибуте aria-label:

        
          
          <form  role="search"  aria-label="Поиск по сайту">  <!-- Элементы поиска --></form>
          <form
  role="search"
  aria-label="Поиск по сайту"
>
  <!-- Элементы поиска -->
</form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Пример с подписью через aria-labelledby.

        
          
          <h4 id="form-label">Поиск по сайту</h4><form  role="search"  aria-labelledby="form-label">  <!-- Элементы поиска --></form>
          <h4 id="form-label">Поиск по сайту</h4>
<form
  role="search"
  aria-labelledby="form-label"
>
  <!-- Элементы поиска -->
</form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Роль search создаёт ориентир поиска на странице. Это значит, что пользователи скринридеров могут быстро переместиться к этой части страницы с помощью горячих клавиш или через меню с ориентирами.