tabpanel

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

Върху контейнера, съдържащ съдържанието на таб. Свързвайте всеки tabpanel с неговия таб чрез aria-labelledby (сочещ към идентификатора на таба). Табът от своя страна сочи към панела чрез aria-controls. Скривайте неактивните панели с атрибута hidden — не само с display: none чрез CSS — така дървото за достъпност отразява визуалното състояние.

Ако панелът съдържа интерактивно съдържание (форма, списък с връзки), можете да го направите фокусируем с tabindex="0". По този начин, след активиране на таб, следващото натискане на Tab поставя фокуса вътре в панела.

Ако панелът съдържа единична фокусируема област — например голяма заглавка, последвана от съдържание — tabindex="0" върху панела е достатъчно. Ако панелът е пълен с фокусируеми контроли, потребителят ще стига до тях директно с Tab и tabindex е незадължителен.

Чести грешки

• Tabpanel скрит чрез CSS, но не чрез атрибута hidden. Екранните четци може все още да излагат съдържанието му.
• Tabpanel без aria-labelledby — обявява се само като „tab panel” без наименование.
• Табът сочи към идентификатора на tabpanel чрез aria-controls, но панелът не сочи обратно чрез aria-labelledby. Сдвояването трябва да е взаимно.
• Всички tabpanel присъстват в DOM с динамично превключван display: none, но без атрибут hidden. Одиторите отбелязват непоследователността.
• Поставяне на role="tabpanel" върху панел, който НЕ е свързан с role="tab" — осиротял tabpanel.

Пример

<div role="tablist" aria-label="Settings">
  <button role="tab" id="t-account" aria-selected="true"  aria-controls="p-account" tabindex="0">Account</button>
  <button role="tab" id="t-billing" aria-selected="false" aria-controls="p-billing" tabindex="-1">Billing</button>
</div>

<section role="tabpanel" id="p-account" aria-labelledby="t-account" tabindex="0">
  <h2>Account</h2>
  <p>…</p>
</section>
<section role="tabpanel" id="p-billing" aria-labelledby="t-billing" tabindex="0" hidden>
  <h2>Billing</h2>
  <p>…</p>
</section>