Кратко
СкопированоСостояние виджета из 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 используют для элементов, которые находятся внутри сложных интерактивных виджетов. Например, для вкладки из панели вкладок или для пункта выпадающего списка.