michaeldeboeve

Practical ARIA Tabs

This is a small guide to marking up fully accessible tabs. Consider using PostHTML ARIA Tabs as a practical solution.

The Rules

1. Add tablist role to the <ul> to indicate it contains tabs.
2. Add presentation role to each <li> to bypass its list item state.
3. Add tab role to each <a> to incidate it is an actual tab.
4. Add href and aria-controls to each <a> to reference its tab panel.