Продолжаю рассказывать про роли-контейнеры. На очереди
group. Эта роль предназначена для группировки объектов пользовательского интерфейса, которые не должны попадать в список содержимого. Давайте разбираться.Что за объекты пользовательского интерфейса? Это любые элементы, будь то интерактивные или неинтерактивные. Это отличает
group, например, от рассмотреных ранее menu, menubar и toolbar, которые предназначены для интерактивных элементов.Группируемые при помощи
group элементы не попадают в список содержимого. Речь о функции в скринридерах, которая позволяет открыть окно со списком всех ссылок, кнопок, списков, заголовков и ориентиров. Это отличает group от region, который попадает в список ориентиров, если для него задано имя.group не подразумевает никакую клавиатурную навигацию, а служит только для группировки частей интерфейса. Добавить клавиатурную навигацию можно, однако об этом нужно предупредить пользователей, которые не ожидают от group такого поведения. Для group также нужно задавать имя при помощи aria-label или aria-labelledby.Группировать при помощи
group можно не только произвольный набор элементов на странице, но и элементы внутри некоторых виджетов. Так, внутри menu и menubar можно группировать menuitem, menuitemcheckbox и menuitemradio. В combobox и listbox можно группировать option. А в tree можно группировать treeitem.В HTML есть встроенные элементы с ролью
group. Элемент <fieldset> представляет group. Если внутри есть <legend>, то его текст будет использован как имя для <fieldset>. Элементы <hgroup>, <address>, <details> и <optgroup> также представляют group в дереве доступности, поэтому вручную задавать роль group им не рекомендуется.Где применять на практике? В первую очередь стоит использовать встроенные элементы HTML вместо ARIA-ролей. Если встроенные элементы не подходят, тогда можно указать роль
group на семантически нейтральных элементах <div> или <span>:<div role="group" aria-label="Галерея">
<img src="img1.jpg" alt="Описание...">
<img src="img2.jpg" alt="Описание...">
<img src="img3.jpg" alt="Описание...">
</div>
Варианты использования:
- группировка связанных полей (
<fieldset> + <legend>)- группировка контактных данных (
<address>)- группировка заголовка и подзаголовка (
<hgroup> + <h*> + <p>)- группировка второстепеного, менее актуального или скрываемого контента (
<details> + <summary>)- группировка опций (
<select> или <datalist> + <optgroup> + <option>)- группировка
menuitem, menuitemradio и menuitemcheckbox в menu и menubar- группировка
option в listbox и combobox- группировка
treeitem в tree- группировка любых других связанных элементов интерфейса (
<div> или <span> + role="group")Спецификация роли group.