Practical ARIA Tabs: Creating fully accessible tabs

README.md

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.
5. Add id to each <a> as a reference for its tab panel.
6. Add aria-selected="true" to the active <a> tab.
7. Add tabpanel role to each <section> to indicate it is a tab panel.
8. Add id to each <section> as a reference for its tab.
9. Add aria-labelledby to each <section> to reference its label.
10. Add hidden to each inactive <section> to indicate it is hidden.

The Markup

<ul role="tablist">
	<li role="presentation">
		<a id="foo-tab" href="#foo" role="tab" aria-controls="foo" aria-selected="true">Foo</a>
	</li>

	<li role="presentation">
		<a id="bar-tab" href="#bar" role="tab" aria-controls="bar">Bar</a>
	</li>

	<li role="presentation">
		<a id="qux-tab" href="#qux" role="tab" aria-controls="qux">Qux</a>
	</li>
</ul>

<section id="foo" role="tabpanel" aria-labelledby="foo-tab">
	...
</section>

<section id="bar" role="tabpanel" aria-labelledby="bar-tab" hidden>
	...
</section>

<section id="qux" role="tabpanel" aria-labelledby="qux-tab" hidden>
	...
</section>

For a fully accessible implementation, this JavaScript should be included somewhere in the front-end.

Citations

• http://heydonworks.com/practical_aria_examples/
• https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/
• https://24ways.org/2015/how-tabs-should-work/

Notes

• Internet Explorer 10 and below require explicit CSS to support [hidden], e.g. [hidden] { display: none; }.
• <ul> and <li> elements are used for source readability and (to a much lesser extent) progressive enhancement. While both of their implied semantics are overwritten, these elements best represent a collection of items.