Свойство Връзка

`aria-controls`

Назовава елемента или елементите, чието присъствие или съдържание този контрол управлява. Типични двойки: таб контролира tabpanel, бутон за разкриване контролира разкрит регион. Поддръжката при помощните технологии е неравномерна — използвайте рядко.

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

Върху контрол, чието активиране променя различен елемент на страницата — каноничните примери са връзката таб → tabpanel и бутон за разкриване → разкрит панел. Атрибутът казва на помощните технологии, че „работата с този уиджет ще засегне онзи там”, като дава на напредналите потребители начин да прескочат от контрола до управлявания елемент.

Не посягайте към него при всяко взаимодействие. Повечето click handlers не се нуждаят от aria-controls; запазете го за случаите, когато управляваният елемент е наистина отделен в DOM и потребителят се облагодетелства от познаването на връзката.

Как се държи

Стойността е разделен с интервал списък от идентификатори на елементи за управлявания елемент или елементи. Управляваният елемент трябва да съществува в DOM в момента на запитването на връзката — ако tabpanel се монтира едва при активиране на таба, препратката „виси” за потребителите с помощни технологии докато панелът не се появи.

Поддръжката е слабото място. JAWS предлага пряк път „отиди към управлявания елемент”, но VoiceOver и NVDA до голяма степен игнорират атрибута извън специфични модели (табове, combobox-и). Това означава, че aria-controls рядко е нещото, което прави дадена функционалност достъпна — той е подобрение върху правилните роли, управлението на фокуса и aria-expanded. Изградете модела правилно на първо място; добавете aria-controls накрая.

Чести грешки

Третиране на aria-controls като заместител на преместването на фокуса. Бутон „Прескочи към резултатите” трябва да премести фокуса при активиране; добавянето на aria-controls не прави това.
Посочване на елемент, който все още не е в DOM. Препратката не се разрешава докато панелът не се изобрази.
Забравяне да се зададе aria-expanded на бутон за разкриване. aria-controls казва „влияя на онова нещо”; aria-expanded казва „и в момента е отворено / затворено”.
Използване на aria-controls върху персонализиран select, сочещ към списък с опции — правилният модел там е role="combobox" плюс aria-controls върху input-а, с aria-activedescendant за маркираната опция.
Поставяне на aria-controls върху всеки бутон „за пълнота”. Шум; нищо не разчита на него.

Пример

<button
  type="button"
  aria-expanded="false"
  aria-controls="faq-1-answer"
>
  What is your refund policy?
</button>
<div id="faq-1-answer" hidden>
  Refunds are processed within 14 days …
</div>