tablist

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

Около реда (или колоната) от елементи role="tab" в интерфейс с раздели. Tablist задължително трябва да има достъпно наименование чрез aria-label или aria-labelledby — без него потребителят на екранен четец, чул „списък с раздели”, не може да разбере кой от разделите на страницата се имат предвид.

Вертикалните ленти с раздели изискват aria-orientation="vertical". По подразбиране стойността е хоризонтална, така че атрибутът може да се пропусне за хоризонтални раздели.

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

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

Съгласно шаблона APG за раздели:

• Tab премества фокуса в tablist и върху избрания раздел; следващото натискане на Tab премества фокуса НАВЪН (обикновено в активния tabpanel).
• Стрелките Ляво/Дясно преместват фокуса между разделите (Горе/Долу за вертикален tablist). Прелистването е незадължително, но е прието.
• Home / End прескачат до първия / последния раздел.
• Активиране: в режим automatic стрелките едновременно преместват фокуса И избират раздела. В режим manual (препоръчан при скъпо активиране), Space или Enter избират раздела с фокус.

Самият tablist не управлява фокуса — фокусът се поставя върху раздела, а не върху контейнера на tablist.

Чести грешки

• Tablist без достъпно наименование. Множество tablist на една страница стават неразличими.
• Всички раздели имат tabindex="0". Шаблонът изисква единична точка за спиране; само избраният раздел има tabindex="0".
• Липсващо aria-orientation="vertical" при вертикален tablist — екранният четец инструктира потребителите да използват Ляво/Дясно, когато визуалното оформление изисква Горе/Долу.
• role="tablist" обвива връзки (<a href="#section">) вместо бутони. Anchor scroll-to прескача страницата и нарушава работата на бутона за назад.
• Tabpanel скрит едновременно с display: none И атрибута hidden, когато е достатъчно едното.

Пример

<div role="tablist" aria-label="Project sections" aria-orientation="horizontal">
  <button role="tab" id="t-overview" aria-selected="true"  aria-controls="p-overview" tabindex="0">Overview</button>
  <button role="tab" id="t-files"    aria-selected="false" aria-controls="p-files"    tabindex="-1">Files</button>
  <button role="tab" id="t-team"     aria-selected="false" aria-controls="p-team"     tabindex="-1">Team</button>
</div>