Кратко
СкопированоСостояние виджета из WAI-ARIA. Означает, что элемент выбран. Это может быть пункт выпадающего списка, вкладка, интерактивные строки таблицы или ячейки сетки.
Пример
Скопировано<div class="tab-interface"> <div role="tablist" aria-label="Панель вкладок"> <span role="tab" aria-controls="panel-1" id="tab-1" tabindex="0" aria-selected="true" > Ёжики </span> </div> <div role="tabpanel"aria-labelledby="tab-1" id="panel-1" tabindex="0"> <p>Ёжики любят купаться и есть червяков.</p> </div></div>
<div class="tab-interface"> <div role="tablist" aria-label="Панель вкладок"> <span role="tab" aria-controls="panel-1" id="tab-1" tabindex="0" aria-selected="true" > Ёжики </span> </div> <div role="tabpanel"aria-labelledby="tab-1" id="panel-1" tabindex="0"> <p>Ёжики любят купаться и есть червяков.</p> </div> </div>
Как пишется
СкопированоДобавьте к тегу атрибут aria
с одним из значений:
true
— элемент выбран.false
— элемент пока не выбран.undefined
(по умолчанию) — элемент не выбирается.
Атрибут можно использовать только для некоторых ролей:
Атрибут указывает на выбор одного или нескольких элементов. Когда можно выбрать несколько элементов, используйте для их контейнера атрибут aria
.
Как понять
СкопированоОбычно aria
используют для элементов, которые находятся внутри сложных интерактивных виджетов. Например, для вкладки из панели вкладок или для пункта выпадающего списка.