Кратко
СкопированоСвойство виджета из WAI-ARIA. Означает, что пользователь может выбрать несколько элементов.
В HTML точно так же работает атрибут multiple
.
Пример
Скопировано<p id="hint">Выберите пару любимых цветов.</p><ul role="listbox" aria-labelledby="hint" tabindex="0" aria-multiselectable="true"> <li role="option" id="green" aria-selected="false">Зелёный</li> <li role="option" id="blue" aria-selected="true">Синий</li> <li role="option" id="yellow" aria-selected="true">Жёлтый</li></ul>
<p id="hint">Выберите пару любимых цветов.</p> <ul role="listbox" aria-labelledby="hint" tabindex="0" aria-multiselectable="true" > <li role="option" id="green" aria-selected="false">Зелёный</li> <li role="option" id="blue" aria-selected="true">Синий</li> <li role="option" id="yellow" aria-selected="true">Жёлтый</li> </ul>
Как пишется
СкопированоДобавьте к тегу атрибут с одним из значений:
true
— можно выбрать несколько элементов.false
(по умолчанию) — можно выбрать что-то одно.
Атрибут можно использовать только для некоторых ролей:
aria
пригодится, если решили написать свой выпадающий список или создаёте сложный элемент вроде древовидного списка, сетки или панели вкладок.
Не забудьте добавить aria
с нужным значением для элементов внутри контейнера с aria
, которые могут выбрать пользователя.
Для <select>
лучше использовать multiple
.
Как понять
Скопированоaria
нужен для родительского элемента, внутри которого есть несколько дочерних на выбор. Например, как у выпадающего или древовидного списков.