aria-activedescendant

Кога да се използва

В композитен уиджет, при който се желае единична точка за Tab, но потребителят трябва да може да движи маркировката между множество елементи — комбобокс с listbox popup, listbox с единична Tab-спирка, treegrid, datagrid. DOM фокусът остава върху контейнерния елемент (полето за въвеждане, listbox-а, grid-а). При натискане на клавиши-стрелки aria-activedescendant се актуализира с ID на новоактивирания дъщерен елемент, а помощните технологии го обявяват така, сякаш фокусът действително е преминал към него.

Алтернативният подход е roving tabindex: реалното преместване на DOM фокуса с коригиране на стойностите на tabindex. Изберете aria-activedescendant, когато задържането на фокуса на браузъра върху контейнера опростява кода — обикновено защото в контейнера потребителят въвежда текст или са прикрепени клавишни комбинации.

Как работи

Стойността е единичен ID на елемент — никога списък. Реферираният елемент трябва да е потомък на контейнера, в който е зададен атрибутът aria-activedescendant (или да е собственост чрез aria-owns). При промяна на стойността „виртуалният фокус” в дървото за достъпност се премества към съответния елемент и помощните технологии обявяват неговото означение, роля и състояние.

Два аспекта остават изцяло в отговорност на разработчика:

• Визуален стил. Помощните технологии знаят къде е виртуалният фокус, но браузърът не изрисува пръстен на фокуса върху потомъка. Необходимо е да се добави собствена CSS маркировка, синхронизирана чрез превключване на клас.
• Превъртане. Ако активният потомък е извън видимата област, той трябва да бъде изведен в нея програмно — браузърът не прави това автоматично.

Когато попапът се затвори или уиджетът загуби фокус, aria-activedescendant трябва да се изчисти до празен низ или атрибутът да се премахне.

Чести грешки

• Посочване на ID, което не е потомък на контейнера и не е собственост чрез aria-owns. Помощните технологии игнорират такава референция.
• Смесване на подходи: задаване на tabindex="0" на потомъка и едновременно aria-activedescendant на контейнера. Трябва да се избере само една стратегия за фокус; двете в комбинация си противоречат.
• Пропуск при актуализиране на визуалната маркировка при промяна на атрибута — потребителите с добро зрение не виждат движение, докато потребителите на помощни технологии чуват преместването.
• Оставяне на остаряло ID след премахване на опцията от списъка (например при филтриране на резултати в combobox).
• Актуализиране на aria-activedescendant при преминаване на мишката. Атрибутът трябва да проследява само активния елемент, управляван с клавиатура.
• Задаване на атрибута на елемент, в чието дърво за достъпност потомъкът не е включен (пропуснат aria-owns за портален списък).

Пример

<label for="fruit">Плод</label>
<input
  id="fruit"
  role="combobox"
  type="text"
  aria-controls="fruit-listbox"
  aria-expanded="true"
  aria-activedescendant="fruit-2"
  autocomplete="off"
>
<ul id="fruit-listbox" role="listbox">
  <li id="fruit-1" role="option">Apple</li>
  <li id="fruit-2" role="option" class="is-active">Banana</li>
  <li id="fruit-3" role="option">Cherry</li>
</ul>