aria-selected

ARIA-атрибут, который нужен для вкладок, пунктов выпадающих списков, строк таблиц и ячеек сеток.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

Состояние виджета из 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-selected с одним из значений:

  • true — элемент выбран.
  • false — элемент пока не выбран.
  • undefined (по умолчанию) — элемент не выбирается.

Атрибут можно использовать только для некоторых ролей:

  • option.
  • tab.
  • row.
  • gridcell.

Атрибут указывает на выбор одного или нескольких элементов. Когда можно выбрать несколько элементов, используйте для их контейнера атрибут aria-multiselectable.

Как понять

Секция статьи "Как понять"

Обычно aria-selected используют для элементов, которые находятся внутри сложных интерактивных виджетов. Например, для вкладки из панели вкладок или для пункта выпадающего списка.