PostHTML ARIA Tabs

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.

Learn more about the markup or caveats.

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>

Learn more about the rules or caveats.

• 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.

Learn more about the rules or markup.