O padrão de abas: tablist, tab, tabpanel
Associe os três papéis necessários para um conjunto de abas.
O padrão de abas: tablist, tab, tabpanel é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
What a Tab Set Really Is
A tab set shows one panel at a time and lets users switch between them. To assistive tech it must look like one widget, not loose links.
Three Roles Work Together
The pattern relies on three ARIA roles: a tablist that holds the tabs, each tab, and the panel each tab reveals. Get all three right.
The Container Is a tablist
Wrap your row of tabs in an element with role="tablist". This tells screen readers the children inside are a related set of tabs.
<div role="tablist">...</div>Each Tab Is a Button
Build each tab from a real button with role="tab". A button is focusable and clickable for free, so you avoid extra wiring.
<button role="tab">Profile</button>The Panel Is a tabpanel
The content each tab shows gets role="tabpanel". This marks it as the region controlled by the currently selected tab.
<div role="tabpanel">Profile details</div>Mark the Selected Tab
Set aria-selected="true" on the active tab and false on the rest. Screen readers announce which tab is currently chosen.
<button role="tab" aria-selected="true">Profile</button>Link Tab to Its Panel
Point each tab at its panel with aria-controls, set to the panel id. Users learn which region the tab opens.
<button role="tab" aria-controls="p1">Profile</button>Name the Panel From Its Tab
Give the panel an aria-labelledby that points back to its tab. Now the panel borrows the tab text as its accessible name.
<div role="tabpanel" aria-labelledby="tab1">...</div>Hide the Inactive Panels
Only one panel should show at a time. Add the hidden attribute to the panels whose tab is not selected so they leave the page.
<div role="tabpanel" hidden>...</div>Give the Tablist a Label
A tablist deserves an aria-label describing its purpose, like Account settings. Users hear what the whole set of tabs is for.
<div role="tablist" aria-label="Account settings">...</div>How It All Sounds
Put together, a screen reader announces something like Profile, tab, selected, 1 of 3. That orientation is exactly what makes tabs usable.
Quick Check
You are wiring up the container that holds your row of tabs. Which role belongs on it?
Recap: The Tabs Pattern
You learned the tablist, tab, tabpanel trio. Mark the selected tab, link each tab to its panel, and hide the inactive ones.
Perguntas Frequentes
A aula “O padrão de abas: tablist, tab, tabpanel” é grátis?
Sim — o texto completo de “O padrão de abas: tablist, tab, tabpanel” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “O padrão de abas: tablist, tab, tabpanel”?
Associe os três papéis necessários para um conjunto de abas. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “O padrão de abas: tablist, tab, tabpanel”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O padrão de abas: tablist, tab, tabpanel
- Navegação entre abas com as teclas de seta
- Acordeões com Button e aria-expanded
- Área expansível versus abas: escolha a opção certa