tab

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

За един таб в хоризонтално или вертикално наредена лента с табове. Табът ТРЯБВА да е пряк дъщерен елемент на role="tablist" (или да е обхванат чрез aria-owns). Всеки таб ТРЯБВА да сочи към асоциирания си панел с aria-controls="<tabpanel-id>". Реципрочният aria-labelledby се поставя на панела и сочи обратно към таба.

Таб шаблонът е приложен шаблон. Ако „табовете” всъщност са навигация между отделни страници, използвайте <nav> с <a> връзки — промяната на URL прави таб шаблона неподходящ.

Самият таб обикновено е <button>. Семантиката на бутона се съчетава добре с role="tab", а обработката на фокуса и активирането се получава безплатно.

Договор за клавиатура и фокус

Съгласно APG шаблона за табове:

• Tab премества фокуса в tablist — върху активния таб. Tab премества фокуса ИЗВЪН към следващия фокусируем елемент (обикновено в tabpanel, ако има tabindex="0").
• Клавишите Наляво/Надясно (или Нагоре/Надолу при вертикални tablists) преместват фокуса между табовете.
• Home / End прескачат към първия / последния таб.
• Активирането може да е автоматично (фокус = избор) или ръчно (Space/Enter за избор). Изберете ръчно, когато активирането на таб задейства ресурсоемка операция.

Използвайте роуминг tabindex: само избраният таб има tabindex="0".

Чести грешки

• Всички табове с tabindex="0" — Tab обхожда всеки таб вместо панела.
• Липсващ aria-controls, свързващ таба с tabpanel.
• aria-selected="true" на повече от един таб.
• Табове, реализирани с <a href="#section"> — URL фрагментът се променя, бутонът „назад” вече навигира между табове и шаблонът се разпада.
• Липса на управление на фокуса при активиране: кликването върху таб актуализира панела, но следващото натискане на Tab връща фокуса в заглавието на страницата вместо в панела.

Пример

<div role="tablist" aria-label="Account settings">
  <button role="tab" id="t-profile"  aria-selected="true"  aria-controls="p-profile"  tabindex="0">Profile</button>
  <button role="tab" id="t-billing"  aria-selected="false" aria-controls="p-billing"  tabindex="-1">Billing</button>
  <button role="tab" id="t-security" aria-selected="false" aria-controls="p-security" tabindex="-1">Security</button>
</div>
<section role="tabpanel" id="p-profile"  aria-labelledby="t-profile"  tabindex="0">…</section>
<section role="tabpanel" id="p-billing"  aria-labelledby="t-billing"  hidden>…</section>
<section role="tabpanel" id="p-security" aria-labelledby="t-security" hidden>…</section>