Атрибуты role
Атрибуты role в HTML используется для определения роли элемента на странице для улучшения доступности (accessibility) сайтов, помогают скринридерам правильно интерпретировать содержимое страницы.
Атрибуты role в HTML
В этой статье мы рассмотрим значения атрибута role, объясним, к каким элементам и в каких условиях их следует применять, и приведем наглядные примеры. И role, и ARIA-атрибуты являются частью стандарта WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications), разработанного консорциумом W3C. Воспользуйтесь возможностью подробного описания атрибутов aria в статье Атрибуты aria, взаимодействующих компонентах HTML.
Рекомендации использования role
Использование атрибута role должно быть осмысленным и умеренным. Вот несколько советов:
- Используйте нативные элементы, если они подходят для вашей задачи.
- Добавляйте роли только тогда, когда это действительно необходимо для улучшения доступности.
- Тестируйте с помощью скринридеров, чтобы убедиться, что ваш интерфейс доступен.
Если вы будете следовать этим рекомендациям, то сможете избежать "перебора" и сделать ваш сайт доступным и удобным для всех пользователей.
Можно ли "переборщить" с атрибутом role?
Давайте разберем, как правильно использовать атрибут role и избежать избыточности.
Избыточное использование ролей
Если вы добавляете роли к элементам, которые уже имеют семантическое значение (например, <button>, <nav>, <main>), это может быть излишним. Например:
<button role="button">Нажми меня</button>Здесь role="button" избыточен, потому что <button> уже по умолчанию имеет роль кнопки. Скринридеры и так поймут, что это кнопка.
Проблема: Избыточные роли могут запутать разработчиков и усложнить поддержку кода.
Неправильное использование ролей
Если вы назначаете роли элементам, которые не соответствуют их функциональности, это может ввести пользователей в заблуждение. Например:
<div role="button" onclick="alert('Нажато!')">Это не кнопка</div>Хотя этот элемент будет вести себя как кнопка, он не имеет всех свойств нативной кнопки (например, он не будет доступен с клавиатуры по умолчанию, если не добавить tabindex).
Проблема: Неправильное использование ролей может ухудшить доступность, а не улучшить её.
Конфликт с нативной семантикой
Если вы используете роли, которые конфликтуют с нативной семантикой элемента, это может привести к непредсказуемому поведению. Например:
<a href="#" role="heading">Ссылка, которая ведет себя как заголовок</a>Здесь элемент <a> имеет роль ссылки, но вы пытаетесь назначить ему роль заголовка. Это может сбить с толку скринридеры и пользователей.
Проблема: Конфликт ролей может сделать интерфейс недоступным.
Игнорирование нативных элементов
Иногда разработчики используют role, чтобы заменить нативные элементы (например, <div> с role="button" вместо <button>). Это может быть оправдано в редких случаях, но обычно лучше использовать нативные элементы, так как они уже имеют встроенную доступность и поведение.
Проблема: Нативные элементы уже оптимизированы для доступности, и их замена может привести к ухудшению пользовательского опыта.
Когда использовать role?
Атрибут role следует использовать в следующих случаях:
- Когда нативные элементы не подходят. Например, если вы создаете кастомный виджет, который не может быть реализован с помощью стандартных HTML-элементов.
- Когда нужно улучшить доступность. Например, если вы создаете сложный интерфейс, который требует дополнительной семантики для скринридеров.
- Когда нужно указать роль элемента, который не имеет семантического значения. Например,
<div>или<span>.
Пример правильного использования
<div role="navigation" aria-label="Основная навигация">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contact">Контакты</a></li>
</ul>
</div>Здесь role="navigation" используется для обозначения навигационного блока, что помогает скринридерам понять его назначение.
Пример избыточного использования
<nav role="navigation">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contact">Контакты</a></li>
</ul>
</nav>Здесь role="navigation" избыточен, потому что <nav> уже имеет семантическое значение навигации.
Примеры использования role
role="alert"Назначение: Используется для сообщений, которые должны быть немедленно доведены до сведения пользователя (например, ошибки, предупреждения).
Когда применять: Когда информация критически важна и требует немедленного внимания пользователя.
<div role="alert" class="alert alert-danger"> <strong>Ошибка!</strong> Пожалуйста, проверьте введенные данные. </div>
Объяснение: Этот элемент будет озвучен скринридером сразу после появления на странице.
role="alertdialog"Назначение: Используется для диалоговых окон, которые требуют немедленного внимания пользователя (например, подтверждение удаления).
Когда применять: Когда нужно прервать пользователя для подтверждения действия.
<div role="alertdialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription"> <h2 id="dialogTitle">Подтверждение</h2> <p id="dialogDescription">Вы уверены, что хотите удалить этот элемент?</p> <button>Да</button> <button>Нет</button> </div>
Объяснение: Скринридеры озвучат заголовок и описание диалога, чтобы пользователь понял, что от него требуется.
role="application"Назначение: Используется для областей, которые ведут себя как приложение (например, сложные веб-приложения).
Когда применять: Когда область страницы требует особого поведения, отличного от стандартного документа.
<div role="application"> <h1>Мое веб-приложение</h1> <button>Сохранить</button> </div>
Объяснение: Скринридеры переключатся в режим приложения, чтобы пользователь мог взаимодействовать с элементами, как с нативным приложением.
role="article"Назначение: Используется для независимых частей контента (например, статьи, посты в блоге).
Когда применять: Когда контент может быть использован независимо от остальной части страницы.
<article role="article"> <h2>Заголовок статьи</h2> <p>Текст статьи...</p> </article>
Объяснение: Скринридеры могут озвучить статью как отдельный блок контента.
role="button"
Назначение: Используется для элементов, которые ведут себя как кнопки (например, <div> или <span>).
Когда применять: Когда элемент должен быть кликабельным, но не является нативной кнопкой (<button>).
<div role="button" tabindex="0" onclick="alert('Кнопка нажата!')">
Нажми меня
</div>
Объяснение: Элемент будет озвучен как кнопка, и его можно будет активировать с клавиатуры.
role="checkbox"Назначение: Используется для элементов, которые ведут себя как чекбоксы.
Когда применять: Когда нужно создать кастомный чекбокс.
<div role="checkbox" aria-checked="false" tabindex="0"> Согласен с условиями </div>
Объяснение: Элемент будет озвучен как чекбокс, и его состояние можно будет изменить с клавиатуры.
role="dialog"Назначение: Используется для диалоговых окон.
Когда применять: Когда нужно отобразить модальное окно.
<div role="dialog" aria-labelledby="dialogTitle"> <h2 id="dialogTitle">Диалоговое окно</h2> <p>Это пример диалогового окна.</p> <button>Закрыть</button> </div>
Объяснение: Скринридеры озвучат заголовок и описание диалога.
role="directory"Назначение: Используется для списка ссылок, которые представляют собой группу (например, оглавление).
Когда применять: Когда нужно создать список ссылок, которые относятся к одной группе.
<div role="directory"> <ul> <li><a href="#chapter1">Глава 1</a></li> <li><a href="#chapter2">Глава 2</a></li> </ul> </div>
Объяснение: Скринридеры озвучат этот элемент как список ссылок, относящихся к одной группе.
role="document"Назначение: Используется для областей, которые содержат контент документа (например, статьи, текстовые блоки).
Когда применять: Когда нужно указать, что область содержит контент, который следует читать как документ.
<div role="document"> <h1>Заголовок документа</h1> <p>Текст документа...</p> </div>
Объяснение: Скринридеры будут читать этот контент как обычный текст документа.
role="form"Назначение: Используется для обозначения области, которая содержит элементы формы.
Когда применять: Когда нужно указать, что группа элементов является формой.
<div role="form"> <label for="name">Имя:</label> <input type="text" id="name"> <button type="submit">Отправить</button> </div>
Объяснение: Скринридеры озвучат эту область как форму.
role="grid"Назначение: Используется для табличных данных, которые представлены в виде сетки.
Когда применять: Когда нужно создать интерактивную таблицу.
<div role="grid"> <div role="row"> <div role="columnheader">Имя</div> <div role="columnheader">Возраст</div> </div> <div role="row"> <div role="gridcell">Иван</div> <div role="gridcell">25</div> </div> </div>
Объяснение: Скринридеры будут озвучивать эту сетку как таблицу.
role="gridcell"
Назначение: Используется для ячеек в сетке (role="grid").
Когда применять: Когда нужно указать, что элемент является ячейкой в сетке.
<div role="gridcell">Данные ячейки</div>
Объяснение: Скринридеры будут озвучивать этот элемент как ячейку таблицы.
role="group"Назначение: Используется для группировки элементов, которые не являются частью основного контента.
Когда применять: Когда нужно сгруппировать элементы, например, кнопки или поля ввода.
<div role="group" aria-labelledby="groupLabel"> <span id="groupLabel">Группа кнопок</span> <button>Кнопка 1</button> <button>Кнопка 2</button> </div>
Объяснение: Скринридеры озвучат эту группу как связанные элементы.
role="heading"Назначение: Используется для обозначения заголовков.
Когда применять: Когда нужно создать заголовок, но нельзя использовать нативные теги (<h1>-<h6>).
<div role="heading" aria-level="1">Заголовок</div>
Объяснение: Скринридеры озвучат этот элемент как заголовок уровня 1.
role="img"Назначение: Используется для элементов, которые представляют собой изображение.
Когда применять: Когда нужно указать, что элемент является изображением.
<div role="img" aria-label="Описание изображения"> <!-- Содержимое изображения --> </div>
Объяснение: Скринридеры озвучат этот элемент как изображение с описанием.
role="link"Назначение: Используется для элементов, которые ведут себя как ссылки.
Когда применять: Когда элемент должен быть кликабельным и вести на другую страницу или ресурс, но не является нативной ссылкой (<a>).
<div role="link" tabindex="0" onclick="window.location.href='https://example.com'"> Перейти на example.com </div>
Объяснение: Элемент будет озвучен как ссылка, и его можно будет активировать с клавиатуры.
role="list"Назначение: Используется для создания списка элементов.
Когда применять: Когда нужно создать список, но нельзя использовать нативные теги (<ul> или <ol>).
<div role="list"> <div role="listitem">Элемент 1</div> <div role="listitem">Элемент 2</div> </div>
Объяснение: Скринридеры озвучат этот элемент как список.
role="listbox"Назначение: Используется для виджетов, которые позволяют пользователю выбрать один или несколько элементов из списка.
Когда применять: Когда нужно создать выпадающий список или список с выбором.
<div role="listbox" aria-labelledby="listboxLabel"> <span id="listboxLabel">Выберите вариант:</span> <div role="option">Вариант 1</div> <div role="option">Вариант 2</div> </div>
Объяснение: Скринридеры озвучат этот элемент как список с возможностью выбора.
role="listitem"Назначение: Используется для элементов списка.
Когда применять: Когда нужно указать, что элемент является частью списка.
<div role="listitem">Элемент списка</div>
Объяснение: Скринридеры озвучат этот элемент как элемент списка.
role="log"Назначение: Используется для областей, где новая информация добавляется в осмысленном порядке (например, журнал событий).
Когда применять: Когда нужно отображать динамически обновляемый контент, например, логи или уведомления.
<div role="log" aria-live="polite"> <div>Новое событие: Пользователь вошел в систему.</div> <div>Новое событие: Пользователь вышел из системы.</div> </div>
Объяснение: Скринридеры будут озвучивать новые записи по мере их появления.
role="marquee"Назначение: Используется для областей, где информация часто меняется (например, бегущая строка).
Когда применять: Когда нужно отображать динамически изменяющийся контент, например, новости или рекламу.
<div role="marquee" aria-live="polite"> Акция: Скидка 50% на все товары! </div>
Объяснение: Скринридеры будут озвучивать изменения в этом элементе.
role="math"Назначение: Используется для математических выражений.
Когда применять: Когда нужно отобразить математическую формулу.
<div role="math" aria-label="Формула квадратного уравнения"> ax² + bx + c = 0 </div>
Объяснение: Скринридеры озвучат этот элемент как математическое выражение.
role="menu"Назначение: Используется для создания меню.
Когда применять: Когда нужно создать выпадающее меню или контекстное меню.
<div role="menu"> <div role="menuitem">Пункт 1</div> <div role="menuitem">Пункт 2</div> </div>
Объяснение: Скринридеры озвучат этот элемент как меню с пунктами.
role="menubar"Назначение: Используется для создания горизонтального меню.
Когда применять: Когда нужно создать горизонтальное меню, например, в верхней части страницы.
<div role="menubar"> <div role="menuitem">Файл</div> <div role="menuitem">Правка</div> <div role="menuitem">Вид</div> </div>
Объяснение: Скринридеры озвучат этот элемент как горизонтальное меню.
role="menuitem"Назначение: Используется для элементов меню.
Когда применять: Когда нужно указать, что элемент является пунктом меню.
<div role="menuitem">Пункт меню</div>
Объяснение: Скринридеры озвучат этот элемент как пункт меню.
role="menuitemcheckbox"Назначение: Используется для элементов меню, которые ведут себя как чекбоксы.
Когда применять: Когда нужно создать пункт меню, который можно включать и выключать.
<div role="menuitemcheckbox" aria-checked="false">Пункт меню</div>
Объяснение: Скринридеры озвучат этот элемент как пункт меню с возможностью переключения.
role="menuitemradio"Назначение: Используется для элементов меню, которые ведут себя как радиокнопки.
Когда применять: Когда нужно создать пункт меню, который можно выбрать из группы.
<div role="menuitemradio" aria-checked="false">Пункт меню</div>
Объяснение: Скринридеры озвучат этот элемент как пункт меню с возможностью выбора.
role="option"Назначение: Используется для элементов, которые являются опциями в списке.
Когда применять: Когда нужно указать, что элемент является опцией в списке выбора.
<div role="option">Опция 1</div>
Объяснение: Скринридеры озвучат этот элемент как опцию в списке.
role="presentation"Назначение: Используется для элементов, которые не имеют семантического значения.
Когда применять: Когда нужно скрыть элемент от скринридеров, но оставить его видимым на странице.
<div role="presentation"> Этот элемент не будет озвучен скринридером. </div>
Объяснение: Скринридеры проигнорируют этот элемент.
role="progressbar"Назначение: Используется для отображения прогресса выполнения задачи.
Когда применять: Когда нужно показать прогресс выполнения задачи, например, загрузки файла.
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> Загрузка: 50% </div>
Объяснение: Скринридеры озвучат текущее значение прогресса.
role="radio"Назначение: Используется для элементов, которые ведут себя как радиокнопки.
Когда применять: Когда нужно создать кастомную радиокнопку.
<div role="radio" aria-checked="false">Опция 1</div>
Объяснение: Скринридеры озвучат этот элемент как радиокнопку.
role="radiogroup"Назначение: Используется для группировки радиокнопок.
Когда применять: Когда нужно создать группу радиокнопок.
<div role="radiogroup"> <div role="radio" aria-checked="false">Опция 1</div> <div role="radio" aria-checked="false">Опция 2</div> </div>
Объяснение: Скринридеры озвучат этот элемент как группу радиокнопок.
role="region"Назначение: Используется для обозначения значимой области страницы.
Когда применять: Когда нужно выделить область страницы, которая имеет важное значение (например, блок с новостями).
<div role="region" aria-labelledby="regionLabel"> <h2 id="regionLabel">Новости</h2> <p>Сегодня произошло важное событие...</p> </div>
Объяснение: Скринридеры озвучат эту область как значимую часть страницы.
role="row"Назначение: Используется для строк в таблицах или сетках.
Когда применять: Когда нужно создать строку в таблице или сетке.
<div role="row"> <div role="gridcell">Ячейка 1</div> <div role="gridcell">Ячейка 2</div> </div>
Объяснение: Скринридеры озвучат этот элемент как строку таблицы.
role="rowgroup"Назначение: Используется для группировки строк в таблицах или сетках.
Когда применять: Когда нужно сгруппировать строки в таблице.
<div role="rowgroup"> <div role="row"> <div role="gridcell">Ячейка 1</div> <div role="gridcell">Ячейка 2</div> </div> <div role="row"> <div role="gridcell">Ячейка 3</div> <div role="gridcell">Ячейка 4</div> </div> </div>
Объяснение: Скринридеры озвучат этот элемент как группу строк таблицы.
role="rowheader"Назначение: Используется для заголовков строк в таблицах или сетках.
Когда применять: Когда нужно указать, что элемент является заголовком строки.
<div role="rowheader">Заголовок строки</div>
Объяснение: Скринридеры озвучат этот элемент как заголовок строки.
role="scrollbar"Назначение: Используется для создания кастомных полос прокрутки.
Когда применять: Когда нужно создать полосу прокрутки, которая не является нативной.
<div role="scrollbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> Полоса прокрутки </div>
Объяснение: Скринридеры озвучат этот элемент как полосу прокрутки.
role="search"Назначение: Используется для обозначения области поиска.
Когда применять: Когда нужно создать область поиска на странице.
<div role="search"> <input type="text" placeholder="Поиск..."> <button>Найти</button> </div>
Объяснение: Скринридеры озвучат эту область как область поиска.
role="separator"Назначение: Используется для разделения контента.
Когда применять: Когда нужно визуально разделить элементы на странице.
<div role="separator"></div>
Объяснение: Скринридеры озвучат этот элемент как разделитель.
role="slider"Назначение: Используется для создания ползунков.
Когда применять: Когда нужно создать элемент, который можно перемещать (например, регулятор громкости).
<div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> Ползунок </div>
Объяснение: Скринридеры озвучат этот элемент как ползунок.
role="spinbutton"Назначение: Используется для создания элементов, которые позволяют пользователю выбирать значение из диапазона (например, числовые поля).
Когда применять: Когда нужно создать элемент для выбора числового значения.
<div role="spinbutton" aria-valuenow="5" aria-valuemin="1" aria-valuemax="10"> Значение: 5 </div>
Объяснение: Скринридеры озвучат этот элемент как элемент для выбора числового значения.
role="status"Назначение: Используется для отображения статуса (например, уведомлений).
Когда применять: Когда нужно отобразить статус операции (например, "Файл сохранен").
<div role="status"> Файл успешно сохранен. </div>
Объяснение: Скринридеры озвучат этот элемент как статусное сообщение.
role="tab"Назначение: Используется для создания вкладок.
Когда применять: Когда нужно создать элемент вкладки в интерфейсе с табами.
<div role="tablist"> <div role="tab" aria-selected="true">Вкладка 1</div> <div role="tab" aria-selected="false">Вкладка 2</div> </div>
Объяснение: Скринридеры озвучат этот элемент как вкладку.
role="tablist"Назначение: Используется для создания списка вкладок.
Когда применять: Когда нужно создать группу вкладок.
<div role="tablist"> <div role="tab" aria-selected="true">Вкладка 1</div> <div role="tab" aria-selected="false">Вкладка 2</div> </div>
Объяснение: Скринридеры озвучат этот элемент как список вкладок.
role="tabpanel"Назначение: Используется для создания панелей вкладок.
Когда применять: Когда нужно создать контент, который будет отображаться при выборе вкладки.
<div role="tabpanel"> <p>Контент вкладки 1</p> </div>
Объяснение: Скринридеры озвучат этот элемент как панель вкладки.
role="textbox"Назначение: Используется для создания текстовых полей.
Когда применять: Когда нужно создать элемент, который ведет себя как текстовое поле.
<div role="textbox" contenteditable="true"> Введите текст здесь... </div>
Объяснение: Скринридеры озвучат этот элемент как текстовое поле.
role="timer"Назначение: Используется для отображения таймера.
Когда применять: Когда нужно отобразить отсчет времени (например, таймер обратного отсчета).
<div role="timer" aria-live="polite"> Осталось: 5 минут </div>
Объяснение: Скринридеры будут озвучивать изменения в этом элементе.
role="toolbar"Назначение: Используется для создания панели инструментов.
Когда применять: Когда нужно создать группу кнопок или других элементов управления.
<div role="toolbar"> <button>Кнопка 1</button> <button>Кнопка 2</button> </div>
Объяснение: Скринридеры озвучат этот элемент как панель инструментов.
role="tooltip"Назначение: Используется для создания всплывающих подсказок.
Когда применять: Когда нужно отобразить дополнительную информацию при наведении на элемент.
<div role="tooltip"> Это всплывающая подсказка. </div>
Объяснение: Скринридеры озвучат этот элемент как всплывающую подсказку.
role="tree"Назначение: Используется для создания древовидных структур.
Когда применять: Когда нужно создать иерархический список (например, дерево файлов).
<div role="tree"> <div role="treeitem">Папка 1</div> <div role="treeitem">Папка 2</div> </div>
Объяснение: Скринридеры озвучат этот элемент как древовидную структуру.
role="treegrid"Назначение: Используется для создания древовидных таблиц.
Когда применять: Когда нужно создать таблицу с возможностью раскрытия и сворачивания строк.
<div role="treegrid"> <div role="row"> <div role="gridcell">Элемент 1</div> </div> <div role="row"> <div role="gridcell">Элемент 2</div> </div> </div>
Объяснение: Скринридеры озвучат этот элемент как древовидную таблицу.
role="treeitem"Назначение: Используется для создания элементов древовидной структуры.
Когда применять: Когда нужно создать элемент в древовидной структуре.
<div role="treeitem">Элемент дерева</div>
Объяснение: Скринридеры озвучат этот элемент как элемент древовидной структуры.
role="none"Назначение: Используется для элементов, которые не должны иметь семантической роли.
Когда применять: Когда нужно скрыть элемент от скринридеров, но оставить его видимым на странице.
<div role="none"> Этот элемент не будет озвучен скринридером. </div>
Объяснение: Скринридеры проигнорируют этот элемент.
role="note"Назначение: Используется для создания заметок или дополнительной информации.
Когда применять: Когда нужно добавить пояснение или примечание к контенту.
<div role="note"> Это примечание к основному контенту. </div>
Объяснение: Скринридеры озвучат этот элемент как примечание.
role="definition"Назначение: Используется для определения терминов.
Когда применять: Когда нужно указать, что элемент содержит определение термина.
<div role="definition"> HTML — это язык разметки для создания веб-страниц. </div>
Объяснение: Скринридеры озвучат этот элемент как определение.
role="term"Назначение: Используется для обозначения термина, который будет определен.
Когда применять: Когда нужно указать, что элемент является термином.
<div role="term">HTML</div>
Объяснение: Скринридеры озвучат этот элемент как термин.
role="figure"Назначение: Используется для обозначения иллюстраций, диаграмм или других графических элементов.
Когда применять: Когда нужно указать, что элемент является иллюстрацией.
<div role="figure" aria-labelledby="figureLabel"> <img src="image.jpg" alt="Пример изображения"> <span id="figureLabel">Рисунок 1: Пример изображения</span> </div>
Объяснение: Скринридеры озвучат этот элемент как иллюстрацию.
role="contentinfo"Назначение: Используется для обозначения информации о содержимом страницы (например, футер).
Когда применять: Когда нужно указать, что элемент содержит информацию о странице (например, авторские права).
<footer role="contentinfo"> <p>© 2025 Моя компания. Все права защищены.</p> </footer>
Объяснение: Скринридеры озвучат этот элемент как информацию о содержимом страницы.
role="banner"Назначение: Используется для обозначения баннера или заголовка страницы.
Когда применять: Когда нужно указать, что элемент является заголовком страницы.
<header role="banner"> <h1>Заголовок страницы</h1> </header>
Объяснение: Скринридеры озвучат этот элемент как заголовок страницы.
role="complementary"Назначение: Используется для обозначения дополнительного контента, который дополняет основной контент.
Когда применять: Когда нужно указать, что элемент содержит дополнительную информацию.
<aside role="complementary"> <p>Дополнительная информация...</p> </aside>
Объяснение: Скринридеры озвучат этот элемент как дополнительный контент.
role="main"Назначение: Используется для обозначения основного контента страницы.
Когда применять: Когда нужно указать, что элемент содержит основной контент страницы.
<main role="main"> <h1>Основной контент</h1> <p>Текст основного контента...</p> </main>
Объяснение: Скринридеры озвучат этот элемент как основной контент страницы.
role="search"Назначение: Используется для обозначения области поиска.
Когда применять: Когда нужно создать область поиска на странице.
<div role="search"> <input type="text" placeholder="Поиск..."> <button>Найти</button> </div>
Объяснение: Скринридеры озвучат эту область как область поиска.
