This is a small guide to marking up fully accessible tabs. Consider using PostHTML ARIA Tabs as a practical solution.
- Add
tablist
role to the<ul>
to indicate it contains tabs. - Add
presentation
role to each<li>
to bypass its list item state. - Add
tab
role to each<a>
to incidate it is an actual tab. - Add
href
andaria-controls
to each<a>
to reference its tab panel.